extendify / src / Draft / components / ToolbarMenu.jsx

ToolbarMenu.jsx in Extendify 3.1.5, at src/Draft/components/ToolbarMenu.jsx

203 lines 5.0 KB

Raw Download Zip

1	import { DropdownTranslate } from '@draft/components/TranslationDropdown';
2	import { magic, twoLines } from '@draft/svg';
3	import {
4	BlockControls,
5	store as blockEditorStore,
6	} from '@wordpress/block-editor';
7	import {
8	Dropdown,
9	MenuGroup,
10	MenuItem,
11	NavigableMenu,
12	ToolbarButton,
13	ToolbarGroup,
14	} from '@wordpress/components';
15	import { useDispatch, useSelect } from '@wordpress/data';
16	import { store as editPostStore } from '@wordpress/edit-post';
17	import { __, isRTL } from '@wordpress/i18n';
18	import {
19	customPostType,
20	Icon,
21	paragraph,
22	postContent,
23	termDescription,
24	} from '@wordpress/icons';
25
26	const supportedBlocks = [
27	'core/paragraph',
28	'core/list-item',
29	'core/verse',
30	'core/preformatted',
31	'core/heading',
32	'core/site-logo',
33	];
34
35	export const ToolbarMenu = (CurrentMenuItems, props) => {
36	const { clientId: blockId } = props;
37	const { getBlockName, getBlock } = useSelect(
38	(select) => select(blockEditorStore),
39	[],
40	);
41	const { getActiveGeneralSidebarName } = useSelect(
42	(select) => select(editPostStore),
43	[],
44	);
45	const { openGeneralSidebar } = useDispatch(editPostStore);
46
47	// TODO: Only paragraphs?
48	if (!supportedBlocks.includes(getBlockName(blockId))) {
49	return <CurrentMenuItems {...props} />;
50	}
51	const text = getBlock(blockId)?.attributes?.content \|\| '';
52	const openDraft = () => openGeneralSidebar('extendify-draft/draft');
53	const closeDraft = () => openGeneralSidebar('edit-post/block');
54	const toggleDraft = () =>
55	getActiveGeneralSidebarName() === 'extendify-draft/draft'
56	? closeDraft()
57	: openDraft();
58	const updatePrompt = (detail) =>
59	window.dispatchEvent(
60	new CustomEvent('extendify-draft:set-prompt', { detail }),
61	);
62
63	return (
64	<>
65	<CurrentMenuItems {...props} />
66	<BlockControls>
67	<ToolbarGroup className="extendify-draft">
68	<Dropdown
69	renderContent={({ onClose }) => (
70	<DropdownActions
71	text={text}
72	closePopup={onClose}
73	openDraft={openDraft}
74	updatePrompt={updatePrompt}
75	/>
76	)}
77	renderToggle={({ isOpen, onToggle }) => {
78	const handleClick = () => {
79	if (!text) return toggleDraft();
80	onToggle();
81	};
82	return (
83	<ToolbarButton
84	className="py-1.5 pl-2 pr-3 text-white before:bg-editor-main before:content-[''] hover:before:bg-editor-main-darker"
85	onClick={handleClick}
86	aria-expanded={isOpen}
87	aria-haspopup="true"
88	iconPosition={isRTL() ? 'right' : 'left'}
89	icon={magic}
90	>
91	{__('Ask AI', 'extendify-local')}
92	</ToolbarButton>
93	);
94	}}
95	/>
96	</ToolbarGroup>
97	</BlockControls>
98	</>
99	);
100	};
101
102	const DropdownActions = ({ text, closePopup, openDraft, updatePrompt }) => {
103	const actions = [
104	{
105	label: __('Improve writing', 'extendify-local'),
106	promptType: 'improve-writing',
107	systemMessageKey: 'edit',
108	icon: <Icon icon={customPostType} />,
109	disabled: () => false,
110	},
111	{
112	label: __('Fix spelling & grammar', 'extendify-local'),
113	promptType: 'fix-spelling-grammar',
114	systemMessageKey: 'edit',
115	icon: <Icon icon={termDescription} />,
116	disabled: () => false,
117	},
118	{
119	label: __('Simplify language', 'extendify-local'),
120	promptType: 'simplify-language',
121	systemMessageKey: 'edit',
122	icon: <Icon icon={paragraph} />,
123	disabled: () => false,
124	},
125	{
126	label: __('Make shorter', 'extendify-local'),
127	promptType: 'make-shorter',
128	systemMessageKey: 'edit',
129	icon: <Icon icon={twoLines} />,
130	disabled: () => false,
131	},
132	{
133	label: __('Make longer', 'extendify-local'),
134	promptType: 'make-longer',
135	systemMessageKey: 'edit',
136	icon: <Icon icon={postContent} />,
137	disabled: () => false,
138	},
139	];
140
141	return (
142	<NavigableMenu
143	orientation="vertical"
144	role="menu"
145	style={{ minWidth: '200px' }}
146	>
147	<MenuGroup className="extendify-draft">
148	<MenuItem
149	key={'custom-prompt'}
150	style={{ width: '100%' }}
151	isSelected={false}
152	disabled={false}
153	iconPosition="left"
154	icon={magic}
155	variant={undefined}
156	onClick={() => {
157	openDraft?.();
158	closePopup?.();
159	window.requestAnimationFrame(() =>
160	window.requestAnimationFrame(() =>
161	document.getElementById('draft-ai-textarea').focus(),
162	),
163	);
164	}}
165	>
166	{__('Custom prompt', 'extendify-local')}
167	</MenuItem>
168	{actions.map(
169	({ label, promptType, systemMessageKey, disabled, icon }) => (
170	<MenuItem
171	key={`${promptType}-${promptType}-${systemMessageKey}`}
172	style={{ width: '100%' }}
173	isSelected={false}
174	disabled={disabled()}
175	iconPosition={isRTL() ? 'left' : 'right'}
176	icon={icon}
177	variant={undefined}
178	onClick={() => {
179	openDraft?.();
180	closePopup?.();
181	window.requestAnimationFrame(() =>
182	window.requestAnimationFrame(() =>
183	updatePrompt({ text, promptType, systemMessageKey }),
184	),
185	);
186	}}
187	>
188	{label}
189	</MenuItem>
190	),
191	)}
192
193	<DropdownTranslate
194	text={text}
195	closePopup={closePopup}
196	openDraft={openDraft}
197	updatePrompt={updatePrompt}
198	/>
199	</MenuGroup>
200	</NavigableMenu>
201	);
202	};
203