From f056851c1e0e45552f85f58e1c6589f88cf366e7 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 24 Jun 2021 16:44:08 +0200
Subject: [PATCH] Port Focus tags shortcut to webview

---
 qt/aqt/editor.py                     |  4 +---
 ts/change-notetype/SaveButton.svelte |  6 +++---
 ts/components/Badge.svelte           |  2 ++
 ts/components/WithShortcut.svelte    |  4 ++--
 ts/components/helpers.ts             | 12 ++++++++++++
 ts/deck-options/SaveButton.svelte    |  3 ++-
 ts/editor/AddTagBadge.svelte         | 22 ++++++++++++++++------
 ts/editor/ClozeButton.svelte         |  5 +++--
 ts/editor/ColorButtons.svelte        |  5 +++--
 ts/editor/CommandIconButton.svelte   |  5 +++--
 ts/editor/NoteTypeButtons.svelte     |  3 ++-
 ts/editor/PreviewButton.svelte       |  3 ++-
 ts/editor/Tag.svelte                 |  6 +++++-
 ts/editor/TagInputEdit.svelte        |  9 +--------
 ts/editor/TemplateButtons.svelte     | 21 +++++++++++----------
 15 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 901cd9736..b15c1aae2 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -300,9 +300,7 @@ $editorToolbar.then(({{ toolbar }}) => toolbar.appendGroup({{
 
     def setupShortcuts(self) -> None:
         # if a third element is provided, enable shortcut even when no field selected
-        cuts: List[Tuple] = [
-            ("Ctrl+Shift+T", self.onFocusTags, True),
-        ]
+        cuts: List[Tuple] = []
         gui_hooks.editor_did_init_shortcuts(cuts, self)
         for row in cuts:
             if len(row) == 2:
diff --git a/ts/change-notetype/SaveButton.svelte b/ts/change-notetype/SaveButton.svelte
index c3bd7a8f0..78bb22888 100644
--- a/ts/change-notetype/SaveButton.svelte
+++ b/ts/change-notetype/SaveButton.svelte
@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "lib/i18n";
     import type { ChangeNotetypeState } from "./lib";
+    import { withButton } from "components/helpers";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@@ -29,9 +30,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 theme="primary"
                 on:click={() => save()}
                 tooltip={shortcutLabel}
-                on:mount={(event) => createShortcut(event.detail.button)}
-                >{tr.actionsSave()}</LabelButton
-            >
+                on:mount={withButton(createShortcut)}
+            >{tr.actionsSave()}</LabelButton>
         </WithShortcut>
     </ButtonGroupItem>
 </ButtonGroup>
diff --git a/ts/components/Badge.svelte b/ts/components/Badge.svelte
index 6e311645b..451e20acb 100644
--- a/ts/components/Badge.svelte
+++ b/ts/components/Badge.svelte
@@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let className = "";
     export { className as class };
+    export let tooltip: string | undefined;
 
     const dispatch = createEventDispatcher();
 
@@ -23,6 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <span
     bind:this={spanRef}
+    title={tooltip}
     class={`badge ${className}`}
     class:dropdown-toggle={dropdownProps.dropdown}
     {...dropdownProps}
diff --git a/ts/components/WithShortcut.svelte b/ts/components/WithShortcut.svelte
index 260b10f92..e09ec539d 100644
--- a/ts/components/WithShortcut.svelte
+++ b/ts/components/WithShortcut.svelte
@@ -12,9 +12,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let deregister: () => void;
 
-    function createShortcut(mounted: HTMLElement): void {
+    function createShortcut(element: HTMLElement): void {
         deregister = registerShortcut((event: KeyboardEvent) => {
-            mounted.dispatchEvent(new MouseEvent("click", event));
+            element.dispatchEvent(new MouseEvent("click", event));
             event.preventDefault();
         }, shortcut);
     }
diff --git a/ts/components/helpers.ts b/ts/components/helpers.ts
index 039e5919d..e3e8e61a0 100644
--- a/ts/components/helpers.ts
+++ b/ts/components/helpers.ts
@@ -14,3 +14,15 @@ export function mergeTooltipAndShortcut(
     }
     return buf;
 }
+
+export const withButton =
+    (f: (button: HTMLButtonElement) => void) =>
+    ({ detail }: CustomEvent): void => {
+        f(detail.button);
+    };
+
+export const withSpan =
+    (f: (span: HTMLSpanElement) => void) =>
+    ({ detail }: CustomEvent): void => {
+        f(detail.span);
+    };
diff --git a/ts/deck-options/SaveButton.svelte b/ts/deck-options/SaveButton.svelte
index 8dfb384b5..088cd1764 100644
--- a/ts/deck-options/SaveButton.svelte
+++ b/ts/deck-options/SaveButton.svelte
@@ -7,6 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { createEventDispatcher } from "svelte";
     import type { DeckOptionsState } from "./lib";
     import type Dropdown from "bootstrap/js/dist/dropdown";
+    import { withButton } from "components/helpers";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@@ -65,7 +66,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 theme="primary"
                 on:click={() => save(false)}
                 tooltip={shortcutLabel}
-                on:mount={(event) => createShortcut(event.detail.button)}
+                on:mount={withButton(createShortcut)}
                 >{tr.deckConfigSaveButton()}</LabelButton
             >
         </WithShortcut>
diff --git a/ts/editor/AddTagBadge.svelte b/ts/editor/AddTagBadge.svelte
index 94830c14b..66bb992da 100644
--- a/ts/editor/AddTagBadge.svelte
+++ b/ts/editor/AddTagBadge.svelte
@@ -3,18 +3,28 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import WithShortcut from "components/WithShortcut.svelte";
     import Badge from "components/Badge.svelte";
+
+    import { withSpan } from "components/helpers";
+    import { appendInParentheses } from "./helpers";
     import { tagIcon, addTagIcon } from "./icons";
 
     let theTagIcon = tagIcon;
+
+    const tooltip = "Add tag";
 </script>
 
-<Badge
-    class="add-icon d-flex me-1"
-    on:click
-    on:mouseenter={() => (theTagIcon = addTagIcon)}
-    on:mouseleave={() => (theTagIcon = tagIcon)}>{@html theTagIcon}</Badge
->
+<WithShortcut shortcut="Control+Shift+T" let:createShortcut let:shortcutLabel>
+    <Badge
+        class="add-icon d-flex me-1"
+        tooltip={appendInParentheses(tooltip, shortcutLabel)}
+        on:click
+        on:mouseenter={() => (theTagIcon = addTagIcon)}
+        on:mouseleave={() => (theTagIcon = tagIcon)}
+        on:mount={withSpan(createShortcut)}>{@html theTagIcon}</Badge
+    >
+</WithShortcut>
 
 <style lang="scss">
     :global(.add-icon > svg) {
diff --git a/ts/editor/ClozeButton.svelte b/ts/editor/ClozeButton.svelte
index 3320eb4f4..fe06ce54e 100644
--- a/ts/editor/ClozeButton.svelte
+++ b/ts/editor/ClozeButton.svelte
@@ -9,6 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import WithShortcut from "components/WithShortcut.svelte";
     import OnlyEditable from "./OnlyEditable.svelte";
 
+    import { withButton } from "components/helpers";
     import { ellipseIcon } from "./icons";
     import { forEditorField } from ".";
     import { wrapCurrent } from "./wrap";
@@ -46,9 +47,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <OnlyEditable let:disabled>
         <IconButton
             tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
-            {disabled}
+            disabled={disabled}
             on:click={onCloze}
-            on:mount={(event) => createShortcut(event.detail.button)}
+            on:mount={withButton(createShortcut)}
         >
             {@html ellipseIcon}
         </IconButton>
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index 48a304161..0f4e17acf 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -14,6 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import OnlyEditable from "./OnlyEditable.svelte";
 
     import { bridgeCommand } from "lib/bridgecommand";
+    import { withButton } from "components/helpers";
     import { textColorIcon, highlightColorIcon, arrowIcon } from "./icons";
     import { appendInParentheses } from "./helpers";
 
@@ -45,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         )}
                         {disabled}
                         on:click={forecolorWrap}
-                        on:mount={(event) => createShortcut(event.detail.button)}
+                        on:mount={withButton(createShortcut)}
                     >
                         {@html textColorIcon}
                         {@html colorHelperIcon}
@@ -71,7 +72,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                 forecolorWrap = wrapWithForecolor(setColor(event));
                                 forecolorWrap();
                             }}
-                            on:mount={(event) => createShortcut(event.detail.input)}
+                            on:mount={withButton(createShortcut)}
                         />
                     </IconButton>
                 </WithShortcut>
diff --git a/ts/editor/CommandIconButton.svelte b/ts/editor/CommandIconButton.svelte
index e06ef94bd..db4a065b5 100644
--- a/ts/editor/CommandIconButton.svelte
+++ b/ts/editor/CommandIconButton.svelte
@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import WithState from "components/WithState.svelte";
     import OnlyEditable from "./OnlyEditable.svelte";
 
+    import { withButton } from "components/helpers";
     import { appendInParentheses } from "./helpers";
 
     export let key: string;
@@ -48,7 +49,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 tooltip={appendInParentheses(tooltip, shortcutLabel)}
                 {disabled}
                 on:click={() => document.execCommand(key)}
-                on:mount={(event) => createShortcut(event.detail.button)}
+                on:mount={withButton(createShortcut)}
             >
                 <slot />
             </IconButton>
@@ -69,7 +70,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         document.execCommand(key);
                         updateState(event);
                     }}
