diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index 3ee854e77..dd8a295cb 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/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>
-            <IconButton
-                tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
-                iconSize={70}
-                on:click={onHtmlEdit}
-                on:mount={createShortcut}
+            <WithState
+                key="htmledit"
+                update={(event) => { console.log(event); return true }}
+                let:state={active}
+                let:updateState
             >
-                {@html xmlIcon}
-            </IconButton>
+                <IconButton
+                    tooltip={appendInParentheses(tr.editingHtmlEditor(), shortcutLabel)}
+                    iconSize={70}
+                    {active}
+                    on:click={(event) => {
+                        toggleHtmlEdit();
+                        updateState(event);
+                    }}
+                    on:mount={createShortcut}
+                >
+                    {@html xmlIcon}
+                </IconButton>
+            </WithState>
         </WithShortcut>
     </ButtonGroupItem>
 </ButtonGroup>
diff --git a/ts/editor/codable.ts b/ts/editor/codable.ts
index c6337ff48..4c5bfdf68 100644
--- a/ts/editor/codable.ts
+++ b/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);
     }
 }
diff --git a/ts/editor/editable.scss b/ts/editor/editable.scss
index 00beb30c5..4d2ccba42 100644
--- a/ts/editor/editable.scss
+++ b/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;