fix: Escape HTML when initializing the editor.

Author: thet

README.md

@@ -5,6 +5,28 @@
 This is code editor pattern based on CodeJar and PrismJS.
 
 
+---
+
+**Note:**
+
+When prefilling the textarea, please add HTML escaped content to the template to avoid any XSS security issues or nesting errors with existing HTML.
+
+Example to escape content in Python:
+
+    import html
+    escaped_html = html.escape(unescaped_html)
+
+
+Example to escape content in JavaScript:
+
+    const escaped_html = unescaped_html
+        .replaceAll("&", "&")
+        .replaceAll("&lt;", "<")
+        .replaceAll("&gt;", ">")
+        .replaceAll("&quot;", '"');
+
+---
+
 ### Options reference
 
 | Property       | Default Value | Type              | Description                   |

src/code-editor.js

@@ -1,6 +1,7 @@
 import "regenerator-runtime/runtime"; // needed for ``await`` support
 import Base from "@patternslib/patternslib/src/core/base";
 import Parser from "@patternslib/patternslib/src/core/parser";
+import utils from "@patternslib/patternslib/src/core/utils";
 
 export const parser = new Parser("code-editor");
 parser.addArgument("language", null); // programming language to use.
@@ -35,9 +36,17 @@ export default Base.extend({
 
         let el = this.el;
         if (["textarea", "input"].includes(this.el.nodeName.toLowerCase())) {
-            el = document.createElement("pre");
-            el.innerHTML = `<code contenteditable>${this.el.value}</code>`;
-            this.el.parentNode.insertBefore(el, this.el);
+            const unescaped_html = utils.unescape_html(this.el.value);
+            const language_class = this.options.language
+                ? `language-${this.options.language}`
+                : "";
+            const pre_el = document.createElement("pre");
+            el = document.createElement("code");
+            el.setAttribute("class", language_class);
+            el.setAttribute("contenteditable", "");
+            el.textContent = unescaped_html;
+            pre_el.append(el);
+            this.el.parentNode.insertBefore(pre_el, this.el);
             this.el.setAttribute("hidden", "");
         }
 

src/code-editor.test.js

@@ -19,4 +19,26 @@ describe("pat-code-editor", () => {
         expect(document.querySelectorAll("pre code").length).toBe(1);
         expect(document.querySelector("textarea").getAttribute("hidden")).toBe("");
     });
+
+    it("handles escaped content correctly", async () => {
+        const unescaped = `<hello attribute="value">this & that</hello>`;
+        const escaped = `&lt;hello attribute=&quot;value&quot;&gt;this &amp; that&lt;/hello&gt;`;
+
+        document.body.innerHTML = `
+            <textarea
+                class="pat-code-editor"
+                data-pat-code-editor="language: javascript">
+                ${escaped}
+            </textarea>
+        `;
+
+        new Pattern(document.querySelector(".pat-code-editor"));
+        await utils.timeout(1);
+
+        const editor_el = document.querySelector("pre code");
+        expect(editor_el.textContent.trim()).toBe(unescaped);
+
+        expect(editor_el.querySelectorAll(".token").length).toBeGreaterThan(0);
+        expect(editor_el.innerHTML.includes("&lt;")).toBe(true);
+    });
 });