Setup toggleHtmlEdit on editingArea

ts/editor/TemplateButtons.svelte

@@ -18,7 +18,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import { wrap } from "./wrap";
     import { appendInParentheses } from "./helpers";
-    import { toggleHtmlEdit } from "./codable";
+    import { forEditorField } from ".";
     import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
 
     export let api = {};
@@ -30,6 +30,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function onRecord(): void {
         bridgeCommand("record");
     }
+
+    function onHtmlEdit() {
+        forEditorField([], (field) => {
+            field.editingArea.toggleHtmlEdit();
+        })
+    }
 </script>
 
 <ButtonGroup {api}>
@@ -173,7 +179,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     iconSize={70}
                     {active}
                     on:click={(event) => {
-                        toggleHtmlEdit();
+                        onHtmlEdit();
                         updateState(event);
                     }}
                     on:mount={createShortcut}

ts/editor/codable.ts

@@ -3,17 +3,32 @@
 
 import CodeMirror from "codemirror/src/codemirror"
 
-const codables: Codable[] = [];
-
-export function toggleHtmlEdit() {
-    for (const codable of codables) {
-        CodeMirror.fromTextArea(codable);
-    }
+const codeMirrorOptions = {
+    lineNumbers: true,
+    mode: "htmlmixed",
 }
 
 export class Codable extends HTMLTextAreaElement {
+    codeMirror: any;
+
     connectedCallback(): void {
         this.setAttribute("hidden", "");
-        codables.push(this);
+    }
+
+    toggle(html: string): string {
+        return this.codeMirror ?  this.teardown() : this.setup(html);
+    }
+
+    setup(html: string): string {
+        this.innerHTML = html;
+        this.codeMirror = CodeMirror.fromTextArea(this, codeMirrorOptions);
+        return html;
+    }
+
+    teardown(): string {
+        this.codeMirror.toTextArea();
+        this.codeMirror = undefined;
+        console.log(this.innerHTML)
+        return this.innerHTML;
     }
 }

ts/editor/editingArea.ts

@@ -123,4 +123,8 @@ export class EditingArea extends HTMLDivElement {
     blurEditable(): void {
         this.editable.blur();
     }
+
+    toggleHtmlEdit(): void {
+        this.fieldHTML = this.codable.toggle(this.fieldHTML);
+    }
 }