Move enabled/disabled logic to EditorToolbar

ts/editor-toolbar/EditorToolbar.svelte

@@ -1,3 +1,17 @@
+<script context="module" lang="typescript">
+    import { writable } from "svelte/store";
+
+    const disabled = writable(false);
+
+    export function enableButtons(): void {
+        disabled.set(false);
+    }
+
+    export function disableButtons(): void {
+        disabled.set(true);
+    }
+</script>
+
 <script lang="typescript">
     import type { SvelteComponent } from "svelte";
     import type { Readable } from "svelte/store";
@@ -9,7 +23,6 @@
 
     export let buttons: Readable<Buttons>;
     export let menus: Readable<SvelteComponent[]>;
-    export let disabled: Readable<boolean>;
 
     $: _buttons = $buttons;
     $: _menus = $menus;

ts/editor-toolbar/index.ts

@@ -11,8 +11,9 @@ import { formatButtons } from "./format";
 import { colorButtons } from "./color";
 import { templateButtons, templateMenus } from "./template";
 
-// @ts-ignore
+// @ts-expect-error
 export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.svelte";
+export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
 
 const defaultButtons = [notetypeButtons, formatButtons, colorButtons, templateButtons];
 const defaultMenus = [...templateMenus];
@@ -22,7 +23,6 @@ class EditorToolbar extends HTMLElement {
 
     buttons = writable(defaultButtons);
     menus = writable(defaultMenus);
-    disabled? = writable(false);
 
     connectedCallback(): void {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
@@ -31,20 +31,11 @@ class EditorToolbar extends HTMLElement {
                 props: {
                     buttons: this.buttons,
                     menus: this.menus,
-                    disabled: this.disabled,
                     nightMode: checkNightMode(),
                 },
             });
         });
     }
-
-    enableButtons(): void {
-        this.disabled!.set(false);
-    }
-
-    disableButtons(): void {
-        this.disabled!.set(true);
-    }
 }
 
 customElements.define("anki-editor-toolbar", EditorToolbar);

ts/editor/editingArea.ts

@@ -59,7 +59,7 @@ export class EditingArea extends HTMLDivElement {
         this.addEventListener("paste", onPaste);
         this.addEventListener("copy", onCutOrCopy);
         this.addEventListener("oncut", onCutOrCopy);
-        // @ts-ignore
+        // @ts-expect-error
         this.addEventListener("mouseup", editorToolbar.updateActiveButtons);
 
         const baseStyleSheet = this.baseStyle.sheet as CSSStyleSheet;
@@ -75,7 +75,7 @@ export class EditingArea extends HTMLDivElement {
         this.removeEventListener("paste", onPaste);
         this.removeEventListener("copy", onCutOrCopy);
         this.removeEventListener("oncut", onCutOrCopy);
-        // @ts-ignore
+        // @ts-expect-error
         this.removeEventListener("mouseup", editorToolbar.updateActiveButtons);
     }
 

ts/editor/focusHandlers.ts

@@ -10,8 +10,8 @@ export function onFocus(evt: FocusEvent): void {
     const currentField = evt.currentTarget as EditingArea;
     currentField.focusEditable();
     bridgeCommand(`focus:${currentField.ord}`);
-    // @ts-ignore
-    document.getElementById("editorToolbar").enableButtons();
+    // @ts-expect-error
+    editorToolbar.enableButtons();
 }
 
 export function onBlur(evt: FocusEvent): void {
@@ -19,6 +19,6 @@ export function onBlur(evt: FocusEvent): void {
     const currentFieldUnchanged = previousFocus === document.activeElement;
 
     saveField(previousFocus, currentFieldUnchanged ? "key" : "blur");
-    // @ts-ignore
-    document.getElementById("editorToolbar").disableButtons();
+    // @ts-expect-error
+    editorToolbar.disableButtons();
 }

ts/editor/index.ts

@@ -41,7 +41,7 @@ export function focusField(n: number): void {
     if (field) {
         field.editingArea.focusEditable();
         caretToEnd(field.editingArea);
-        // @ts-ignore
+        // @ts-expect-error
         editorToolbar.updateActiveButtons();
     }
 }
@@ -122,8 +122,8 @@ export function setFields(fields: [string, string][]): void {
 
     if (!getCurrentField()) {
         // when initial focus of the window is not on editor (e.g. browser)
-        // @ts-ignore
-        document.getElementById("editorToolbar").disableButtons();
+        // @ts-expect-error
+        editorToolbar.disableButtons();
     }
 }
 
@@ -158,7 +158,7 @@ export function setFormat(cmd: string, arg?: any, nosave: boolean = false): void
     document.execCommand(cmd, false, arg);
     if (!nosave) {
         saveField(getCurrentField() as EditingArea, "key");
-        // @ts-ignore
+        // @ts-expect-error
         editorToolbar.updateActiveButtons();
     }
 }