-                    on:mount={(event) => createShortcut(event.detail.button)}
+                    on:mount={withButton(createShortcut)}
                 >
                     <slot />
                 </IconButton>
diff --git a/ts/editor/NoteTypeButtons.svelte b/ts/editor/NoteTypeButtons.svelte
index c98e3dbe3..04a5d1cbb 100644
--- a/ts/editor/NoteTypeButtons.svelte
+++ b/ts/editor/NoteTypeButtons.svelte
@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { bridgeCommand } from "lib/bridgecommand";
     import * as tr from "lib/i18n";
+    import { withButton } from "components/helpers";
 
     import ButtonGroup from "components/ButtonGroup.svelte";
     import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@@ -29,7 +30,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <LabelButton
                 tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
                 on:click={() => bridgeCommand("cards")}
-                on:mount={(event) => createShortcut(event.detail.button)}
+                on:mount={withButton(createShortcut)}
             >
                 {tr.editingCards()}...
             </LabelButton>
diff --git a/ts/editor/PreviewButton.svelte b/ts/editor/PreviewButton.svelte
index 8cd9833d3..ee3504817 100644
--- a/ts/editor/PreviewButton.svelte
+++ b/ts/editor/PreviewButton.svelte
@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import { bridgeCommand } from "lib/bridgecommand";
     import * as tr from "lib/i18n";
