← All changes | src/editor/components/ThemePreview.tsx +85 -98 trunk → 1.13.0 View file →

		@@ -1,54 +1,52 @@
1	1	import { useEffect, useRef, useState } from '@wordpress/element';
2	2	import { decodeEntities } from '@wordpress/html-entities';
3	3	import { __ } from '@wordpress/i18n';
4		-import type { Theme } from 'shiki';
	4	+import { Theme } from 'shiki';
5	5	import { useTheme } from '../../hooks/useTheme';
6		-import type { CustomStyles, Lang } from '../../types';
	6	+import { Lang } from '../../types';
7	7	import { fontFamilyLong, maybeClamp } from '../../util/fonts';
8	8
9	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;
	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	+ onClick: () => void;
20	19	};
21	20	export const ThemePreview = ({
22		- id,
23		- theme,
24		- lang,
25		- onClick,
26		- code,
27		- fontSize,
28		- lineHeight,
29		- fontFamily,
30		- clampFonts,
31		- styles,
	21	+ id,
	22	+ theme,
	23	+ lang,
	24	+ onClick,
	25	+ code,
	26	+ fontSize,
	27	+ lineHeight,
	28	+ fontFamily,
	29	+ clampFonts,
32	30	}: 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 = `
	31	+ const [inView, setInView] = useState(false);
	32	+ const { highlighter, error, loading } = useTheme({
	33	+ theme,
	34	+ // If no code is written yet, show a classic Carmack snippet
	35	+ lang: code ? lang : 'c',
	36	+ ready: inView,
	37	+ });
	38	+ const [codeRendered, setCode] = useState('');
	39	+ const [backgroundColor, setBg] = useState('#ffffff');
	40	+ const observer = useRef<IntersectionObserver>(
	41	+ new IntersectionObserver(([entry]) => {
	42	+ if (entry.isIntersecting) {
	43	+ setInView(true);
	44	+ observer.current.disconnect();
	45	+ }
	46	+ }),
	47	+ );
	48	+ const codeSnippet = `
51	49	float Q_rsqrt( float number )
52	50	{
53	51	long i;
54	52	float x2, y;
		@@ -64,63 +62,52 @@
64	62
65	63	return y;
66	64	}`.trim();
67	65
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		- );
	66	+ useEffect(() => {
	67	+ if (!highlighter) return;
	68	+ if ((lang as string) === 'ansi' && code) {
	69	+ setCode(highlighter.ansiToHtml(code));
	70	+ setBg(highlighter.getBackgroundColor());
	71	+ return;
	72	+ }
	73	+ const hl = code
	74	+ ? highlighter.codeToHtml(decodeEntities(code), { lang })
	75	+ : highlighter.codeToHtml(decodeEntities(codeSnippet), {
	76	+ lang: 'c',
	77	+ });
	78	+ setCode(hl);
	79	+ setBg(highlighter.getBackgroundColor());
	80	+ }, [highlighter, lang, code, codeSnippet]);
	81	+
	82	+ return (
	83	+ <button
	84	+ id={id}
	85	+ type="button"
	86	+ onClick={onClick}
	87	+ 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"
	88	+ style={{ backgroundColor, minHeight: '50px' }}>
	89	+ {loading || error || !inView ? (
	90	+ <span
	91	+ id={id}
	92	+ ref={(el) => {
	93	+ if (!el) return;
	94	+ observer.current.observe(el);
	95	+ }}
	96	+ style={{ minHeight: '200px' }}
	97	+ className="flex items-center justify-center p-6 w-full">
	98	+ {error?.message || __('Loading...', 'code-block-pro')}
	99	+ </span>
	100	+ ) : (
	101	+ <span
	102	+ className="pointer-events-none"
	103	+ style={{
	104	+ fontSize: maybeClamp(fontSize, clampFonts),
	105	+ fontFamily: fontFamilyLong(fontFamily),
	106	+ lineHeight: maybeClamp(lineHeight, clampFonts),
	107	+ }}
	108	+ dangerouslySetInnerHTML={{ __html: codeRendered }}
	109	+ />
	110	+ )}
	111	+ </button>
	112	+ );
126	113	};