From adfe6597a59658564e6f2d757e39d0e6df4a63da Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 5 Jul 2021 18:15:03 +0200
Subject: [PATCH] disabledKey => fieldFocusedKey

---
 ts/components/IconButton.svelte   |  1 -
 ts/components/LabelButton.svelte  | 10 +++-------
 ts/components/SelectButton.svelte | 10 +++-------
 ts/components/context-keys.ts     |  1 -
 ts/editor/ClozeButton.svelte      | 26 +++++++++++---------------
 ts/editor/NoteTypeButtons.svelte  |  2 --
 ts/editor/OnlyEditable.svelte     |  7 +++----
 ts/editor/PreviewButton.svelte    |  1 -
 ts/editor/TemplateButtons.svelte  | 27 ++++++++++++---------------
 ts/editor/codable.ts              |  4 ++--
 ts/editor/context-keys.ts         |  1 +
 ts/editor/editable.ts             |  4 ++--
 ts/editor/focus-handlers.ts       |  6 +++---
 ts/editor/index.ts                |  6 +++---
 ts/editor/toolbar.ts              | 26 +++++---------------------
 15 files changed, 48 insertions(+), 84 deletions(-)

diff --git a/ts/components/IconButton.svelte b/ts/components/IconButton.svelte
index d64bdded0..300a551eb 100644
--- a/ts/components/IconButton.svelte
+++ b/ts/components/IconButton.svelte
@@ -14,7 +14,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let tooltip: string | undefined = undefined;
     export let active = false;
     export let disabled = false;
-    export const disables = false; /* unused */
     export let tabbable = false;
 
     export let iconSize: number = 75;
diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte
index 2a7326d68..3a26df785 100644
--- a/ts/components/LabelButton.svelte
+++ b/ts/components/LabelButton.svelte
@@ -3,9 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey, nightModeKey, dropdownKey } from "./context-keys";
+    import { nightModeKey, dropdownKey } from "./context-keys";
     import type { DropdownProps } from "./dropdown";
 
     export let id: string | undefined = undefined;
@@ -19,12 +18,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let tooltip: string | undefined = undefined;
     export let active = false;
-    export let disables = true;
+    export let disabled = false;
     export let tabbable = false;
 
-    const disabled = getContext<Readable<boolean>>(disabledKey);
-    $: _disabled = disables && $disabled;
-
     const nightMode = getContext<boolean>(nightModeKey);
     const dropdownProps = getContext<DropdownProps>(dropdownKey) ?? { dropdown: false };
 
@@ -44,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:btn-night={theme === "anki" && nightMode}
     title={tooltip}
     {...dropdownProps}
-    disabled={_disabled}
+    {disabled}
     tabindex={tabbable ? 0 : -1}
     on:click
     on:mousedown|preventDefault
diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte
index 17060fd20..09c2ae8e0 100644
--- a/ts/components/SelectButton.svelte
+++ b/ts/components/SelectButton.svelte
@@ -3,21 +3,17 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
-    import { disabledKey, nightModeKey } from "./context-keys";
+    import { nightModeKey } from "./context-keys";
 
     export let id: string | undefined = undefined;
     let className = "";
     export { className as class };
 
     export let tooltip: string | undefined = undefined;
-
-    export let disables = true;
+    export let disabled = false;
 
     const nightMode = getContext<boolean>(nightModeKey);
-    const disabled = getContext<Readable<boolean>>(disabledKey);
-    $: _disabled = disables && $disabled;
 
     let buttonRef: HTMLSelectElement;
 
@@ -30,8 +26,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <select
     tabindex="-1"
     bind:this={buttonRef}
-    disabled={_disabled}
     {id}
+    {disabled}
     class="{className} form-select"
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
diff --git a/ts/components/context-keys.ts b/ts/components/context-keys.ts
index 0f0851843..affc80b75 100644
--- a/ts/components/context-keys.ts
+++ b/ts/components/context-keys.ts
@@ -2,7 +2,6 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export const nightModeKey = Symbol("nightMode");
 export const touchDeviceKey = Symbol("touchDevice");