+    import { withButton } from "components/helpers";
 
     import WithShortcut from "components/WithShortcut.svelte";
     import LabelButton from "components/LabelButton.svelte";
@@ -14,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <LabelButton
         tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
         on:click={() => bridgeCommand("preview")}
-        on:mount={(event) => createShortcut(event.detail.button)}
+        on:mount={withButton(createShortcut)}
     >
         {tr.actionsPreview()}
     </LabelButton>
diff --git a/ts/editor/Tag.svelte b/ts/editor/Tag.svelte
index 3116511e8..af459aa86 100644
--- a/ts/editor/Tag.svelte
+++ b/ts/editor/Tag.svelte
@@ -32,7 +32,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 {#if active}
-    <TagInputEdit bind:name on:focusout={() => (active = false)} on:update={updateTag} />
+    <TagInputEdit
+        bind:name
+        on:focusout={() => (active = false)}
+        on:update={updateTag}
+    />
 {:else}
     <span
         class="d-inline-flex align-items-center tag text-nowrap bg-secondary rounded ps-2 pe-1 me-1"
diff --git a/ts/editor/TagInputEdit.svelte b/ts/editor/TagInputEdit.svelte
index f9dbcc4be..47564474d 100644
--- a/ts/editor/TagInputEdit.svelte
+++ b/ts/editor/TagInputEdit.svelte
@@ -31,11 +31,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     /* } */
 </script>
 
-<TagInput
-    bind:name
-    bind:input
-    on:keydown={onKeydown}
-    on:focusout
-    on:update
-    on:add
-/>
+<TagInput bind:name bind:input on:keydown={onKeydown} on:focusout on:update on:add />
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index b9766e0c9..58beb683d 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -19,6 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ClozeButton from "./ClozeButton.svelte";
 
     import { getCurrentField, appendInParentheses } from "./helpers";
+    import { withButton } from "components/helpers";
     import { wrapCurrent } from "./wrap";
     import { paperclipIcon, micIcon, functionIcon, xmlIcon } from "./icons";
 
@@ -52,7 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     iconSize={70}
                     {disabled}
                     on:click={onAttachment}
-                    on:mount={(event) => createShortcut(event.detail.button)}
+                    on:mount={withButton(createShortcut)}
                 >
                     {@html paperclipIcon}
                 </IconButton>
@@ -71,7 +72,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     iconSize={70}
                     {disabled}
                     on:click={onRecord}
-                    on:mount={(event) => createShortcut(event.detail.button)}
+                    on:mount={withButton(createShortcut)}
                 >
                     {@html micIcon}
                 </IconButton>
@@ -90,7 +91,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <OnlyEditable let:disabled>
                 <IconButton
                     {disabled}
-                    on:mount={(event) => createDropdown(event.detail.button)}
+                    on:mount={withButton(createDropdown)}
                 >
                     {@html functionIcon}
                 </IconButton>
@@ -104,7 +105,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("\\(", "\\)")}
-                        on:mount={(event) => createShortcut(event.detail.button)}
+                        on:mount={withButton(createShortcut)}
                     >
                         {tr.editingMathjaxInline()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -118,7 +119,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("\\[", "\\]")}
