Extendify / 1.9.0

Extendify v1.9.0

extendify / src / Draft / components / EditMenu.js

EditMenu.js in Extendify 1.9.0, at src/Draft/components/EditMenu.js

156 lines 5.7 KB

Raw Download Zip

1	import { MenuGroup, MenuItem } from '@wordpress/components'
2	import { useSelect } from '@wordpress/data'
3	import { useEffect } from '@wordpress/element'
4	import { __ } from '@wordpress/i18n'
5	import { Icon } from '@wordpress/icons'
6	import { useContentHighlight } from '@draft/hooks/useContentHighlight'
7	import { wand, check, shorter, longer, magic } from '@draft/svg'
8
9	export const EditMenu = ({ disabled, setPrompt }) => {
10	const { toggleHighlight } = useContentHighlight()
11	const selectedBlockClientIds = useSelect(
12	(select) => select('core/block-editor').getSelectedBlockClientIds(),
13	[],
14	)
15	const { getBlocksByClientId } = useSelect(
16	(select) => select('core/block-editor'),
17	[],
18	)
19
20	useEffect(() => {
21	return () => {
22	toggleHighlight(selectedBlockClientIds, { isHighlighted: false })
23	}
24	}, [selectedBlockClientIds, toggleHighlight])
25
26	const handleClick = (promptType) => {
27	setPrompt({
28	text: getSelectedContent(),
29	promptType,
30	systemMessageKey: 'edit',
31	})
32	}
33
34	const getSelectedContent = () => {
35	const selectedBlocks = getBlocksByClientId(selectedBlockClientIds)
36	return selectedBlocks
37	.map(({ attributes }) => attributes.content)
38	.join('\n\n')
39	}
40
41	return (
42	<MenuGroup>
43	<MenuItem
44	onClick={() => handleClick('improve-writing')}
45	onMouseEnter={() =>
46	toggleHighlight(selectedBlockClientIds, {
47	isHighlighted: true,
48	})
49	}
50	onMouseLeave={() =>
51	toggleHighlight(selectedBlockClientIds, {
52	isHighlighted: false,
53	})
54	}
55	disabled={disabled}
56	className="group">
57	<Icon
58	icon={wand}
59	className="flex-shrink-0 group-hover:text-current text-design-main fill-current w-5 h-5 mr-2"
60	/>
61	<span className="whitespace-normal text-left">
62	{__('Improve writing', 'extendify')}
63	</span>
64	</MenuItem>
65	<MenuItem
66	onClick={() => handleClick('fix-spelling-grammar')}
67	onMouseEnter={() =>
68	toggleHighlight(selectedBlockClientIds, {
69	isHighlighted: true,
70	})
71	}
72	onMouseLeave={() =>
73	toggleHighlight(selectedBlockClientIds, {
74	isHighlighted: false,
75	})
76	}
77	disabled={disabled}
78	className="group">
79	<Icon
80	icon={check}
81	className="flex-shrink-0 group-hover:text-current text-design-main fill-current w-5 h-5 mr-2"
82	/>
83	<span className="whitespace-normal text-left">
84	{__('Fix spelling & grammar', 'extendify')}
85	</span>
86	</MenuItem>
87	<MenuItem
88	onClick={() => handleClick('make-shorter')}
89	onMouseEnter={() =>
90	toggleHighlight(selectedBlockClientIds, {
91	isHighlighted: true,
92	})
93	}
94	onMouseLeave={() =>
95	toggleHighlight(selectedBlockClientIds, {
96	isHighlighted: false,
97	})
98	}
99	disabled={disabled}
100	className="group">
101	<Icon
102	icon={shorter}
103	className="flex-shrink-0 group-hover:text-current text-design-main fill-current w-5 h-5 mr-2"
104	/>
105	<span className="whitespace-normal text-left">
106	{__('Make shorter', 'extendify')}
107	</span>
108	</MenuItem>
109	<MenuItem
110	onClick={() => handleClick('make-longer')}
111	onMouseEnter={() =>
112	toggleHighlight(selectedBlockClientIds, {
113	isHighlighted: true,
114	})
115	}
116	onMouseLeave={() =>
117	toggleHighlight(selectedBlockClientIds, {
118	isHighlighted: false,
119	})
120	}
121	disabled={disabled}
122	className="group">
123	<Icon
124	icon={longer}
125	className="flex-shrink-0 group-hover:text-current text-design-main fill-current w-5 h-5 mr-2"
126	/>
127	<span className="whitespace-normal text-left">
128	{__('Make longer', 'extendify')}
129	</span>
130	</MenuItem>
131	<MenuItem
132	onClick={() => handleClick('simplify-language')}
133	onMouseEnter={() =>
134	toggleHighlight(selectedBlockClientIds, {
135	isHighlighted: true,
136	})
137	}
138	onMouseLeave={() =>
139	toggleHighlight(selectedBlockClientIds, {
140	isHighlighted: false,
141	})
142	}
143	disabled={disabled}
144	className="group">
145	<Icon
146	icon={magic}
147	className="flex-shrink-0 group-hover:text-current text-design-main fill-current w-5 h-5 mr-2"
148	/>
149	<span className="whitespace-normal text-left">
150	{__('Simplify language', 'extendify')}
151	</span>
152	</MenuItem>
153	</MenuGroup>
154	)
155	}
156