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

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

127 lines 3.3 KB

Raw Download Zip

1	import { useEffect, useRef, useState } from '@wordpress/element';
2	import { decodeEntities } from '@wordpress/html-entities';
3	import { __ } from '@wordpress/i18n';
4	import type { Theme } from 'shiki';
5	import { useTheme } from '../../hooks/useTheme';
6	import type { CustomStyles, Lang } from '../../types';
7	import { fontFamilyLong, maybeClamp } from '../../util/fonts';
8
9	type ThemePreviewProps = {
10	id: string;
11	theme: Theme;
12	lang: Lang;
13	code: string;
14	fontSize: string;
15	lineHeight: string;
16	fontFamily: string;
17	clampFonts: boolean;
18	styles?: CustomStyles;
19	onClick: () => void;
20	};
21	export const ThemePreview = ({
22	id,
23	theme,
24	lang,
25	onClick,
26	code,
27	fontSize,
28	lineHeight,
29	fontFamily,
30	clampFonts,
31	styles,
32	}: ThemePreviewProps) => {
33	const [inView, setInView] = useState(false);
34	const { highlighter, error, loading } = useTheme({
35	theme,
36	// If no code is written yet, show a classic Carmack snippet
37	lang: code ? lang : 'c',
38	ready: inView,
39	});
40	const [codeRendered, setCode] = useState('');
41	const [backgroundColor, setBg] = useState('#ffffff');
42	const observer = useRef<IntersectionObserver>(
43	new IntersectionObserver(([entry]) => {
44	if (entry.isIntersecting) {
45	setInView(true);
46	observer.current.disconnect();
47	}
48	}),
49	);
50	const codeSnippet = `
51	float Q_rsqrt( float number )
52	{
53	long i;
54	float x2, y;
55	const float threehalfs = 1.5F;
56
57	x2 = number * 0.5F;
58	y = number;
59	i = * ( long * ) &y; // evil floating point bit level hacking
60	i = 0x5f3759df - ( i >> 1 ); // what the frack?
61	y = * ( float * ) &i;
62	y = y * ( threehalfs - ( x2 * y * y ) ); // 1st iteration
63	// y = y * ( threehalfs - ( x2 * y * y ) ); // 2nd iteration, this can be removed
64
65	return y;
66	}`.trim();
67
68	useEffect(() => {
69	if (!highlighter) return;
70	if ((lang as string) === 'ansi' && code) {
71	setCode(highlighter.ansiToHtml(code));
72	setBg(highlighter.getBackgroundColor());
73	return;
74	}
75	const hl = code
76	? highlighter.codeToHtml(decodeEntities(code), { lang })
77	: highlighter.codeToHtml(decodeEntities(codeSnippet), {
78	lang: 'c',
79	});
80	setCode(hl);
81	setBg(highlighter.getBackgroundColor());
82	}, [highlighter, lang, code, codeSnippet]);
83	return (
84	<button
85	id={id}
86	type="button"
87	onClick={onClick}
88	className="cbp-theme-preview p-4 px-3 border flex items-start w-full text-left outline-none cursor-pointer no-underline ring-offset-2 ring-offset-white focus:shadow-none focus:ring-wp overflow-x-auto max-h-80 overflow-y-hidden"
89	style={{
90	backgroundColor,
91	minHeight: '50px',
92	...Object.entries(styles ?? {}).reduce(
93	(acc, [key, value]) => ({
94	...acc,
95	[`--shiki-${key}`]: value,
96	}),
97	{},
98	),
99	}}
100	>
101	{loading \|\| error \|\| !inView ? (
102	<span
103	id={id}
104	ref={(el) => {
105	if (!el) return;
106	observer.current.observe(el);
107	}}
108	style={{ minHeight: '200px' }}
109	className="flex items-center justify-center p-6 w-full"
110	>
111	{error?.message \|\| __('Loading...', 'code-block-pro')}
112	</span>
113	) : (
114	<span
115	className="pointer-events-none"
116	style={{
117	fontSize: maybeClamp(fontSize, clampFonts),
118	fontFamily: fontFamilyLong(fontFamily),
119	lineHeight: maybeClamp(lineHeight, clampFonts),
120	}}
121	dangerouslySetInnerHTML={{ __html: codeRendered }}
122	/>
123	)}
124	</button>
125	);
126	};
127