-export const disabledKey = Symbol("disabled");
 
 export const sectionKey = Symbol("section");
 export const buttonGroupKey = Symbol("buttonGroup");
diff --git a/ts/editor/ClozeButton.svelte b/ts/editor/ClozeButton.svelte
index dd23d2605..fef1ef8a8 100644
--- a/ts/editor/ClozeButton.svelte
+++ b/ts/editor/ClozeButton.svelte
@@ -4,12 +4,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import * as tr from "lib/i18n";
-    import { disabledKey } from "components/context-keys";
-    import { inCodableKey } from "./context-keys";
 
     import IconButton from "components/IconButton.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
-    import WithContext from "components/WithContext.svelte";
+    import OnlyEditable from "./OnlyEditable.svelte";
 
     import { ellipseIcon } from "./icons";
     import { forEditorField } from ".";
@@ -45,16 +43,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <WithShortcut shortcut={"Control+Alt?+Shift+C"} let:createShortcut let:shortcutLabel>
-    <WithContext key={disabledKey} let:context={disabled}>
-        <WithContext key={inCodableKey} let:context={inCodable}>
-            <IconButton
-                tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
-                disabled={inCodable || disabled}
-                on:click={onCloze}
-                on:mount={createShortcut}
-            >
-                {@html ellipseIcon}
-            </IconButton>
-        </WithContext>
-    </WithContext>
+    <OnlyEditable let:disabled>
+        <IconButton
+            tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
+            {disabled}
+            on:click={onCloze}
+            on:mount={createShortcut}
+        >
+            {@html ellipseIcon}
+        </IconButton>
+    </OnlyEditable>
 </WithShortcut>
diff --git a/ts/editor/NoteTypeButtons.svelte b/ts/editor/NoteTypeButtons.svelte
index 4017464bd..ce4f6fc70 100644
--- a/ts/editor/NoteTypeButtons.svelte
+++ b/ts/editor/NoteTypeButtons.svelte
@@ -17,7 +17,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <ButtonGroup {api}>
     <ButtonGroupItem>
         <LabelButton
-            disables={false}
             tooltip={tr.editingCustomizeFields()}
             on:click={() => bridgeCommand("fields")}
         >
@@ -28,7 +27,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <ButtonGroupItem>
         <WithShortcut shortcut={"Control+L"} let:createShortcut let:shortcutLabel>
             <LabelButton
-                disables={false}
                 tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
                 on:click={() => bridgeCommand("cards")}
                 on:mount={createShortcut}
diff --git a/ts/editor/OnlyEditable.svelte b/ts/editor/OnlyEditable.svelte
index 1dac48d73..25d08beb7 100644
--- a/ts/editor/OnlyEditable.svelte
+++ b/ts/editor/OnlyEditable.svelte
@@ -4,12 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import WithContext from "components/WithContext.svelte";
-    import { disabledKey } from "components/context-keys";
-    import { inCodableKey } from "./context-keys";
+    import { fieldFocusedKey, inCodableKey } from "./context-keys";
 </script>
 
-<WithContext key={disabledKey} let:context={disabled}>
+<WithContext key={fieldFocusedKey} let:context={fieldFocused}>
     <WithContext key={inCodableKey} let:context={inCodable}>
-        <slot disabled={disabled || inCodable} />
+        <slot disabled={!fieldFocused || inCodable} />
     </WithContext>
 </WithContext>
diff --git a/ts/editor/PreviewButton.svelte b/ts/editor/PreviewButton.svelte
index 6f1f0a198..f5edfa4e0 100644
--- a/ts/editor/PreviewButton.svelte
+++ b/ts/editor/PreviewButton.svelte
@@ -13,7 +13,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <WithShortcut shortcut={"Control+Shift+P"} let:createShortcut let:shortcutLabel>
     <LabelButton
         tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
