code-block-pro / src / editor / controls / Toolbar.tsx

Toolbar.tsx in Code Block Pro – Beautiful Syntax Highlighting 1.11.0, at src/editor/controls/Toolbar.tsx

75 lines 2.3 KB

Raw Download Zip

1	import { BlockControls } from '@wordpress/block-editor';
2	import {
3	ToolbarGroup,
4	Dropdown,
5	Button,
6	NavigableMenu,
7	MenuItem,
8	MenuGroup,
9	} from '@wordpress/components';
10	import { __ } from '@wordpress/i18n';
11	import { Lang } from 'shiki';
12	import { useLanguage } from '../../hooks/useLanguage';
13	import { AttributesPropsAndSetter } from '../../types';
14	import { languages } from '../../util/languages';
15
16	export const ToolbarControls = ({
17	attributes,
18	setAttributes,
19	}: AttributesPropsAndSetter) => {
20	const [language, setLanguage] = useLanguage({ attributes, setAttributes });
21	return (
22	<BlockControls>
23	<ToolbarGroup className="code-block-pro-editor">
24	<Dropdown
25	renderContent={() => (
26	<DropdownLanguageSelect
27	language={language}
28	setLanguage={setLanguage}
29	/>
30	)}
31	renderToggle={({ isOpen, onToggle }) => (
32	<Button
33	onClick={onToggle}
34	aria-expanded={isOpen}
35	aria-haspopup="true">
36	{languages[language] ?? language}
37	</Button>
38	)}
39	/>
40	</ToolbarGroup>
41	</BlockControls>
42	);
43	};
44	type LanguageSetterAndGetter = {
45	language: Lang;
46	setLanguage: (language: Lang) => void;
47	};
48	const DropdownLanguageSelect = ({
49	language,
50	setLanguage,
51	}: LanguageSetterAndGetter) => (
52	<NavigableMenu
53	orientation="vertical"
54	role="menu"
55	style={{
56	minWidth: '200px',
57	}}>
58	<MenuGroup label={__('Select language', 'code-block-pro')}>
59	{Object.entries(languages).map(([value, label]) => (
60	<MenuItem
61	key={value}
62	role="menuitem"
63	style={{ width: '100%' }}
64	isSelected={language === value}
65	variant={language === value ? 'primary' : undefined}
66	onClick={() => {
67	setLanguage(value as Lang);
68	}}>
69	{label}
70	</MenuItem>
71	))}
72	</MenuGroup>
73	</NavigableMenu>
74	);
75