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

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

147 lines 5.1 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	) : null}
58	{themesSorted.slice(0, 9).map((data) => (
59	<ThemeItem key={data.slug} {...data} {...props} />
60	))}
61	{props.search?.length > 0 ? null : (
62	<BaseControl id="add-on-themes">
63	{priorityThemes?.length > 0 ? null : (
64	<div className="font-semibold text-base">
65	<ExternalLink href="https://code-block-pro.com/themes?utm_campaign=notice&utm_source=mid-themes">
66	{__(
67	'Get 25+ more themes here',
68	'code-block-pro',
69	)}
70	</ExternalLink>
71	</div>
72	)}
73	</BaseControl>
74	)}
75	{themesSorted.slice(9).map((data) => (
76	<ThemeItem key={data.slug} {...data} {...props} />
77	))}
78	{props.search?.length > 0 ? null : (
79	<BaseControl id="add-on-themes">
80	{priorityThemes?.length > 0 ? null : (
81	<div className="font-semibold text-base">
82	<ExternalLink href="https://code-block-pro.com/themes?utm_campaign=notice&utm_source=below-themes">
83	{__(
84	'Get 25+ more themes here',
85	'code-block-pro',
86	)}
87	</ExternalLink>
88	</div>
89	)}
90	</BaseControl>
91	)}
92	</div>
93	);
94	};
95
96	const ThemeItem = ({
97	slug,
98	name,
99	theme,
100	language,
101	code,
102	fontSize,
103	lineHeight,
104	fontFamily,
105	clampFonts,
106	onClick,
107	styles,
108	helpUrl,
109	}: {
110	slug: string;
111	name: string;
112	styles?: CustomStyles;
113	helpUrl?: HelpUrl;
114	} & ThemeSelectProps) => (
115	<BaseControl
116	id={`code-block-pro-theme-${slug}`}
117	label={
118	theme === slug
119	? sprintf(__('%s (current)', 'code-block-pro'), name)
120	: name
121	}>
122	<>
123	<ThemePreview
124	id={`code-block-pro-theme-${slug}`}
125	theme={slug as Theme}
126	lang={language}
127	fontSize={fontSize}
128	lineHeight={lineHeight}
129	fontFamily={fontFamily}
130	clampFonts={clampFonts}
131	styles={styles}
132	onClick={() => {
133	onClick(slug as Theme);
134	}}
135	code={code}
136	/>
137	{helpUrl?.url ? (
138	<div className="mt-2">
139	<ExternalLink href={helpUrl.url}>
140	{helpUrl?.text \|\| __('Read more', 'code-block-pro')}
141	</ExternalLink>
142	</div>
143	) : null}
144	</>
145	</BaseControl>
146	);
147