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

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

124 lines 4.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 { Lang } 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 Record<string, { name: string; priority?: boolean }>;
28	const themesSorted = Object.entries(themes)
29	.filter(([slug]) => !hiddenThemes.includes(slug))
30	.filter(([slug]) => slug.includes(props.search.toLocaleLowerCase()))
31	.map(([slug, { name, priority }]) => ({ name, slug, priority }))
32	.sort((a, b) => (a.priority === b.priority ? 0 : a.priority ? -1 : 1));
33
34	const priorityThemes = getPriorityThemes();
35
36	return (
37	<div className="code-block-pro-editor">
38	{props.search?.length > 0 ? (
39	<BaseControl id="add-on-themes">
40	{priorityThemes?.length > 0 ? null : (
41	<div className="font-semibold text-base">
42	<ExternalLink href="https://code-block-pro.com/?utm_campaign=notice&utm_source=search">
43	{__(
44	'Get 25+ more themes here',
45	'code-block-pro',
46	)}
47	</ExternalLink>
48	</div>
49	)}
50	</BaseControl>
51	) : null}
52	{themesSorted.slice(0, 9).map(({ name, slug }) => (
53	<ThemeItem key={slug} slug={slug} name={name} {...props} />
54	))}
55	{props.search?.length > 0 ? null : (
56	<BaseControl id="add-on-themes">
57	{priorityThemes?.length > 0 ? null : (
58	<div className="font-semibold text-base">
59	<ExternalLink href="https://code-block-pro.com/themes?utm_campaign=notice&utm_source=mid-themes">
60	{__(
61	'Get 25+ more themes here',
62	'code-block-pro',
63	)}
64	</ExternalLink>
65	</div>
66	)}
67	</BaseControl>
68	)}
69	{themesSorted.slice(9).map(({ name, slug }) => (
70	<ThemeItem key={slug} slug={slug} name={name} {...props} />
71	))}
72	{props.search?.length > 0 ? null : (
73	<BaseControl id="add-on-themes">
74	{priorityThemes?.length > 0 ? null : (
75	<div className="font-semibold text-base">
76	<ExternalLink href="https://code-block-pro.com/themes?utm_campaign=notice&utm_source=below-themes">
77	{__(
78	'Get 25+ more themes here',
79	'code-block-pro',
80	)}
81	</ExternalLink>
82	</div>
83	)}
84	</BaseControl>
85	)}
86	</div>
87	);
88	};
89
90	const ThemeItem = ({
91	slug,
92	name,
93	theme,
94	language,
95	code,
96	fontSize,
97	lineHeight,
98	fontFamily,
99	clampFonts,
100	onClick,
101	}: { slug: string; name: string } & ThemeSelectProps) => (
102	<BaseControl
103	id={`code-block-pro-theme-${slug}`}
104	label={
105	theme === slug
106	? sprintf(__('%s (current)', 'code-block-pro'), name)
107	: name
108	}>
109	<ThemePreview
110	id={`code-block-pro-theme-${slug}`}
111	theme={slug as Theme}
112	lang={language}
113	fontSize={fontSize}
114	lineHeight={lineHeight}
115	fontFamily={fontFamily}
116	clampFonts={clampFonts}
117	onClick={() => {
118	onClick(slug as Theme);
119	}}
120	code={code}
121	/>
122	</BaseControl>
123	);
124