Port Focus tags shortcut to webview

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] = [
+        cuts: List[Tuple] = []
-            ("Ctrl+Shift+T", self.onFocusTags, True),
-        ]
         gui_hooks.editor_did_init_shortcuts(cuts, self)
         for row in cuts:
             if len(row) == 2:

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)}
+                on:mount={withButton(createShortcut)}
-                >{tr.actionsSave()}</LabelButton
+            >{tr.actionsSave()}</LabelButton>
-            >
         </WithShortcut>
     </ButtonGroupItem>
 </ButtonGroup>

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}

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

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

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>

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
+<WithShortcut shortcut="Control+Shift+T" let:createShortcut let:shortcutLabel>
-    class="add-icon d-flex me-1"
+    <Badge
-    on:click
+        class="add-icon d-flex me-1"
-    on:mouseenter={() => (theTagIcon = addTagIcon)}
+        tooltip={appendInParentheses(tooltip, shortcutLabel)}
-    on:mouseleave={() => (theTagIcon = tagIcon)}>{@html theTagIcon}</Badge
+        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) {

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>

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>

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>

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>

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>

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"

ts/editor/TagInputEdit.svelte

@@ -31,11 +31,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     /* } */
 </script>
 
-<TagInput
+<TagInput bind:name bind:input on:keydown={onKeydown} on:focusout on:update on:add />
-    bind:name
-    bind:input
-    on:keydown={onKeydown}
-    on:focusout
-    on:update
-    on:add
-/>

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>