← All changes | src/editor/components/ThemePreview.tsx +20 -9 1.5.1 → 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;
		@@ -10,8 +13,9 @@
10	13	code: string;
11	14	fontSize: string;
12	15	lineHeight: string;
13	16	fontFamily: string;
	17	+ clampFonts: boolean;
14	18	onClick: () => void;
15	19	};
16	20	export const ThemePreview = ({
17	21	id,
		@@ -21,8 +25,9 @@
21	25	code,
22	26	fontSize,
23	27	lineHeight,
24	28	fontFamily,
	29	+ clampFonts,
25	30	}: ThemePreviewProps) => {
26	31	const [inView, setInView] = useState(false);
27	32	const { highlighter, error, loading } = useTheme({
28	33	theme,
		@@ -59,11 +64,18 @@
59	64	}`.trim();
60	65
61	66	useEffect(() => {
62	67	if (!highlighter) return;
	68	+ if ((lang as string) === 'ansi' && code) {
	69	+ setCode(highlighter.ansiToHtml(code));
	70	+ setBg(highlighter.getBackgroundColor());
	71	+ return;
	72	+ }
63	73	const hl = code
64		- ? highlighter.codeToHtml(code, { lang })
65		- : highlighter.codeToHtml(codeSnippet, { lang: 'c' });
	74	+ ? highlighter.codeToHtml(decodeEntities(code), { lang })
	75	+ : highlighter.codeToHtml(decodeEntities(codeSnippet), {
	76	+ lang: 'c',
	77	+ });
66	78	setCode(hl);
67	79	setBg(highlighter.getBackgroundColor());
68	80	}, [highlighter, lang, code, codeSnippet]);
69	81
		@@ -71,9 +83,9 @@
71	83	<button
72	84	id={id}
73	85	type="button"
74	86	onClick={onClick}
75		- 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"
76	88	style={{ backgroundColor, minHeight: '50px' }}>
77	89	{loading || error || !inView ? (
78	90	<span
79	91	id={id}
		@@ -81,9 +93,9 @@
81	93	if (!el) return;
82	94	observer.current.observe(el);
83	95	}}
84	96	style={{ minHeight: '200px' }}
85		- className="flex items-center justify-center p-6 bg-gray-50">
	97	+ className="flex items-center justify-center p-6 w-full">
86	98	{error?.message || __('Loading...', 'code-block-pro')}
87	99	</span>
88	100	) : (
89	101	<span
		@@ -88,12 +100,11 @@
88	100	) : (
89	101	<span
90	102	className="pointer-events-none"
91	103	style={{
92		- fontSize: fontSize,
93		- // Tiny check to avoid block invalidation error
94		- fontFamily: fontFamily,
95		- lineHeight: lineHeight,
	104	+ fontSize: maybeClamp(fontSize, clampFonts),
	105	+ fontFamily: fontFamilyLong(fontFamily),
	106	+ lineHeight: maybeClamp(lineHeight, clampFonts),
96	107	}}
97	108	dangerouslySetInnerHTML={{ __html: codeRendered }}
98	109	/>
99	110	)}