-        disables={false}
         on:click={() => bridgeCommand("preview")}
         on:mount={createShortcut}
     >
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index 693a7b4b7..245e41a13 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -5,8 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import * as tr from "lib/i18n";
     import { bridgeCommand } from "lib/bridgecommand";
-    import { disabledKey } from "components/context-keys";
-    import { inCodableKey } from "./context-keys";
+    import { fieldFocusedKey, inCodableKey } from "./context-keys";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@@ -89,16 +88,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <ButtonGroupItem>
         <WithDropdown let:createDropdown>
-            <WithContext key={disabledKey} let:context={disabled}>
-                <OnlyEditable let:disabled={inCodable}>
-                    <IconButton
-                        disabled={disabled || inCodable}
-                        on:mount={(event) => createDropdown(event.detail.button)}
-                    >
-                        {@html functionIcon}
-                    </IconButton>
-                </OnlyEditable>
-            </WithContext>
+            <OnlyEditable let:disabled>
+                <IconButton
+                    {disabled}
+                    on:mount={(event) => createDropdown(event.detail.button)}
+                >
+                    {@html functionIcon}
+                </IconButton>
+            </OnlyEditable>
 
             <DropdownMenu>
                 <WithShortcut
@@ -189,7 +186,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithContext key={disabledKey} let:context={disabled}>
+        <WithContext key={fieldFocusedKey} let:context={fieldFocused}>
             <WithContext key={inCodableKey} let:context={inCodable}>
                 <WithShortcut
                     shortcut={"Control+Shift+X"}
@@ -202,8 +199,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                             shortcutLabel
                         )}
                         iconSize={70}
-                        active={!disabled && inCodable}
-                        {disabled}
+                        active={inCodable}
+                        disabled={!fieldFocused}
                         on:click={onHtmlEdit}
                         on:mount={createShortcut}
                     >
diff --git a/ts/editor/codable.ts b/ts/editor/codable.ts
index 073309031..cdc062916 100644
--- a/ts/editor/codable.ts
+++ b/ts/editor/codable.ts
@@ -9,7 +9,7 @@ import "codemirror/addon/fold/xml-fold";
 import "codemirror/addon/edit/matchtags.js";
 import "codemirror/addon/edit/closetag.js";
 
