Connect HtmlEditButton to codable

ts/editor/TemplateButtons.svelte

@@ -13,10 +13,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import DropdownItem from "components/DropdownItem.svelte";
     import WithDropdownMenu from "components/WithDropdownMenu.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
+    import WithState from "components/WithState.svelte";
     import ClozeButton from "./ClozeButton.svelte";
 
     import { wrap } from "./wrap";
     import { appendInParentheses } from "./helpers";
+    import { toggleHtmlEdit } from "./codable";
     import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
 
     export let api = {};
@@ -28,10 +30,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function onRecord(): void {
         bridgeCommand("record");
     }
-
-    function onHtmlEdit(): void {
-        bridgeCommand("htmlEdit");
-    }
 </script>
 
 <ButtonGroup {api}>
@@ -164,14 +162,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <ButtonGroupItem>
         <WithShortcut shortcut={"Control+Shift+X"} let:createShortcut let:shortcutLabel>
+            <WithState
+                key="htmledit"
+                update={(event) => { console.log(event); return true }}
+                let:state={active}
+                let:updateState
+            >
                 <IconButton
                     tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
                     iconSize={70}
-                on:click={onHtmlEdit}
+                    {active}
+                    on:click={(event) => {
+                        toggleHtmlEdit();
+                        updateState(event);
+                    }}
                     on:mount={createShortcut}
                 >
                     {@html xmlIcon}
                 </IconButton>
+            </WithState>
         </WithShortcut>
     </ButtonGroupItem>
 </ButtonGroup>

ts/editor/codable.ts

@@ -3,8 +3,17 @@
 
 import CodeMirror from "codemirror/src/codemirror"
 
-export class Codable extends HTMLTextAreaElement {
-    connectedCallback(): void {
-        CodeMirror.fromTextArea(this);
+const codables: Codable[] = [];
+
+export function toggleHtmlEdit() {
+    for (const codable of codables) {
+        CodeMirror.fromTextArea(codable);
+    }
+}
+
+export class Codable extends HTMLTextAreaElement {
+    connectedCallback(): void {
+        this.setAttribute("hidden", "");
+        codables.push(this);
     }
 }

ts/editor/editable.scss

@@ -1,7 +1,7 @@
-@import 'ts/sass/codemirror/codemirror';
-
 @use 'ts/sass/scrollbar';
 
+@import 'ts/sass/codemirror/codemirror';
+
 anki-editable {
     display: block;
     overflow-wrap: break-word;