Merge pull request #106 from KevinBatdorf/add-html-escape-fn

Escape and decode html

package.json

@@ -50,7 +50,9 @@
         "@wordpress/block-editor": "11.1.0",
         "@wordpress/blocks": "12.1.0",
         "@wordpress/element": "5.1.0",
+        "@wordpress/escape-html": "^2.24.0",
         "@wordpress/hooks": "3.24.0",
+        "@wordpress/html-entities": "^3.24.0",
         "@wordpress/i18n": "4.24.0",
         "copy-to-clipboard": "3.3.3",
         "react-simple-code-editor": "0.13.1",

readme.txt

@@ -238,6 +238,8 @@ Themes are rendered inside the editor as you type or make changes, so the code b
 
 == Changelog ==
 
+- Fix: encode and deocde html entities
+
 = 1.11.2 - 2023-01-04 =
 - Fix: Update shiki renderer wasm loader to use ArrayBuffer
 - Tweak: Expose init function as global to allow late init

src/editor/Edit.tsx

@@ -4,7 +4,9 @@ import {
     useLayoutEffect,
     useRef,
 } from '@wordpress/element';
+import { escapeHTML } from '@wordpress/escape-html';
 import { applyFilters } from '@wordpress/hooks';
+import { decodeEntities } from '@wordpress/html-entities';
 import { sprintf, __ } from '@wordpress/i18n';
 import { colord } from 'colord';
 import Editor from 'react-simple-code-editor';
@@ -39,7 +41,8 @@ export const Edit = ({
     } = attributes;
 
     const textAreaRef = useRef<HTMLDivElement>(null);
-    const handleChange = (code: string) => setAttributes({ code });
+    const handleChange = (code: string) =>
+        setAttributes({ code: escapeHTML(code) });
     const { previousLanguage } = useLanguageStore();
     const { highlighter, error, loading } = useTheme({
         theme,
@@ -80,7 +83,7 @@ export const Edit = ({
         setAttributes({
             codeHTML: applyFilters(
                 'blocks.codeBlockPro.codeHTML',
-                highlighter.codeToHtml(code, {
+                highlighter.codeToHtml(decodeEntities(code), {
                     lang: language ?? previousLanguage,
                     lineOptions: [...getHighlights(), ...getBlurs()],
                 }),
@@ -171,7 +174,7 @@ export const Edit = ({
     return (
         <div ref={textAreaRef}>
             <Editor
-                value={code}
+                value={decodeEntities(code)}
                 onValueChange={handleChange}
                 padding={{
                     top: disablePadding ? 0 : 16,
@@ -193,7 +196,7 @@ export const Edit = ({
                 }
                 highlight={(code: string) =>
                     highlighter
-                        ?.codeToHtml(code, {
+                        ?.codeToHtml(decodeEntities(code), {
                             lang: language ?? previousLanguage,
                             lineOptions: [...getHighlights(), ...getBlurs()],
                         })