Prefer optionalModifiers over register multiple shortcuts

ts/editor-toolbar/WithShortcut.d.ts

@@ -2,7 +2,8 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import type { ToolbarItem } from "./types";
 
-export interface WithShortcutsProps {
+export interface WithShortcutProps {
     button: ToolbarItem;
-    shortcuts: string[];
+    shortcut: string;
+    optionalModifiers: string[];
 }

ts/editor-toolbar/WithShortcut.svelte

@@ -7,13 +7,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { ToolbarItem } from "./types";
 
     import { onDestroy } from "svelte";
-    import { registerShortcut, getPlatformString } from "anki/shortcuts";
+    import { Modifier, registerShortcut, getPlatformString } from "anki/shortcuts";
 
     export let button: ToolbarItem;
-    export let shortcuts: string[];
+    export let shortcut: string;
+    export let optionalModifiers: Modifier[];
 
     function extend({ ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
-        const shortcutLabel = getPlatformString(shortcuts[0]);
+        const shortcutLabel = getPlatformString(shortcut);
 
         return {
             shortcutLabel,
@@ -21,19 +22,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         };
     }
 
-    let deregisters: (() => void)[];
+    let deregister: () => void;
 
     function createShortcut({ detail }: CustomEvent): void {
         const mounted: HTMLButtonElement = detail.button;
-        deregisters = shortcuts.map((shortcut: string): (() => void) =>
+        deregister = registerShortcut(
-            registerShortcut((event) => {
+            (event: KeyboardEvent) => {
-                mounted.dispatchEvent(new MouseEvent("click"));
+                mounted.dispatchEvent(new KeyboardEvent("click", event));
                 event.preventDefault();
-            }, shortcut)
+            },
+            shortcut,
+            optionalModifiers
         );
     }
 
-    onDestroy(() => deregisters.forEach((dereg: () => void): void => dereg()));
+    onDestroy(() => deregister());
 </script>
 
 <svelte:component

ts/editor-toolbar/dynamicComponents.ts

@@ -20,8 +20,8 @@ import type { DropdownItemProps } from "./DropdownItem";
 import WithDropdownMenu from "./WithDropdownMenu.svelte";
 import type { WithDropdownMenuProps } from "./WithDropdownMenu";
 
-import WithShortcuts from "./WithShortcuts.svelte";
+import WithShortcut from "./WithShortcut.svelte";
-import type { WithShortcutsProps } from "./WithShortcuts";
+import type { WithShortcutProps } from "./WithShortcut";
 
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 
@@ -59,6 +59,6 @@ export const withDropdownMenu = dynamicComponent<
     WithDropdownMenuProps
 >(WithDropdownMenu);
 
-export const withShortcuts = dynamicComponent<typeof WithShortcuts, WithShortcutsProps>(
+export const withShortcut = dynamicComponent<typeof WithShortcut, WithShortcutProps>(
-    WithShortcuts
+    WithShortcut
 );

ts/editor/cloze.ts

@@ -1,11 +1,11 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import type WithShortcuts from "editor-toolbar/WithShortcuts.svelte";
+import type WithShortcut from "editor-toolbar/WithShortcut.svelte";
-import type { WithShortcutsProps } from "editor-toolbar/WithShortcuts";
+import type { WithShortcutProps } from "editor-toolbar/WithShortcut";
 import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
 import * as tr from "anki/i18n";
-import { iconButton, withShortcuts } from "editor-toolbar/dynamicComponents";
+import { iconButton, withShortcut } from "editor-toolbar/dynamicComponents";
 
 import bracketsIcon from "./code-brackets.svg";
 
@@ -35,16 +35,17 @@ function getCurrentHighestCloze(increment: boolean): number {
     return Math.max(1, highest);
 }
 
-function onCloze(event: MouseEvent): void {
+function onCloze(event: KeyboardEvent | MouseEvent): void {
-    const highestCloze = getCurrentHighestCloze(!event.altKey);
+    const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
     wrap(`{{c${highestCloze}::`, "}}");
 }
 
-export function getClozeButton(): DynamicSvelteComponent<typeof WithShortcuts> &
+export function getClozeButton(): DynamicSvelteComponent<typeof WithShortcut> &
-    WithShortcutsProps {
+    WithShortcutProps {
-    return withShortcuts({
+    return withShortcut({
         id: "cloze",
-        shortcuts: ["Control+Shift+KeyC", "Control+Alt+Shift+KeyC"],
+        shortcut: "Control+Shift+KeyC",
+        optionalModifiers: ["Alt"],
         button: iconButton({
             icon: bracketsIcon,
             onClick: onCloze,

ts/editor/color.ts

@@ -8,7 +8,7 @@ import {
     iconButton,
     colorPicker,
     buttonGroup,
-    withShortcuts,
+    withShortcut,
 } from "editor-toolbar/dynamicComponents";
 import * as tr from "anki/i18n";
 
@@ -31,8 +31,8 @@ function wrapWithForecolor(color: string): void {
 
 export function getColorGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
-    const forecolorButton = withShortcuts({
+    const forecolorButton = withShortcut({
-        shortcuts: ["F7"],
+        shortcut: "F7",
         button: iconButton({
             icon: squareFillIcon,
             className: "forecolor",
@@ -41,8 +41,8 @@ export function getColorGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
         }),
     });
 
-    const colorpickerButton = withShortcuts({
+    const colorpickerButton = withShortcut({
-        shortcuts: ["F8"],
+        shortcut: "F8",
         button: colorPicker({
             onChange: ({ currentTarget }) =>
                 setForegroundColor((currentTarget as HTMLInputElement).value),

ts/editor/formatInline.ts

@@ -9,7 +9,7 @@ import {
     commandIconButton,
     iconButton,
     buttonGroup,
-    withShortcuts,
+    withShortcut,
 } from "editor-toolbar/dynamicComponents";
 
 import boldIcon from "./type-bold.svg";
@@ -21,8 +21,8 @@ import eraserIcon from "./eraser.svg";
 
 export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
-    const boldButton = withShortcuts({
+    const boldButton = withShortcut({
-        shortcuts: ["Control+KeyB"],
+        shortcut: "Control+KeyB",
         button: commandIconButton({
             icon: boldIcon,
             tooltip: tr.editingBoldText(),
@@ -30,8 +30,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
         }),
     });
 
-    const italicButton = withShortcuts({
+    const italicButton = withShortcut({
-        shortcuts: ["Control+KeyI"],
+        shortcut: "Control+KeyI",
         button: commandIconButton({
             icon: italicIcon,
             tooltip: tr.editingItalicText(),
@@ -39,8 +39,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
         }),
     });
 
-    const underlineButton = withShortcuts({
+    const underlineButton = withShortcut({
-        shortcuts: ["Control+KeyU"],
+        shortcut: "Control+KeyU",
         button: commandIconButton({
             icon: underlineIcon,
             tooltip: tr.editingUnderlineText(),
@@ -48,8 +48,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
         }),
     });
 
-    const superscriptButton = withShortcuts({
+    const superscriptButton = withShortcut({
-        shortcuts: ["Control+Shift+Equal"],
+        shortcut: "Control+Shift+Equal",
         button: commandIconButton({
             icon: superscriptIcon,
             tooltip: tr.editingSuperscript(),
@@ -57,8 +57,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
         }),
     });
 
-    const subscriptButton = withShortcuts({
+    const subscriptButton = withShortcut({
-        shortcuts: ["Control+Equal"],
+        shortcut: "Control+Equal",
         button: commandIconButton({
             icon: subscriptIcon,
             tooltip: tr.editingSubscript(),
@@ -66,8 +66,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
         }),
     });
 
-    const removeFormatButton = withShortcuts({
+    const removeFormatButton = withShortcut({
-        shortcuts: ["Control+KeyR"],
+        shortcut: "Control+KeyR",
         button: iconButton({
             icon: eraserIcon,
             tooltip: tr.editingRemoveFormatting(),

ts/editor/notetype.ts

@@ -9,7 +9,7 @@ import * as tr from "anki/i18n";
 import {
     labelButton,
     buttonGroup,
-    withShortcuts,
+    withShortcut,
 } from "editor-toolbar/dynamicComponents";
 
 export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
@@ -21,8 +21,8 @@ export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
         tooltip: tr.editingCustomizeFields(),
     });
 
-    const cardsButton = withShortcuts({
+    const cardsButton = withShortcut({
-        shortcuts: ["Control+KeyL"],
+        shortcut: "Control+KeyL",
         button: labelButton({
             onClick: () => bridgeCommand("cards"),
             disables: false,

ts/editor/template.ts

@@ -13,7 +13,7 @@ import {
     dropdownMenu,
     dropdownItem,
     buttonGroup,
-    withShortcuts,
+    withShortcut,
 } from "editor-toolbar/dynamicComponents";
 import * as tr from "anki/i18n";
 
@@ -42,8 +42,8 @@ const mathjaxMenuId = "mathjaxMenu";
 
 export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
-    const attachmentButton = withShortcuts({
+    const attachmentButton = withShortcut({
-        shortcuts: ["F3"],
+        shortcut: "F3",
         button: iconButton({
             icon: paperclipIcon,
             onClick: onAttachment,
@@ -51,8 +51,8 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
         }),
     });
 
-    const recordButton = withShortcuts({
+    const recordButton = withShortcut({
-        shortcuts: ["F5"],
+        shortcut: "F5",
         button: iconButton({
             icon: micIcon,
             onClick: onRecord,
@@ -69,8 +69,8 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
         menuId: mathjaxMenuId,
     });
 
-    const htmlButton = withShortcuts({
+    const htmlButton = withShortcut({
-        shortcuts: ["Control+Shift+KeyX"],
+        shortcut: "Control+Shift+KeyX",
         button: iconButton({
             icon: xmlIcon,
             onClick: onHtmlEdit,
@@ -93,22 +93,22 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
 export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu> &
     DropdownMenuProps)[] {
     const mathjaxMenuItems = [
-        withShortcuts({
+        withShortcut({
-            shortcuts: ["Control+KeyM, KeyM"],
+            shortcut: "Control+KeyM, KeyM",
             button: dropdownItem({
                 onClick: () => wrap("\\(", "\\)"),
                 label: tr.editingMathjaxInline(),
             }),
         }),
-        withShortcuts({
+        withShortcut({
-            shortcuts: ["Control+KeyM, KeyE"],
+            shortcut: "Control+KeyM, KeyE",
             button: dropdownItem({
                 onClick: () => wrap("\\[", "\\]"),
                 label: tr.editingMathjaxBlock(),
             }),
         }),
-        withShortcuts({
+        withShortcut({
-            shortcuts: ["Control+KeyM, KeyC"],
+            shortcut: "Control+KeyM, KeyC",
             button: dropdownItem({
                 onClick: () => wrap("\\(\\ce{", "}\\)"),
                 label: tr.editingMathjaxChemistry(),
@@ -117,22 +117,22 @@ export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu>
     ];
 
     const latexMenuItems = [
-        withShortcuts({
+        withShortcut({
-            shortcuts: ["Control+KeyT, KeyT"],
+            shortcut: "Control+KeyT, KeyT",
             button: dropdownItem({
                 onClick: () => wrap("[latex]", "[/latex]"),
                 label: tr.editingLatex(),
             }),
         }),
-        withShortcuts({
+        withShortcut({
-            shortcuts: ["Control+KeyT, KeyE"],
+            shortcut: "Control+KeyT, KeyE",
             button: dropdownItem({
                 onClick: () => wrap("[$]", "[/$]"),
                 label: tr.editingLatexEquation(),
             }),
         }),
-        withShortcuts({
+        withShortcut({
-            shortcuts: ["Control+KeyT, KeyM"],
+            shortcut: "Control+KeyT, KeyM",
             button: dropdownItem({
                 onClick: () => wrap("[$$]", "[/$$]"),
                 label: tr.editingLatexMathEnv(),

ts/lib/shortcuts.ts

@@ -2,7 +2,7 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import * as tr from "./i18n";
 
-type Modifier = "Control" | "Alt" | "Shift" | "Meta";
+export type Modifier = "Control" | "Alt" | "Shift" | "Meta";
 
 const modifiers: Modifier[] = ["Control", "Alt", "Shift", "Meta"];