Fix shortcuts for tag actions not working (#2214)

ts/lib/context-keys.ts

@@ -6,3 +6,4 @@ export const fontSizeKey = Symbol("fontSize");
 export const directionKey = Symbol("direction");
 export const descriptionKey = Symbol("description");
 export const collapsedKey = Symbol("collapsed");
+export const tagActionsShortcutsKey = Symbol("tagActionsShortcuts");

ts/tag-editor/TagEditor.svelte

@@ -3,11 +3,13 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { createEventDispatcher, tick } from "svelte";
+    import { createEventDispatcher, setContext, tick } from "svelte";
     import type { Writable } from "svelte/store";
     import { writable } from "svelte/store";
 
+    import Shortcut from "../components/Shortcut.svelte";
     import { execCommand } from "../domlib";
+    import { tagActionsShortcutsKey } from "../lib/context-keys";
     import { isArrowDown, isArrowUp } from "../lib/keys";
     import { Tags, tags as tagsService } from "../lib/proto";
     import { TagOptionsButton } from "./tag-options-button";
@@ -26,6 +28,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let tags: Writable<string[]>;
     export let keyCombination: string = "Control+Shift+T";
 
+    const selectAllShortcut = "Control+A";
+    const copyShortcut = "Control+C";
+    const removeShortcut = "Backspace";
+    setContext(tagActionsShortcutsKey, {
+        selectAllShortcut,
+        copyShortcut,
+        removeShortcut,
+    });
+
     let tagTypes: TagType[];
     function tagsToTagTypes(tags: string[]): void {
         tagTypes = tags.map(
@@ -384,6 +395,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: dispatch("heightChange", { height: height * 1.15 });
 </script>
 
+{#if anyTagsSelected}
+    <Shortcut keyCombination={selectAllShortcut} on:action={selectAllTags} />
+    <Shortcut keyCombination={copyShortcut} on:action={copySelectedTags} />
+    <Shortcut keyCombination={removeShortcut} on:action={deleteSelectedTags} />
+{/if}
+
 <div class="tag-editor" on:focusout={deselectIfLeave} bind:offsetHeight={height}>
     <TagOptionsButton
         bind:badgeHeight

ts/tag-editor/TagInput.svelte

@@ -3,8 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { createEventDispatcher, onMount, tick } from "svelte";
+    import { createEventDispatcher, getContext, onMount, tick } from "svelte";
 
+    import { tagActionsShortcutsKey } from "../lib/context-keys";
     import { isArrowLeft, isArrowRight } from "../lib/keys";
     import { registerShortcut } from "../lib/shortcuts";
     import {
@@ -234,8 +235,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
     }
 
+    const { selectAllShortcut } =
+        getContext<Record<string, string>>(tagActionsShortcutsKey);
+
     onMount(() => {
-        registerShortcut(onSelectAll, "Control+A", { target: input });
+        registerShortcut(onSelectAll, selectAllShortcut, { target: input });
         input.focus();
     });
 </script>

ts/tag-editor/tag-options-button/TagsSelectedButton.svelte

@@ -3,13 +3,13 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, getContext } from "svelte";
 
     import DropdownItem from "../../components/DropdownItem.svelte";
     import IconConstrain from "../../components/IconConstrain.svelte";
     import Popover from "../../components/Popover.svelte";
-    import Shortcut from "../../components/Shortcut.svelte";
     import WithFloating from "../../components/WithFloating.svelte";
+    import { tagActionsShortcutsKey } from "../../lib/context-keys";
     import * as tr from "../../lib/ftl";
     import { getPlatformString } from "../../lib/shortcuts";
     import { dotsIcon } from "./icons";
@@ -18,9 +18,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let show = false;
 
-    const allShortcut = "Control+A";
-    const copyShortcut = "Control+C";
-    const removeShortcut = "Backspace";
+    const { selectAllShortcut, copyShortcut, removeShortcut } =
+        getContext<Record<string, string>>(tagActionsShortcutsKey);
 </script>
 
 <WithFloating
@@ -36,27 +35,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <Popover slot="floating">
         <DropdownItem on:click={() => dispatch("tagselectall")}>
-            {tr.editingTagsSelectAll()} ({getPlatformString(allShortcut)})
+            {tr.editingTagsSelectAll()} ({getPlatformString(selectAllShortcut)})
         </DropdownItem>
-        <Shortcut
-            keyCombination={allShortcut}
-            on:action={() => dispatch("tagselectall")}
-        />
 
         <DropdownItem on:click={() => dispatch("tagcopy")}
             >{tr.editingTagsCopy()} ({getPlatformString(copyShortcut)})</DropdownItem
         >
-        <Shortcut keyCombination={copyShortcut} on:action={() => dispatch("tagcopy")} />
 
         <DropdownItem on:click={() => dispatch("tagdelete")}
             >{tr.editingTagsRemove()} ({getPlatformString(
                 removeShortcut,
             )})</DropdownItem
         >
-        <Shortcut
-            keyCombination={removeShortcut}
-            on:action={() => dispatch("tagdelete")}
-        />
     </Popover>
 </WithFloating>