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

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

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