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

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

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