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

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

156 lines 6.3 KB

Raw Download Zip

1	import { InspectorControls } from '@wordpress/block-editor';
2	import {
3	PanelBody,
4	BaseControl,
5	SelectControl,
6	Button,
7	CheckboxControl,
8	} from '@wordpress/components';
9	import { __ } from '@wordpress/i18n';
10	import { Theme } from 'shiki';
11	import { useLanguage } from '../../hooks/useLanguage';
12	import { useGlobalStore } from '../../state/global';
13	import { useLanguageStore } from '../../state/language';
14	import { useThemeStore } from '../../state/theme';
15	import { AttributesPropsAndSetter } from '../../types';
16	import { languages } from '../../util/languages';
17	import {
18	FontSizeSelect,
19	FontLineHeightSelect,
20	FontFamilySelect,
21	} from '../components/FontSelect';
22	import { HeaderSelect } from '../components/HeaderSelect';
23	import { Notice } from '../components/Notice';
24	import { ThemeSelect } from '../components/ThemeSelect';
25
26	export const SidebarControls = ({
27	attributes,
28	setAttributes,
29	}: AttributesPropsAndSetter) => {
30	const [language, setLanguage] = useLanguage({ attributes, setAttributes });
31	const { recentLanguages } = useLanguageStore();
32	const { updateThemeHistory } = useThemeStore();
33	const { setPreviousSettings } = useGlobalStore();
34
35	return (
36	<InspectorControls>
37	<PanelBody
38	title={__('Settings', 'code-block-pro')}
39	initialOpen={true}>
40	<div className="code-block-pro-editor">
41	<BaseControl id="code-block-pro-language">
42	<SelectControl
43	id="code-block-pro-language"
44	label={__('Code Language', 'code-block-pro')}
45	data-cy-cbp="language-select"
46	value={language}
47	onChange={setLanguage}
48	options={Object.entries(languages).map(
49	([value, label]) => ({
50	label,
51	value,
52	}),
53	)}
54	/>
55	{recentLanguages?.length > 0 ? (
56	<>
57	<span className="mb-2 block">
58	{__('Recently Used', 'code-block-pro')}
59	</span>
60	<div className="flex gap-1">
61	{recentLanguages?.map((lang) => (
62	<Button
63	key={lang}
64	className="bg-gray-100 text-black no-underline p-1 px-2 "
65	variant="link"
66	onClick={() => setLanguage(lang)}>
67	{languages[lang] ?? lang}
68	</Button>
69	))}
70	</div>
71	</>
72	) : null}
73	</BaseControl>
74	<Notice />
75	</div>
76	</PanelBody>
77	<PanelBody
78	title={__('Styling', 'code-block-pro')}
79	initialOpen={false}>
80	<div className="code-block-pro-editor">
81	<h2 className="m-0">{__('Font Size', 'code-block-pro')}</h2>
82	<FontSizeSelect
83	value={attributes.fontSize}
84	onChange={(fontSize) => {
85	setAttributes({ fontSize });
86	updateThemeHistory({ ...attributes, fontSize });
87	}}
88	/>
89	<h2 className="m-0">
90	{__('Line Height', 'code-block-pro')}
91	</h2>
92	<FontLineHeightSelect
93	value={attributes.lineHeight}
94	onChange={(lineHeight) => {
95	setAttributes({ lineHeight });
96	updateThemeHistory({
97	...attributes,
98	lineHeight,
99	});
100	}}
101	/>
102	<FontFamilySelect
103	value={attributes.fontFamily}
104	onChange={(fontFamily) => {
105	setAttributes({ fontFamily });
106	updateThemeHistory({
107	...attributes,
108	fontFamily,
109	});
110	}}
111	/>
112	</div>
113	</PanelBody>
114	<PanelBody
115	title={__('Header Type', 'code-block-pro')}
116	initialOpen={false}>
117	<HeaderSelect
118	attributes={attributes}
119	onClick={(headerType: string) => {
120	console.log({ headerType });
121	setAttributes({ headerType });
122	updateThemeHistory({ ...attributes, headerType });
123	}}
124	/>
125	</PanelBody>
126	<PanelBody
127	title={__('Themes', 'code-block-pro')}
128	initialOpen={false}>
129	<ThemeSelect
130	{...attributes}
131	onClick={(slug: Theme) => {
132	setAttributes({ theme: slug });
133	updateThemeHistory({ ...attributes, theme: slug });
134	}}
135	/>
136	</PanelBody>
137	<PanelBody
138	title={__('Extra Settings', 'code-block-pro')}
139	initialOpen={false}>
140	<CheckboxControl
141	label={__('Copy Button', 'code-block-pro')}
142	help={__(
143	'If checked, users will be able to copy your code snippet to their clipboard.',
144	'code-block-pro',
145	)}
146	checked={attributes.copyButton}
147	onChange={(value) => {
148	setPreviousSettings({ copyButton: value });
149	setAttributes({ copyButton: value });
150	}}
151	/>
152	</PanelBody>
153	</InspectorControls>
154	);
155	};
156