← All changes | src/editor/components/ThemePreview.tsx +44 -21 1.3.0 → 1.13.0 View file →

		@@ -1,8 +1,11 @@
1	1	import { useEffect, useRef, useState } from '@wordpress/element';
	2	+import { decodeEntities } from '@wordpress/html-entities';
2	3	import { __ } from '@wordpress/i18n';
3		-import { Lang, Theme } from 'shiki';
	4	+import { Theme } from 'shiki';
4	5	import { useTheme } from '../../hooks/useTheme';
	6	+import { Lang } from '../../types';
	7	+import { fontFamilyLong, maybeClamp } from '../../util/fonts';
5	8
6	9	type ThemePreviewProps = {
7	10	id: string;
8	11	theme: Theme;
		@@ -7,8 +10,12 @@
7	10	id: string;
8	11	theme: Theme;
9	12	lang: Lang;
10	13	code: string;
	14	+ fontSize: string;
	15	+ lineHeight: string;
	16	+ fontFamily: string;
	17	+ clampFonts: boolean;
11	18	onClick: () => void;
12	19	};
13	20	export const ThemePreview = ({
14	21	id,
		@@ -15,8 +22,12 @@
15	22	theme,
16	23	lang,
17	24	onClick,
18	25	code,
	26	+ fontSize,
	27	+ lineHeight,
	28	+ fontFamily,
	29	+ clampFonts,
19	30	}: ThemePreviewProps) => {
20	31	const [inView, setInView] = useState(false);
21	32	const { highlighter, error, loading } = useTheme({
22	33	theme,
		@@ -53,38 +64,50 @@
53	64	}`.trim();
54	65
55	66	useEffect(() => {
56	67	if (!highlighter) return;
	68	+ if ((lang as string) === 'ansi' && code) {
	69	+ setCode(highlighter.ansiToHtml(code));
	70	+ setBg(highlighter.getBackgroundColor());
	71	+ return;
	72	+ }
57	73	const hl = code
58		- ? highlighter.codeToHtml(code, { lang })
59		- : highlighter.codeToHtml(codeSnippet, { lang: 'c' });
	74	+ ? highlighter.codeToHtml(decodeEntities(code), { lang })
	75	+ : highlighter.codeToHtml(decodeEntities(codeSnippet), {
	76	+ lang: 'c',
	77	+ });
60	78	setCode(hl);
61	79	setBg(highlighter.getBackgroundColor());
62	80	}, [highlighter, lang, code, codeSnippet]);
63	81
64		- if (loading || error || !inView) {
65		- return (
66		- <div
67		- ref={(el) => {
68		- if (!el) return;
69		- observer.current.observe(el);
70		- }}
71		- style={{ minHeight: '200px' }}
72		- className="flex items-center justify-center p-6 bg-gray-50">
73		- {error?.message || __('Loading...', 'code-block-pro')}
74		- </div>
75		- );
76		- }
77	82	return (
78	83	<button
79	84	id={id}
80	85	type="button"
81	86	onClick={onClick}
82		- className="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-scroll"
	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"
83	88	style={{ backgroundColor, minHeight: '50px' }}>
84		- <span
85		- className="pointer-events-none"
86		- dangerouslySetInnerHTML={{ __html: codeRendered }}
87		- />
	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	+ )}
88	111	</button>
89	112	);
90	113	};