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

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

340 lines 15.3 KB

Raw Download Zip

1	import { InspectorControls } from '@wordpress/block-editor';
2	import {
3	PanelBody,
4	TextControl,
5	BaseControl,
6	SelectControl,
7	Button,
8	CheckboxControl,
9	} from '@wordpress/components';
10	import { __ } from '@wordpress/i18n';
11	import { Theme } from 'shiki';
12	import { useLanguage } from '../../hooks/useLanguage';
13	import { useGlobalStore } from '../../state/global';
14	import { useLanguageStore } from '../../state/language';
15	import { useThemeStore } from '../../state/theme';
16	import { AttributesPropsAndSetter } from '../../types';
17	import { languages } from '../../util/languages';
18	import {
19	FontSizeSelect,
20	FontLineHeightSelect,
21	FontFamilySelect,
22	} from '../components/FontSelect';
23	import { FooterSelect } from '../components/FooterSelect';
24	import { HeaderSelect } from '../components/HeaderSelect';
25	// import { Notice } from '../components/Notice';
26	import { ThemeSelect } from '../components/ThemeSelect';
27	import { BlurControl } from './BlurControl';
28	import { HighlightingControl } from './HighlightingControl';
29
30	export const SidebarControls = ({
31	attributes,
32	setAttributes,
33	}: AttributesPropsAndSetter) => {
34	const [language, setLanguage] = useLanguage({ attributes, setAttributes });
35	const { recentLanguages } = useLanguageStore();
36	const { updateThemeHistory } = useThemeStore();
37	const { setPreviousSettings } = useGlobalStore();
38	const { headerType, footerType } = attributes;
39
40	const footersNeedingLinks = ['simpleStringEnd', 'simpleStringStart'];
41
42	const showHeaderTextEdit = ['simpleString'].includes(headerType);
43	const showFooterTextEdit = footersNeedingLinks.includes(footerType);
44	const showFooterLinkEdit = footersNeedingLinks.includes(footerType);
45	const showFooterLinkTargetEdit = footersNeedingLinks.includes(footerType);
46
47	return (
48	<InspectorControls>
49	<PanelBody
50	title={__('Settings', 'code-block-pro')}
51	initialOpen={true}>
52	<div className="code-block-pro-editor">
53	<BaseControl id="code-block-pro-language">
54	<SelectControl
55	id="code-block-pro-language"
56	label={__('Code Language', 'code-block-pro')}
57	data-cy-cbp="language-select"
58	value={language}
59	onChange={setLanguage}
60	options={Object.entries(languages).map(
61	([value, label]) => ({
62	label,
63	value,
64	}),
65	)}
66	/>
67	{recentLanguages?.length > 0 ? (
68	<>
69	<span className="mb-2 block">
70	{__('Recently Used', 'code-block-pro')}
71	</span>
72	<div className="flex gap-1">
73	{recentLanguages?.map((lang) => (
74	<Button
75	key={lang}
76	className="bg-gray-100 text-black no-underline p-1 px-2 "
77	variant="link"
78	onClick={() => setLanguage(lang)}>
79	{languages[lang] ?? lang}
80	</Button>
81	))}
82	</div>
83	</>
84	) : null}
85	</BaseControl>
86	{showHeaderTextEdit && (
87	<BaseControl id="code-block-pro-header-text">
88	<TextControl
89	id="code-block-pro-header-text"
90	spellCheck={false}
91	autoComplete="off"
92	label={__('Header Text', 'code-block-pro')}
93	placeholder={languages[language]}
94	onChange={(headerString) => {
95	setAttributes({ headerString });
96	}}
97	value={attributes.headerString ?? ''}
98	/>
99	</BaseControl>
100	)}
101	{showFooterTextEdit && (
102	<BaseControl id="code-block-pro-footer-text">
103	<TextControl
104	id="code-block-pro-footer-text"
105	spellCheck={false}
106	autoComplete="off"
107	label={__('Footer Text', 'code-block-pro')}
108	placeholder={languages[language]}
109	onChange={(footerString) => {
110	setAttributes({ footerString });
111	}}
112	value={attributes.footerString ?? ''}
113	/>
114	</BaseControl>
115	)}
116	{showFooterLinkEdit && (
117	<BaseControl id="code-block-pro-footer-link">
118	<TextControl
119	id="code-block-pro-footer-link"
120	spellCheck={false}
121	type="url"
122	autoComplete="off"
123	label={__('Footer Link', 'code-block-pro')}
124	placeholder="https://example.com"
125	help={__(
126	'Leave blank to disable',
127	'code-block-pro',
128	)}
129	onChange={(footerLink) => {
130	setAttributes({ footerLink });
131	}}
132	value={attributes.footerLink ?? ''}
133	/>
134	</BaseControl>
135	)}
136	{showFooterLinkTargetEdit && (
137	<BaseControl id="code-block-pro-footer-link-target">
138	<CheckboxControl
139	id="code-block-pro-footer-link-target"
140	label={__('Open in new tab?', 'code-block-pro')}
141	checked={attributes.footerLinkTarget}
142	onChange={(footerLinkTarget) => {
143	setAttributes({ footerLinkTarget });
144	updateThemeHistory({
145	...attributes,
146	footerLinkTarget,
147	});
148	}}
149	/>
150	</BaseControl>
151	)}
152	{/* <Notice /> */}
153	</div>
154	</PanelBody>
155	<PanelBody
156	title={__('Line Settings', 'code-block-pro')}
157	initialOpen={false}>
158	<div className="code-block-pro-editor">
159	<BaseControl id="code-block-pro-show-line-numbers">
160	<CheckboxControl
161	data-cy="show-line-numbers"
162	label={__('Enable line numbers', 'code-block-pro')}
163	help={__(
164	'Enable line numbers and set a starting number.',
165	'code-block-pro',
166	)}
167	checked={attributes.lineNumbers}
168	onChange={(lineNumbers) => {
169	setAttributes({ lineNumbers });
170	updateThemeHistory({
171	...attributes,
172	lineNumbers,
173	});
174	}}
175	/>
176	{attributes.lineNumbers && (
177	<BaseControl id="code-block-pro-line-number-start">
178	<TextControl
179	id="code-block-pro-line-number-start"
180	spellCheck={false}
181	autoComplete="off"
182	label={__('Start from', 'code-block-pro')}
183	onChange={(startingLineNumber) => {
184	setAttributes({ startingLineNumber });
185	}}
186	value={attributes.startingLineNumber}
187	/>
188	</BaseControl>
189	)}
190	</BaseControl>
191	<HighlightingControl
192	attributes={attributes}
193	setAttributes={setAttributes}
194	/>
195	<BlurControl
196	attributes={attributes}
197	setAttributes={setAttributes}
198	/>
199	</div>
200	</PanelBody>
201	<PanelBody
202	title={__('Header Type', 'code-block-pro')}
203	initialOpen={false}>
204	<HeaderSelect
205	attributes={attributes}
206	onClick={(headerType) => {
207	setAttributes({ headerType });
208	updateThemeHistory({ ...attributes, headerType });
209	}}
210	/>
211	</PanelBody>
212	<PanelBody
213	title={__('Footer Type', 'code-block-pro')}
214	initialOpen={false}>
215	<FooterSelect
216	attributes={attributes}
217	onClick={(footerType) => {
218	setAttributes({ footerType });
219	updateThemeHistory({ ...attributes, footerType });
220	}}
221	/>
222	</PanelBody>
223	<PanelBody
224	title={__('Themes', 'code-block-pro')}
225	initialOpen={false}>
226	<ThemeSelect
227	{...attributes}
228	onClick={(slug: Theme) => {
229	setAttributes({ theme: slug });
230	updateThemeHistory({ ...attributes, theme: slug });
231	}}
232	/>
233	</PanelBody>
234	<PanelBody
235	title={__('Styling', 'code-block-pro')}
236	initialOpen={false}>
237	<div
238	className="code-block-pro-editor"
239	data-cy="font-size-select">
240	<h2 className="m-0">{__('Font Size', 'code-block-pro')}</h2>
241	<FontSizeSelect
242	value={attributes.fontSize}
243	onChange={(fontSize) => {
244	setAttributes({ fontSize });
245	updateThemeHistory({ ...attributes, fontSize });
246	}}
247	/>
248	</div>
249	<div
250	className="code-block-pro-editor"
251	data-cy="font-line-height-select">
252	<h2 className="m-0">
253	{__('Line Height', 'code-block-pro')}
254	</h2>
255	<FontLineHeightSelect
256	value={attributes.lineHeight}
257	onChange={(lineHeight) => {
258	setAttributes({ lineHeight });
259	updateThemeHistory({
260	...attributes,
261	lineHeight,
262	});
263	}}
264	/>
265	</div>
266	<div
267	className="code-block-pro-editor"
268	data-cy="font-family-select">
269	<FontFamilySelect
270	value={attributes.fontFamily}
271	onChange={(fontFamily) => {
272	setAttributes({ fontFamily });
273	updateThemeHistory({
274	...attributes,
275	fontFamily,
276	});
277	}}
278	/>
279	</div>
280	<div className="code-block-pro-editor" data-cy="clamp-fonts">
281	<div className="mt-6">
282	<CheckboxControl
283	label={__('Clamp Values', 'code-block-pro')}
284	help={__(
285	'Check this if your font sizes are unusually large or tiny.',
286	'code-block-pro',
287	)}
288	checked={attributes.clampFonts}
289	onChange={(clampFonts) => {
290	setAttributes({ clampFonts });
291	updateThemeHistory({
292	...attributes,
293	clampFonts,
294	});
295	}}
296	/>
297	</div>
298	</div>
299	</PanelBody>
300	<PanelBody
301	title={__('Extra Settings', 'code-block-pro')}
302	initialOpen={false}>
303	<BaseControl id="code-block-pro-show-copy-button">
304	<CheckboxControl
305	data-cy="copy-button"
306	label={__('Copy Button', 'code-block-pro')}
307	help={__(
308	'If checked, users will be able to copy your code snippet to their clipboard.',
309	'code-block-pro',
310	)}
311	checked={attributes.copyButton}
312	onChange={(value) => {
313	setPreviousSettings({ copyButton: value });
314	setAttributes({ copyButton: value });
315	}}
316	/>
317	</BaseControl>
318	<BaseControl id="code-block-pro-disable-padding">
319	<CheckboxControl
320	data-cy="disable-padding"
321	label={__('Disable Padding', 'code-block-pro')}
322	help={__(
323	'This is useful if you pick a theme that matches your background color, and want the code to line up to the edge of your content. You maybe need to add your own padding with CSS.',
324	'code-block-pro',
325	)}
326	checked={attributes.disablePadding}
327	onChange={(disablePadding) => {
328	setAttributes({ disablePadding });
329	updateThemeHistory({
330	...attributes,
331	disablePadding,
332	});
333	}}
334	/>
335	</BaseControl>
336	</PanelBody>
337	</InspectorControls>
338	);
339	};
340