← All changes | src/editor/components/ThemePreview.tsx +3 -14 1.27.3 → 1.13.0 View file →

		@@ -2,9 +2,9 @@
2	2	import { decodeEntities } from '@wordpress/html-entities';
3	3	import { __ } from '@wordpress/i18n';
4	4	import { Theme } from 'shiki';
5	5	import { useTheme } from '../../hooks/useTheme';
6		-import { CustomStyles, Lang } from '../../types';
	6	+import { Lang } from '../../types';
7	7	import { fontFamilyLong, maybeClamp } from '../../util/fonts';
8	8
9	9	type ThemePreviewProps = {
10	10	id: string;
		@@ -14,9 +14,8 @@
14	14	fontSize: string;
15	15	lineHeight: string;
16	16	fontFamily: string;
17	17	clampFonts: boolean;
18		- styles?: CustomStyles;
19	18	onClick: () => void;
20	19	};
21	20	export const ThemePreview = ({
22	21	id,
		@@ -27,9 +26,8 @@
27	26	fontSize,
28	27	lineHeight,
29	28	fontFamily,
30	29	clampFonts,
31		- styles,
32	30	}: ThemePreviewProps) => {
33	31	const [inView, setInView] = useState(false);
34	32	const { highlighter, error, loading } = useTheme({
35	33	theme,
		@@ -79,8 +77,9 @@
79	77	});
80	78	setCode(hl);
81	79	setBg(highlighter.getBackgroundColor());
82	80	}, [highlighter, lang, code, codeSnippet]);
	81	+
83	82	return (
84	83	<button
85	84	id={id}
86	85	type="button"
		@@ -85,19 +84,9 @@
85	84	id={id}
86	85	type="button"
87	86	onClick={onClick}
88	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"
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		- }}>
	88	+ style={{ backgroundColor, minHeight: '50px' }}>
100	89	{loading || error || !inView ? (
101	90	<span
102	91	id={id}
103	92	ref={(el) => {