← All changes | src/editor/components/ThemePreview.tsx +28 -5 1.4.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,11 +64,18 @@
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
		@@ -65,9 +83,9 @@
65	83	<button
66	84	id={id}
67	85	type="button"
68	86	onClick={onClick}
69		- 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"
70	88	style={{ backgroundColor, minHeight: '50px' }}>
71	89	{loading || error || !inView ? (
72	90	<span
73	91	id={id}
		@@ -75,14 +93,19 @@
75	93	if (!el) return;
76	94	observer.current.observe(el);
77	95	}}
78	96	style={{ minHeight: '200px' }}
79		- className="flex items-center justify-center p-6 bg-gray-50">
	97	+ className="flex items-center justify-center p-6 w-full">
80	98	{error?.message || __('Loading...', 'code-block-pro')}
81	99	</span>
82	100	) : (
83	101	<span
84	102	className="pointer-events-none"
	103	+ style={{
	104	+ fontSize: maybeClamp(fontSize, clampFonts),
	105	+ fontFamily: fontFamilyLong(fontFamily),
	106	+ lineHeight: maybeClamp(lineHeight, clampFonts),
	107	+ }}
85	108	dangerouslySetInnerHTML={{ __html: codeRendered }}
86	109	/>
87	110	)}
88	111	</button>