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

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

145 lines 4.7 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-Comic-Mono.ttf': 'Comic Mono',
117	'Code-Pro-Cozette': 'Cozette',
118	'Code-Pro-Deja-Vu-Mono.ttf': 'DejaVu Mono',
119	'Code-Pro-Fantasque-Sans-Mono': 'Fantasque Sans Mono',
120	'Code-Pro-Fira-Code': 'Fira Code',
121	'Code-Pro-Geist-Mono': 'Geist Mono',
122	'Code-Pro-Hack': 'Hack',
123	'Code-Pro-JetBrains-Mono': 'JetBrains Mono',
124	'Code-Pro-JetBrains-Mono-NL.ttf': 'JetBrains Mono (No Ligatures)',
125	'Code-Pro-Monaspace-Argon.woff': 'Monaspace Argon',
126	'Code-Pro-Monaspace-Krypton.woff': 'Monaspace Krypton',
127	'Code-Pro-Monaspace-Neon.woff': 'Monaspace Neon',
128	'Code-Pro-Monaspace-Radon.woff': 'Monaspace Radon',
129	'Code-Pro-Monaspace-Xenon.woff': 'Monaspace Xenon',
130	'Code-Pro-Roboto-Mono.ttf': 'Roboto Mono',
131	};
132	return (
133	<SelectControl
134	id="code-block-pro-font-family"
135	label={__('Font Family', 'code-block-pro')}
136	value={value}
137	onChange={onChange}
138	options={Object.entries(fonts).map(([value, label]) => ({
139	label,
140	value,
141	}))}
142	/>
143	);
144	};
145