-                        on:mount={(event) => createShortcut(event.detail.button)}
+                        on:mount={withButton(createShortcut)}
                     >
                         {tr.editingMathjaxBlock()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -132,7 +133,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("\\(\\ce{", "}\\)")}
-                        on:mount={(event) => createShortcut(event.detail.button)}
+                        on:mount={withButton(createShortcut)}
                     >
                         {tr.editingMathjaxChemistry()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -146,7 +147,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("[latex]", "[/latex]")}
-                        on:mount={(event) => createShortcut(event.detail.button)}
+                        on:mount={withButton(createShortcut)}
                     >
                         {tr.editingLatex()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -160,7 +161,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("[$]", "[/$]")}
-                        on:mount={(event) => createShortcut(event.detail.button)}
+                        on:mount={withButton(createShortcut)}
                     >
                         {tr.editingLatexEquation()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -174,7 +175,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("[$$]", "[/$$]")}
-                        on:mount={(event) => createShortcut(event.detail.button)}
+                        on:mount={withButton(createShortcut)}
                     >
                         {tr.editingLatexMathEnv()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -201,7 +202,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         active={inCodable}
                         disabled={!fieldFocused}
                         on:click={onHtmlEdit}
-                        on:mount={(event) => createShortcut(event.detail.button)}
+                        on:mount={withButton(createShortcut)}
                     >
                         {@html xmlIcon}
                     </IconButton>