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

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

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