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

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

338 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 showHeaderTextEdit = ['simpleString'].includes(headerType);
41	const showFooterTextEdit = ['simpleStringEnd'].includes(footerType);
42	const showFooterLinkEdit = ['simpleStringEnd'].includes(footerType);
43	const showFooterLinkTargetEdit = ['simpleStringEnd'].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	{/* <Notice /> */}
151	</div>
152	</PanelBody>
153	<PanelBody
154	title={__('Line Settings', 'code-block-pro')}
155	initialOpen={false}>
156	<div className="code-block-pro-editor">
157	<BaseControl id="code-block-pro-show-line-numbers">
158	<CheckboxControl
159	data-cy="show-line-numbers"
160	label={__('Enable line numbers', 'code-block-pro')}
161	help={__(
162	'Enable line numbers and set a starting number.',
163	'code-block-pro',
164	)}
165	checked={attributes.lineNumbers}
166	onChange={(lineNumbers) => {
167	setAttributes({ lineNumbers });
168	updateThemeHistory({
169	...attributes,
170	lineNumbers,
171	});
172	}}
173	/>
174	{attributes.lineNumbers && (
175	<BaseControl id="code-block-pro-line-number-start">
176	<TextControl
177	id="code-block-pro-line-number-start"
178	spellCheck={false}
179	autoComplete="off"
180	label={__('Start from', 'code-block-pro')}
181	onChange={(startingLineNumber) => {
182	setAttributes({ startingLineNumber });
183	}}
184	value={attributes.startingLineNumber}
185	/>
186	</BaseControl>
187	)}
188	</BaseControl>
189	<HighlightingControl
190	attributes={attributes}
191	setAttributes={setAttributes}
192	/>
193	<BlurControl
194	attributes={attributes}
195	setAttributes={setAttributes}
196	/>
197	</div>
198	</PanelBody>
199	<PanelBody
200	title={__('Header Type', 'code-block-pro')}
201	initialOpen={false}>
202	<HeaderSelect
203	attributes={attributes}
204	onClick={(headerType) => {
205	setAttributes({ headerType });
206	updateThemeHistory({ ...attributes, headerType });
207	}}
208	/>
209	</PanelBody>
210	<PanelBody
211	title={__('Footer Type', 'code-block-pro')}
212	initialOpen={false}>
213	<FooterSelect
214	attributes={attributes}
215	onClick={(footerType) => {
216	setAttributes({ footerType });
217	updateThemeHistory({ ...attributes, footerType });
218	}}
219	/>
220	</PanelBody>
221	<PanelBody
222	title={__('Themes', 'code-block-pro')}
223	initialOpen={false}>
224	<ThemeSelect
225	{...attributes}
226	onClick={(slug: Theme) => {
227	setAttributes({ theme: slug });
228	updateThemeHistory({ ...attributes, theme: slug });
229	}}
230	/>
231	</PanelBody>
232	<PanelBody
233	title={__('Styling', 'code-block-pro')}
234	initialOpen={false}>
235	<div
236	className="code-block-pro-editor"
237	data-cy="font-size-select">
238	<h2 className="m-0">{__('Font Size', 'code-block-pro')}</h2>
239	<FontSizeSelect
240	value={attributes.fontSize}
241	onChange={(fontSize) => {
242	setAttributes({ fontSize });
243	updateThemeHistory({ ...attributes, fontSize });
244	}}
245	/>
246	</div>
247	<div
248	className="code-block-pro-editor"
249	data-cy="font-line-height-select">
250	<h2 className="m-0">
251	{__('Line Height', 'code-block-pro')}
252	</h2>
253	<FontLineHeightSelect
254	value={attributes.lineHeight}
255	onChange={(lineHeight) => {
256	setAttributes({ lineHeight });
257	updateThemeHistory({
258	...attributes,
259	lineHeight,
260	});
261	}}
262	/>
263	</div>
264	<div
265	className="code-block-pro-editor"
266	data-cy="font-family-select">
267	<FontFamilySelect
268	value={attributes.fontFamily}
269	onChange={(fontFamily) => {
270	setAttributes({ fontFamily });
271	updateThemeHistory({
272	...attributes,
273	fontFamily,
274	});
275	}}
276	/>
277	</div>
278	<div className="code-block-pro-editor" data-cy="clamp-fonts">
279	<div className="mt-6">
280	<CheckboxControl
281	label={__('Clamp Values', 'code-block-pro')}
282	help={__(
283	'Check this if your font sizes are unusually large or tiny.',
284	'code-block-pro',
285	)}
286	checked={attributes.clampFonts}
287	onChange={(clampFonts) => {
288	setAttributes({ clampFonts });
289	updateThemeHistory({
290	...attributes,
291	clampFonts,
292	});
293	}}
294	/>
295	</div>
296	</div>
297	</PanelBody>
298	<PanelBody
299	title={__('Extra Settings', 'code-block-pro')}
300	initialOpen={false}>
301	<BaseControl id="code-block-pro-show-copy-button">
302	<CheckboxControl
303	data-cy="copy-button"
304	label={__('Copy Button', 'code-block-pro')}
305	help={__(
306	'If checked, users will be able to copy your code snippet to their clipboard.',
307	'code-block-pro',
308	)}
309	checked={attributes.copyButton}
310	onChange={(value) => {
311	setPreviousSettings({ copyButton: value });
312	setAttributes({ copyButton: value });
313	}}
314	/>
315	</BaseControl>
316	<BaseControl id="code-block-pro-disable-padding">
317	<CheckboxControl
318	data-cy="disable-padding"
319	label={__('Disable Padding', 'code-block-pro')}
320	help={__(
321	'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.',
322	'code-block-pro',
323	)}
324	checked={attributes.disablePadding}
325	onChange={(disablePadding) => {
326	setAttributes({ disablePadding });
327	updateThemeHistory({
328	...attributes,
329	disablePadding,
330	});
331	}}
332	/>
333	</BaseControl>
334	</PanelBody>
335	</InspectorControls>
336	);
337	};
338