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

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

106 lines 3.4 KB

Raw Download Zip

1	import { FontSizePicker } from '@wordpress/components';
2
3	// This file ignores types as they are outdated from the source
4
5	export const FontSizeSelect = ({
6	value,
7	onChange,
8	}: {
9	value: string;
10	onChange: (v: string \| undefined) => void;
11	}) => {
12	return (
13	<FontSizePicker
14	onChange={(size) => {
15	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
16	// @ts-ignore-next-line
17	onChange(size ?? '.875rem');
18	}}
19	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
20	// @ts-ignore-next-line
21	value={value}
22	fontSizes={[
23	{
24	name: 'Tiny',
25	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
26	// @ts-ignore-next-line
27	size: '.75rem',
28	slug: 'tiny',
29	},
30	{
31	name: 'Small',
32	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
33	// @ts-ignore-next-line
34	size: '.875rem',
35	slug: 'small',
36	},
37	{
38	name: 'Normal',
39	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
40	// @ts-ignore-next-line
41	size: '1rem',
42	slug: 'normal',
43	},
44	{
45	name: 'Big',
46	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
47	// @ts-ignore-next-line
48	size: '1.125rem',
49	slug: 'big',
50	},
51	]}
52	/>
53	);
54	};
55
56	export const FontLineHeightSelect = ({
57	value,
58	onChange,
59	}: {
60	value: string;
61	onChange: (v: string \| undefined) => void;
62	}) => {
63	return (
64	<FontSizePicker
65	onChange={(size) => {
66	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
67	// @ts-ignore-next-line
68	onChange(size ?? '.875rem');
69	}}
70	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
71	// @ts-ignore-next-line
72	value={value}
73	fontSizes={[
74	{
75	name: 'None',
76	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
77	// @ts-ignore-next-line
78	size: '1rem',
79	slug: 'none',
80	},
81	{
82	name: 'Tight',
83	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
84	// @ts-ignore-next-line
85	size: '1.25rem',
86	slug: 'tight',
87	},
88	{
89	name: 'Normal',
90	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
91	// @ts-ignore-next-line
92	size: '1.5rem',
93	slug: 'normal',
94	},
95	{
96	name: 'Relaxed',
97	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
98	// @ts-ignore-next-line
99	size: '1.625rem',
100	slug: 'relaxed',
101	},
102	]}
103	/>
104	);
105	};
106