← All changes | src/editor/Edit.tsx +57 -21 1.11.1 → 1.13.0 View file →

		@@ -3,9 +3,11 @@
3	3	useEffect,
4	4	useLayoutEffect,
5	5	useRef,
6	6	} from '@wordpress/element';
	7	+import { escapeHTML } from '@wordpress/escape-html';
7	8	import { applyFilters } from '@wordpress/hooks';
	9	+import { decodeEntities } from '@wordpress/html-entities';
8	10	import { sprintf, __ } from '@wordpress/i18n';
9	11	import { colord } from 'colord';
10	12	import Editor from 'react-simple-code-editor';
11	13	import { useDefaults } from '../hooks/useDefaults';
		@@ -10,10 +12,11 @@
10	12	import Editor from 'react-simple-code-editor';
11	13	import { useDefaults } from '../hooks/useDefaults';
12	14	import { useTheme } from '../hooks/useTheme';
13	15	import { useLanguageStore } from '../state/language';
14		-import { AttributesPropsAndSetter } from '../types';
	16	+import { AttributesPropsAndSetter, Lang } from '../types';
15	17	import { parseJSONArrayWithRanges } from '../util/arrayHelpers';
	18	+import { getEditorLanguage } from '../util/languages';
16	19
17	20	export const Edit = ({
18	21	attributes,
19	22	setAttributes,
		@@ -35,12 +38,17 @@
35	38	lineBlurs,
36	39	lineHighlights,
37	40	enableBlurring,
38	41	enableHighlighting,
	42	+ seeMoreAfterLine,
	43	+ seeMoreTransition,
	44	+ enableMaxHeight,
	45	+ editorHeight,
39	46	} = attributes;
40	47
41	48	const textAreaRef = useRef<HTMLDivElement>(null);
42		- const handleChange = (code: string) => setAttributes({ code });
	49	+ const handleChange = (code: string) =>
	50	+ setAttributes({ code: escapeHTML(code) });
43	51	const { previousLanguage } = useLanguageStore();
44	52	const { highlighter, error, loading } = useTheme({
45	53	theme,
46	54	lang: language ?? previousLanguage,
		@@ -76,26 +84,45 @@
76	84	}, [theme, highlighter, setAttributes]);
77	85
78	86	useEffect(() => {
79	87	if (!highlighter) return;
80		- setAttributes({
81		- codeHTML: applyFilters(
82		- 'blocks.codeBlockPro.codeHTML',
83		- highlighter.codeToHtml(code, {
84		- lang: language ?? previousLanguage,
85		- lineOptions: [...getHighlights(), ...getBlurs()],
86		- }),
87		- attributes,
88		- ) as string,
89		- lineHighlightColor: colord(color)
90		- .saturate(0.5)
91		- .alpha(0.2)
92		- .toRgbString(),
93		- });
	88	+ const l = (language ?? previousLanguage) as Lang | 'ansi';
	89	+ const lang = getEditorLanguage(l);
	90	+ const c = decodeEntities(code);
	91	+ const lineOptions = [
	92	+ ...getHighlights(),
	93	+ ...getBlurs(),
	94	+ enableMaxHeight && !Number.isNaN(seeMoreAfterLine)
	95	+ ? {
	96	+ line: Number(seeMoreAfterLine),
	97	+ classes: [
	98	+ 'cbp-see-more-line',
	99	+ seeMoreTransition ? 'cbp-see-more-transition' : '',
	100	+ ],
	101	+ }
	102	+ : {},
	103	+ ];
	104	+ const rendered =
	105	+ l === 'ansi'
	106	+ ? highlighter.ansiToHtml(c, { lineOptions })
	107	+ : highlighter.codeToHtml(c, { lang, lineOptions });
	108	+ const codeHTML = applyFilters(
	109	+ 'blocks.codeBlockPro.codeHTML',
	110	+ rendered,
	111	+ attributes,
	112	+ ) as string;
	113	+ const lineHighlightColor = colord(color)
	114	+ .saturate(0.5)
	115	+ .alpha(0.2)
	116	+ .toRgbString();
	117	+ setAttributes({ codeHTML, lineHighlightColor });
94	118	}, [
95	119	highlighter,
	120	+ seeMoreAfterLine,
	121	+ seeMoreTransition,
96	122	color,
97	123	code,
	124	+ enableMaxHeight,
98	125	language,
99	126	setAttributes,
100	127	previousLanguage,
101	128	attributes,
		@@ -160,9 +187,9 @@
160	187
161	188	if ((loading && code) || error) {
162	189	return (
163	190	<div
164		- className="p-8 px-4 text-left"
	191	+ className="p-6 px-4 text-left"
165	192	style={{ backgroundColor, color }}>
166	193	{error?.message ?? ''}
167	194	</div>
168	195	);
		@@ -168,11 +195,18 @@
168	195	);
169	196	}
170	197
171	198	return (
172		- <div ref={textAreaRef}>
	199	+ <div
	200	+ ref={textAreaRef}
	201	+ style={{
	202	+ maxHeight: Number(editorHeight)
	203	+ ? Number(editorHeight)
	204	+ : undefined,
	205	+ overflow: Number(editorHeight) ? 'auto' : undefined,
	206	+ }}>
173	207	<Editor
174		- value={code}
	208	+ value={decodeEntities(code)}
175	209	onValueChange={handleChange}
176	210	padding={{
177	211	top: disablePadding ? 0 : 16,
178	212	bottom: disablePadding || hasFooter ? 0 : 16,
		@@ -192,10 +226,12 @@
192	226	textAreaRef.current?.querySelector('textarea')?.focus()
193	227	}
194	228	highlight={(code: string) =>
195	229	highlighter
196		- ?.codeToHtml(code, {
197		- lang: language ?? previousLanguage,
	230	+ ?.codeToHtml(decodeEntities(code), {
	231	+ lang: getEditorLanguage(
	232	+ language ?? previousLanguage,
	233	+ ),
198	234	lineOptions: [...getHighlights(), ...getBlurs()],
199	235	})
200	236	?.replace(/<\/?[pre|code][^>]*>/g, '')
201	237	}