code-block-pro / src / editor / components / FontSelect.tsx

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

133 lines 4.1 KB

Raw Download Zip

1	import { SelectControl, FontSizePicker } from '@wordpress/components';
2	import { __ } from '@wordpress/i18n';
3
4	// This file ignores types as they are outdated from the source
5
6	export const FontSizeSelect = ({
7	value,
8	onChange,
9	}: {
10	value: string;
11	onChange: (v: string \| undefined) => void;
12	}) => {
13	return (
14	<FontSizePicker
15	onChange={(size) => {
16	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
17	// @ts-ignore-next-line
18	onChange(size ?? '.875rem');
19	}}
20	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
21	// @ts-ignore-next-line
22	value={value}
23	fontSizes={[
24	{
25	name: 'Tiny',
26	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
27	// @ts-ignore-next-line
28	size: '.75rem',
29	slug: 'tiny',
30	},
31	{
32	name: 'Small',
33	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
34	// @ts-ignore-next-line
35	size: '.875rem',
36	slug: 'small',
37	},
38	{
39	name: 'Normal',
40	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
41	// @ts-ignore-next-line
42	size: '1rem',
43	slug: 'normal',
44	},
45	{
46	name: 'Big',
47	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
48	// @ts-ignore-next-line
49	size: '1.125rem',
50	slug: 'big',
51	},
52	]}
53	/>
54	);
55	};
56
57	export const FontLineHeightSelect = ({
58	value,
59	onChange,
60	}: {
61	value: string;
62	onChange: (v: string \| undefined) => void;
63	}) => {
64	return (
65	<FontSizePicker
66	onChange={(size) => {
67	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
68	// @ts-ignore-next-line
69	onChange(size ?? '.875rem');
70	}}
71	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
72	// @ts-ignore-next-line
73	value={value}
74	fontSizes={[
75	{
76	name: 'None',
77	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
78	// @ts-ignore-next-line
79	size: '1rem',
80	slug: 'none',
81	},
82	{
83	name: 'Tight',
84	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
85	// @ts-ignore-next-line
86	size: '1.25rem',
87	slug: 'tight',
88	},
89	{
90	name: 'Normal',
91	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
92	// @ts-ignore-next-line
93	size: '1.5rem',
94	slug: 'normal',
95	},
96	{
97	name: 'Relaxed',
98	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
99	// @ts-ignore-next-line
100	size: '1.625rem',
101	slug: 'relaxed',
102	},
103	]}
104	/>
105	);
106	};
107	export const FontFamilySelect = ({
108	value,
109	onChange,
110	}: {
111	value: string;
112	onChange: (v: string) => void;
113	}) => {
114	const fonts = {
115	'': __('System Default', 'code-block-pro'),
116	'Code-Pro-JetBrains-Mono': 'JetBrains Mono',
117	'Code-Pro-Fira-Code': 'Fira Code',
118	};
119	return (
120	<SelectControl
121	id="code-block-pro-font-family"
122	label={__('Font Family', 'code-block-pro')}
123	help={__('Fonts only render on the frontend.', 'code-block-pro')}
124	value={value}
125	onChange={onChange}
126	options={Object.entries(fonts).map(([value, label]) => ({
127	label,
128	value,
129	}))}
130	/>
131	);
132	};
133