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

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

153 lines 5.5 KB

Raw Download Zip

1	import { BaseControl, ExternalLink } from '@wordpress/components';
2	import { applyFilters } from '@wordpress/hooks';
3	import { sprintf, __ } from '@wordpress/i18n';
4	import { Theme } from 'shiki';
5	import defaultThemes from '../../defaultThemes.json';
6	import { useSettingsStore } from '../../state/settings';
7	import { CustomStyles, HelpUrl, Lang, ThemeOption } from '../../types';
8	import { getPriorityThemes } from '../../util/themes';
9	import { ThemePreview } from '../components/ThemePreview';
10
11	type ThemeSelectProps = {
12	theme: Theme;
13	language: Lang;
14	code: string;
15	fontSize: string;
16	lineHeight: string;
17	fontFamily: string;
18	search: string;
19	clampFonts: boolean;
20	tabSize: number;
21	onClick: (slug: Theme) => void;
22	};
23	export const ThemeSelect = (props: ThemeSelectProps) => {
24	const { hiddenThemes } = useSettingsStore();
25	const themes = applyFilters(
26	'blocks.codeBlockPro.themes',
27	defaultThemes,
28	) as ThemeOption;
29	const themesSorted = Object.entries(themes)
30	.filter(([slug]) => !hiddenThemes.includes(slug))
31	.filter(([slug]) => slug.includes(props.search.toLocaleLowerCase()))
32	.map(([slug, data]) => ({ slug, ...data }))
33	// Put priority themes at the top
34	.sort((a, b) => (a.priority === b.priority ? 0 : a.priority ? -1 : 1))
35	// then put custom themes above that
36	.sort((a, b) => (a.custom === b.custom ? 0 : a.custom ? -1 : 1));
37
38	const priorityThemes = getPriorityThemes();
39
40	return (
41	<div
42	className="code-block-pro-editor"
43	style={{ tabSize: props.tabSize }}>
44	{props.search?.length > 0 ? (
45	<BaseControl id="add-on-themes">
46	{priorityThemes?.length > 0 ? null : (
47	<div className="font-semibold text-base">
48	<ExternalLink href="https://code-block-pro.com/?utm_campaign=notice&utm_source=search">
49	{__(
50	'Get 25+ more themes here',
51	'code-block-pro',
52	)}
53	</ExternalLink>
54	</div>
55	)}
56	</BaseControl>
57	) : priorityThemes?.length > 0 ? null : (
58	<div className="text-sm mb-4">
59	<ExternalLink href="https://github.com/KevinBatdorf/code-block-pro/discussions/168">
60	{__('Need both light and dark mode?', 'code-block-pro')}
61	</ExternalLink>
62	</div>
63	)}
64	{themesSorted.slice(0, 9).map((data) => (
65	<ThemeItem key={data.slug} {...data} {...props} />
66	))}
67	{props.search?.length > 0 ? null : (
68	<BaseControl id="add-on-themes">
69	{priorityThemes?.length > 0 ? null : (
70	<div className="font-semibold text-base">
71	<ExternalLink href="https://code-block-pro.com/themes?utm_campaign=notice&utm_source=mid-themes">
72	{__(
73	'Get 25+ more themes here',
74	'code-block-pro',
75	)}
76	</ExternalLink>
77	</div>
78	)}
79	</BaseControl>
80	)}
81	{themesSorted.slice(9).map((data) => (
82	<ThemeItem key={data.slug} {...data} {...props} />
83	))}
84	{props.search?.length > 0 ? null : (
85	<BaseControl id="add-on-themes">
86	{priorityThemes?.length > 0 ? null : (
87	<div className="font-semibold text-base">
88	<ExternalLink href="https://code-block-pro.com/themes?utm_campaign=notice&utm_source=below-themes">
89	{__(
90	'Get 25+ more themes here',
91	'code-block-pro',
92	)}
93	</ExternalLink>
94	</div>
95	)}
96	</BaseControl>
97	)}
98	</div>
99	);
100	};
101
102	const ThemeItem = ({
103	slug,
104	name,
105	theme,
106	language,
107	code,
108	fontSize,
109	lineHeight,
110	fontFamily,
111	clampFonts,
112	onClick,
113	styles,
114	helpUrl,
115	}: {
116	slug: string;
117	name: string;
118	styles?: CustomStyles;
119	helpUrl?: HelpUrl;
120	} & ThemeSelectProps) => (
121	<BaseControl
122	id={`code-block-pro-theme-${slug}`}
123	label={
124	theme === slug
125	? sprintf(__('%s (current)', 'code-block-pro'), name)
126	: name
127	}>
128	<>
129	<ThemePreview
130	id={`code-block-pro-theme-${slug}`}
131	theme={slug as Theme}
132	lang={language}
133	fontSize={fontSize}
134	lineHeight={lineHeight}
135	fontFamily={fontFamily}
136	clampFonts={clampFonts}
137	styles={styles}
138	onClick={() => {
139	onClick(slug as Theme);
140	}}
141	code={code}
142	/>
143	{helpUrl?.url ? (
144	<div className="mt-2">
145	<ExternalLink href={helpUrl.url}>
146	{helpUrl?.text \|\| __('Read more', 'code-block-pro')}
147	</ExternalLink>
148	</div>
149	) : null}
150	</>
151	</BaseControl>
152	);
153