-import { setCodableButtons } from "./toolbar";
+import { inCodable } from "./toolbar";
 
 const codeMirrorOptions = {
     mode: "htmlmixed",
@@ -67,7 +67,7 @@ export class Codable extends HTMLTextAreaElement {
 
     focus(): void {
         this.codeMirror.focus();
-        setCodableButtons();
+        inCodable.set(true);
     }
 
     caretToEnd(): void {
diff --git a/ts/editor/context-keys.ts b/ts/editor/context-keys.ts
index 552cb9188..f8c54a020 100644
--- a/ts/editor/context-keys.ts
+++ b/ts/editor/context-keys.ts
@@ -1,4 +1,5 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+export const fieldFocusedKey = Symbol("fieldFocused");
 export const inCodableKey = Symbol("inCodable");
diff --git a/ts/editor/editable.ts b/ts/editor/editable.ts
index 03bad6d82..3c657b7ef 100644
--- a/ts/editor/editable.ts
+++ b/ts/editor/editable.ts
@@ -3,7 +3,7 @@
 
 import { bridgeCommand } from "./lib";
 import { nodeIsInline, caretToEnd, getBlockElement } from "./helpers";
-import { setEditableButtons } from "./toolbar";
+import { inCodable } from "./toolbar";
 import { wrap } from "./wrap";
 
 function containsInlineContent(field: Element): boolean {
@@ -42,7 +42,7 @@ export class Editable extends HTMLElement {
 
     focus(): void {
         super.focus();
-        setEditableButtons();
+        inCodable.set(false);
     }
 
     caretToEnd(): void {
diff --git a/ts/editor/focus-handlers.ts b/ts/editor/focus-handlers.ts
index 7a03c6b7d..f15f9df50 100644
--- a/ts/editor/focus-handlers.ts
+++ b/ts/editor/focus-handlers.ts
@@ -5,7 +5,7 @@
 @typescript-eslint/no-non-null-assertion: "off",
  */
 
-import { enableButtons, disableButtons } from "./toolbar";
+import { fieldFocused } from "./toolbar";
 import type { EditingArea } from "./editing-area";
 
 import { saveField } from "./change-timer";
@@ -21,7 +21,7 @@ export function onFocus(evt: FocusEvent): void {
     }
 
     bridgeCommand(`focus:${currentField.ord}`);
-    enableButtons();
+    fieldFocused.set(true);
 }
 
 export function onBlur(evt: FocusEvent): void {
@@ -29,5 +29,5 @@ export function onBlur(evt: FocusEvent): void {
     const currentFieldUnchanged = previousFocus === document.activeElement;
 
     saveField(previousFocus, currentFieldUnchanged ? "key" : "blur");
-    disableButtons();
+    fieldFocused.set(false);
 }
diff --git a/ts/editor/index.ts b/ts/editor/index.ts
index 57ac34154..2b3325620 100644
--- a/ts/editor/index.ts
+++ b/ts/editor/index.ts
@@ -6,7 +6,7 @@
  */
 
 import { filterHTML } from "html-filter";
-import { updateActiveButtons, disableButtons } from "./toolbar";
+import { updateActiveButtons } from "./toolbar";
 import { setupI18n, ModuleName } from "lib/i18n";
 import { registerShortcut } from "lib/shortcuts";
 import { bridgeCommand } from "./lib";
@@ -20,7 +20,7 @@ import { LabelContainer } from "./label-container";
 import { EditingArea } from "./editing-area";
 import { Editable } from "./editable";
 import { Codable } from "./codable";
-import { initToolbar } from "./toolbar";
+import { initToolbar, fieldFocused } from "./toolbar";
 
 export { setNoteId, getNoteId } from "./note-id";
 export { saveNow } from "./change-timer";
@@ -140,7 +140,7 @@ export function setFields(fields: [string, string][]): void {
 
     if (!getCurrentField()) {
         // when initial focus of the window is not on editor (e.g. browser)
-        disableButtons();
+        fieldFocused.set(false);
     }
 }
 
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index a8fb63ab1..3d3eafd32 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -6,15 +6,15 @@
 @typescript-eslint/no-explicit-any: "off",
  */
 
-import { disabledKey, nightModeKey } from "components/context-keys";
-import { inCodableKey } from "./context-keys";
+import { nightModeKey } from "components/context-keys";
+import { fieldFocusedKey, inCodableKey } from "./context-keys";
 import { writable } from "svelte/store";
 
 import EditorToolbar from "./EditorToolbar.svelte";
 import "./bootstrap.css";
 
-const disabled = writable(false);
-const inCodable = writable(false);
+export const fieldFocused = writable(false);
+export const inCodable = writable(false);
 
 export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
     let toolbarResolve: (value: EditorToolbar) => void;
@@ -28,7 +28,7 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
             const anchor = document.getElementById("fields")!;
 
             const context = new Map();
-            context.set(disabledKey, disabled);
+            context.set(fieldFocusedKey, fieldFocused);
             context.set(inCodableKey, inCodable);
             context.set(
                 nightModeKey,
@@ -42,22 +42,6 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
     return toolbarPromise;
 }
 
-export function enableButtons(): void {
-    disabled.set(false);
-}
-
-export function disableButtons(): void {
-    disabled.set(true);
-}
-
-export function setCodableButtons(): void {
-    inCodable.set(true);
-}
-
-export function setEditableButtons(): void {
-    inCodable.set(false);
-}
-
 export {
     updateActiveButtons,
     clearActiveButtons,