From 28201670ee74b9041addfa10fc82c071e3e70b4c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 7 Apr 2021 23:53:09 +0200
Subject: [PATCH] Move enabled/disabled logic to EditorToolbar

---
 ts/editor-toolbar/EditorToolbar.svelte | 15 ++++++++++++++-
 ts/editor-toolbar/index.ts             | 13 ++-----------
 ts/editor/editingArea.ts               |  4 ++--
 ts/editor/focusHandlers.ts             |  8 ++++----
 ts/editor/index.ts                     |  8 ++++----
 5 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 3ff55c944..7bc13d7e6 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/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;
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index ac6a52218..8fec39b42 100644
--- a/ts/editor-toolbar/index.ts
+++ b/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);
diff --git a/ts/editor/editingArea.ts b/ts/editor/editingArea.ts
index f0ccc0453..e522bb8ef 100644
--- a/ts/editor/editingArea.ts
+++ b/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);
     }
 
diff --git a/ts/editor/focusHandlers.ts b/ts/editor/focusHandlers.ts
index d377740a6..fb9f44b8c 100644
--- a/ts/editor/focusHandlers.ts
+++ b/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();
 }
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index d07fca635..c7e2121b8 100644
--- a/ts/editor/index.ts
+++ b/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();
     }
 }