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

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

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