extendify / src / Draft / components / ToolbarMenu.jsx

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

198 lines 5.0 KB

Raw Download Zip

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