Make Codable correctly update the editable state and its button

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 { forEditorField } from ".";
+    import { forEditorField, getEditorField } from ".";
     import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
 
     export let api = {};
@@ -31,6 +31,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         bridgeCommand("record");
     }
 
+    function checkHtmlEdit() {
+        return getEditorField(0)!.editingArea.codable.active;
+    }
+
     function onHtmlEdit() {
         forEditorField([], (field) => {
             field.editingArea.toggleHtmlEdit();
@@ -170,10 +174,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithShortcut shortcut={"Control+Shift+X"} let:createShortcut let:shortcutLabel>
             <WithState
                 key="htmledit"
-                update={(event) => {
-                    console.log(event);
-                    return true;
-                }}
+                update={checkHtmlEdit}
                 let:state={active}
                 let:updateState
             >
@@ -186,6 +187,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         updateState(event);
                     }}
                     on:mount={createShortcut}
+                    disables={false}
                 >
                     {@html xmlIcon}
                 </IconButton>

ts/editor/codable.ts

@@ -10,8 +10,16 @@ const codeMirrorOptions = {
     theme: "monokai",
 };
 
+const parser = new DOMParser();
+
 export class Codable extends HTMLTextAreaElement {
-    codeMirror: any;
+    codeMirror: CodeMirror | undefined;
+    active: boolean;
+
+    constructor() {
+        super();
+        this.active = false;
+    }
 
     connectedCallback(): void {
         this.setAttribute("hidden", "");
@@ -22,15 +30,18 @@ export class Codable extends HTMLTextAreaElement {
     }
 
     setup(html: string): string {
-        this.innerHTML = html;
+        this.active = true;
+        this.value = html;
         this.codeMirror = CodeMirror.fromTextArea(this, codeMirrorOptions);
-        return html;
+        return "";
     }
 
     teardown(): string {
+        this.active = false;
         this.codeMirror.toTextArea();
         this.codeMirror = undefined;
-        console.log(this.innerHTML);
-        return this.innerHTML;
+
+        const doc = parser.parseFromString(this.value, "text/html");
+        return doc.documentElement.textContent!;
     }
 }

ts/editor/editingArea.ts

@@ -127,6 +127,11 @@ export class EditingArea extends HTMLDivElement {
     }
 
     toggleHtmlEdit(): void {
-        this.fieldHTML = this.codable.toggle(this.fieldHTML);
+        const output = this.codable.toggle(this.fieldHTML);
+        console.log("succ output", output, this.ord);
+        if (output) {
+            console.log("writo");
+            this.fieldHTML = output;
+        }
     }
 }