← All changes | src/editor/Edit.tsx +80 -26 1.9.1 → 1.13.0 View file →

		@@ -3,16 +3,20 @@
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';
	10	+import { sprintf, __ } from '@wordpress/i18n';
8	11	import { colord } from 'colord';
9	12	import Editor from 'react-simple-code-editor';
10	13	import { useDefaults } from '../hooks/useDefaults';
11	14	import { useTheme } from '../hooks/useTheme';
12	15	import { useLanguageStore } from '../state/language';
13		-import { AttributesPropsAndSetter } from '../types';
	16	+import { AttributesPropsAndSetter, Lang } from '../types';
14	17	import { parseJSONArrayWithRanges } from '../util/arrayHelpers';
	18	+import { getEditorLanguage } from '../util/languages';
15	19
16	20	export const Edit = ({
17	21	attributes,
18	22	setAttributes,
		@@ -34,12 +38,17 @@
34	38	lineBlurs,
35	39	lineHighlights,
36	40	enableBlurring,
37	41	enableHighlighting,
	42	+ seeMoreAfterLine,
	43	+ seeMoreTransition,
	44	+ enableMaxHeight,
	45	+ editorHeight,
38	46	} = attributes;
39	47
40	48	const textAreaRef = useRef<HTMLDivElement>(null);
41		- const handleChange = (code: string) => setAttributes({ code });
	49	+ const handleChange = (code: string) =>
	50	+ setAttributes({ code: escapeHTML(code) });
42	51	const { previousLanguage } = useLanguageStore();
43	52	const { highlighter, error, loading } = useTheme({
44	53	theme,
45	54	lang: language ?? previousLanguage,
		@@ -75,26 +84,45 @@
75	84	}, [theme, highlighter, setAttributes]);
76	85
77	86	useEffect(() => {
78	87	if (!highlighter) return;
79		- setAttributes({
80		- codeHTML: applyFilters(
81		- 'blocks.codeBlockPro.codeHTML',
82		- highlighter.codeToHtml(code, {
83		- lang: language ?? previousLanguage,
84		- lineOptions: [...getHighlights(), ...getBlurs()],
85		- }),
86		- attributes,
87		- ) as string,
88		- lineHighlightColor: colord(color)
89		- .saturate(0.5)
90		- .alpha(0.2)
91		- .toRgbString(),
92		- });
	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 });
93	118	}, [
94	119	highlighter,
	120	+ seeMoreAfterLine,
	121	+ seeMoreTransition,
95	122	color,
96	123	code,
	124	+ enableMaxHeight,
97	125	language,
98	126	setAttributes,
99	127	previousLanguage,
100	128	attributes,
		@@ -140,12 +168,28 @@
140	168	fontFamily,
141	169	lineHeight,
142	170	]);
143	171
	172	+ if (!loading && !highlighter) {
	173	+ return (
	174	+ <div
	175	+ className="p-8 px-4 text-left"
	176	+ style={{ backgroundColor, color }}>
	177	+ {sprintf(
	178	+ __(
	179	+ 'Theme %s not found. Please select a different theme.',
	180	+ 'code-block-pro',
	181	+ ),
	182	+ theme,
	183	+ )}
	184	+ </div>
	185	+ );
	186	+ }
	187	+
144	188	if ((loading && code) || error) {
145	189	return (
146	190	<div
147		- className="p-8 px-4 text-left"
	191	+ className="p-6 px-4 text-left"
148	192	style={{ backgroundColor, color }}>
149	193	{error?.message ?? ''}
150	194	</div>
151	195	);
		@@ -151,20 +195,28 @@
151	195	);
152	196	}
153	197
154	198	return (
155		- <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	+ }}>
156	207	<Editor
157		- value={code}
	208	+ value={decodeEntities(code)}
158	209	onValueChange={handleChange}
159	210	padding={{
160	211	top: disablePadding ? 0 : 16,
161	212	bottom: disablePadding || hasFooter ? 0 : 16,
162		- left:
163		- (disablePadding && !lineNumbersWidth ? 0 : 16) +
164		- // If line numbers are disabled, just offset the 12px padding
165		- (lineNumbersWidth ?? -12) +
166		- 12,
	213	+ left: (() => {
	214	+ if (!lineNumbers && disablePadding) return 0;
	215	+ if (!lineNumbers) return 16;
	216	+ if (disablePadding) return (lineNumbersWidth ?? 0) + 16;
	217	+ return (lineNumbersWidth ?? 0) + 32;
	218	+ })(),
167	219	right: 0,
168	220	}}
169	221	style={{ backgroundColor, color }}
170	222	// eslint-disable-next-line
		@@ -174,10 +226,12 @@
174	226	textAreaRef.current?.querySelector('textarea')?.focus()
175	227	}
176	228	highlight={(code: string) =>
177	229	highlighter
178		- ?.codeToHtml(code, {
179		- lang: language ?? previousLanguage,
	230	+ ?.codeToHtml(decodeEntities(code), {
	231	+ lang: getEditorLanguage(
	232	+ language ?? previousLanguage,
	233	+ ),
180	234	lineOptions: [...getHighlights(), ...getBlurs()],
181	235	})
182	236	?.replace(/<\/?[pre|code][^>]*>/g, '')
183	237	}