Merge pull request #1279 from hgiesel/addonimprov

Remove disabled / Export via Components

ts/components/ButtonGroup.svelte

@@ -41,15 +41,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         makeInterface(makeRegistration);
 
     $: for (const [index, item] of $items.entries()) {
+        item.position.update(() => {
             if ($items.length === 1) {
-            item.position.set(ButtonPosition.Standalone);
+                return ButtonPosition.Standalone;
             } else if (index === 0) {
-            item.position.set(ButtonPosition.Leftmost);
+                return ButtonPosition.Leftmost;
             } else if (index === $items.length - 1) {
-            item.position.set(ButtonPosition.Rightmost);
+                return ButtonPosition.Rightmost;
             } else {
-            item.position.set(ButtonPosition.Center);
+                return ButtonPosition.Center;
             }
+        });
     }
 
     setContext(buttonGroupKey, registerComponent);
@@ -99,7 +101,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     role="group"
 >
     <slot />
-    {#each $dynamicItems as item}
+    {#each $dynamicItems as item (item[0].id)}
         <ButtonGroupItem id={item[0].id} registration={item[1]}>
             <svelte:component this={item[0].component} {...item[0].props} />
         </ButtonGroupItem>

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;

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

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}

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");

ts/components/registration.ts

@@ -50,8 +50,11 @@ export function makeInterface<T extends Registration>(
         index: number = registrations.length,
         registration = makeRegistration()
     ): T {
+        items.update((registrations) => {
             registrations.splice(index, 0, registration);
-        items.set(registrations);
+            return registrations;
+        });
+
         return registration;
     }
 

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}>
+    <OnlyEditable let:disabled>
         <IconButton
             tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
-                disabled={inCodable || disabled}
+            {disabled}
             on:click={onCloze}
             on:mount={createShortcut}
         >
             {@html ellipseIcon}
         </IconButton>
-        </WithContext>
-    </WithContext>
+    </OnlyEditable>
 </WithShortcut>

ts/editor/Components.svelte

@@ -0,0 +1,21 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script context="module" lang="typescript">
+    import IconButton from "components/IconButton.svelte";
+    import LabelButton from "components/LabelButton.svelte";
+    import WithContext from "components/WithContext.svelte";
+    import WithState from "components/WithState.svelte";
+
+    import * as contextKeys from "components/context-keys";
+    import * as editorContextKeys from "./context-keys";
+
+    export const components = {
+        IconButton,
+        LabelButton,
+        WithContext,
+        WithState,
+        contextKeys: { ...contextKeys, ...editorContextKeys },
+    };
+</script>

ts/editor/EditorToolbar.svelte

@@ -15,17 +15,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         resetAllState(false);
     }
 
-    /* Export components */
+    /* Our dynamic components */
     import AddonButtons from "./AddonButtons.svelte";
     import PreviewButton from "./PreviewButton.svelte";
-    import LabelButton from "components/LabelButton.svelte";
-    import IconButton from "components/IconButton.svelte";
 
     export const editorToolbar = {
         AddonButtons,
         PreviewButton,
-        LabelButton,
-        IconButton,
     };
 </script>
 

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}

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>

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}
     >

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}>
+            <OnlyEditable let:disabled>
                 <IconButton
-                        disabled={disabled || inCodable}
+                    {disabled}
                     on:mount={(event) => createDropdown(event.detail.button)}
                 >
                     {@html functionIcon}
                 </IconButton>
             </OnlyEditable>
-            </WithContext>
 
             <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}
                     >

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 {

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");

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 {

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);
 }

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,12 +20,13 @@ 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";
 export { wrap, wrapIntoText } from "./wrap";
 export { editorToolbar } from "./toolbar";
+export { components } from "./Components.svelte";
 
 declare global {
     interface Selection {
@@ -139,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);
     }
 }
 

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,