Move other buttons to WithShortcut

qt/aqt/editor.py

@@ -311,22 +311,6 @@ $editorToolbar.addButtonGroup({{
     def setupShortcuts(self) -> None:
         # if a third element is provided, enable shortcut even when no field selected
         cuts: List[Tuple] = [
-            ("Ctrl+L", self.onCardLayout, True),
-            ("Ctrl++", self.toggleSuper),
-            ("Ctrl+=", self.toggleSub),
-            ("F7", self.onForeground),
-            ("F8", self.onChangeCol),
-            ("Ctrl+Shift+C", self.onCloze),
-            ("Ctrl+Shift+Alt+C", self.onCloze),
-            ("F3", self.onAddMedia),
-            ("F5", self.onRecSound),
-            ("Ctrl+T, T", self.insertLatex),
-            ("Ctrl+T, E", self.insertLatexEqn),
-            ("Ctrl+T, M", self.insertLatexMathEnv),
-            ("Ctrl+M, M", self.insertMathjaxInline),
-            ("Ctrl+M, E", self.insertMathjaxBlock),
-            ("Ctrl+M, C", self.insertMathjaxChemistry),
-            ("Ctrl+Shift+X", self.onHtmlEdit),
             ("Ctrl+Shift+T", self.onFocusTags, True),
         ]
         gui_hooks.editor_did_init_shortcuts(cuts, self)

ts/editor-toolbar/WithShortcuts.d.ts

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

ts/editor-toolbar/WithShortcuts.svelte

@@ -10,7 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { registerShortcut } from "anki/shortcuts";
 
     export let button: ToolbarItem;
-    export let shortcut: string;
+    export let shortcuts: string[];
 
     function extend({ ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
         return {
@@ -18,17 +18,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         };
     }
 
-    let deregister;
+    let deregister: (() => void)[];
 
     function createShortcut({ detail }: CustomEvent): void {
         const mounted: HTMLButtonElement = detail.button;
-        deregister = registerShortcut((event) => {
+        deregisters = shortcuts.map((shortcut: string): (() => void) =>
-            mounted.dispatchEvent(new MouseEvent("click"));
+            registerShortcut((event) => {
-            event.preventDefault();
+                mounted.dispatchEvent(new MouseEvent("click"));
-        }, shortcut);
+                event.preventDefault();
+            }, shortcut)
+        );
     }
 
-    onDestroy(() => deregister());
+    onDestroy(() => deregisters.map((dereg) => dereg()));
 </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 WithShortcut from "./WithShortcut.svelte";
+import WithShortcuts from "./WithShortcuts.svelte";
-import type { WithShortcutProps } from "./WithShortcut";
+import type { WithShortcutsProps } from "./WithShortcuts";
 
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 
@@ -59,6 +59,6 @@ export const withDropdownMenu = dynamicComponent<
     WithDropdownMenuProps
 >(WithDropdownMenu);
 
-export const withShortcut = dynamicComponent<typeof WithShortcut, WithShortcutProps>(
+export const withShortcuts = dynamicComponent<typeof WithShortcuts, WithShortcutsProps>(
-    WithShortcut
+    WithShortcuts
 );

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 IconButton from "editor-toolbar/IconButton.svelte";
+import type WithShortcuts from "editor-toolbar/WithShortcuts.svelte";
-import type { IconButtonProps } from "editor-toolbar/IconButton";
+import type { WithShortcutsProps } from "editor-toolbar/WithShortcuts";
 import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
 import * as tr from "anki/i18n";
-import { iconButton } from "editor-toolbar/dynamicComponents";
+import { iconButton, withShortcuts } from "editor-toolbar/dynamicComponents";
 
 import bracketsIcon from "./code-brackets.svg";
 
@@ -40,12 +40,15 @@ function onCloze(event: MouseEvent): void {
     wrap(`{{c${highestCloze}::`, "}}");
 }
 
-export function getClozeButton(): DynamicSvelteComponent<typeof IconButton> &
+export function getClozeButton(): DynamicSvelteComponent<typeof WithShortcuts> &
-    IconButtonProps {
+    WithShortcutsProps {
-    return iconButton({
+    return withShortcuts({
-        id: "cloze",
+        shortcuts: ["Control+Shift+KeyC", "Control+Alt+Shift+KeyC"],
-        icon: bracketsIcon,
+        button: iconButton({
-        onClick: onCloze,
+            id: "cloze",
-        tooltip: tr.editingClozeDeletionCtrlandshiftandc(),
+            icon: bracketsIcon,
+            onClick: onCloze,
+            tooltip: tr.editingClozeDeletionCtrlandshiftandc(),
+        }),
     });
 }

ts/editor/color.ts

@@ -4,7 +4,12 @@ import type ButtonGroup from "editor-toolbar/ButtonGroup.svelte";
 import type { ButtonGroupProps } from "editor-toolbar/ButtonGroup";
 import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
-import { iconButton, colorPicker, buttonGroup } from "editor-toolbar/dynamicComponents";
+import {
+    iconButton,
+    colorPicker,
+    buttonGroup,
+    withShortcuts,
+} from "editor-toolbar/dynamicComponents";
 import * as tr from "anki/i18n";
 
 import squareFillIcon from "./square-fill.svg";
@@ -26,17 +31,23 @@ function wrapWithForecolor(color: string): void {
 
 export function getColorGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
-    const forecolorButton = iconButton({
+    const forecolorButton = withShortcuts({
-        icon: squareFillIcon,
+        shortcuts: ["F7"],
-        className: "forecolor",
+        button: iconButton({
-        onClick: () => wrapWithForecolor(getForecolor()),
+            icon: squareFillIcon,
-        tooltip: tr.editingSetForegroundColourF7(),
+            className: "forecolor",
+            onClick: () => wrapWithForecolor(getForecolor()),
+            tooltip: tr.editingSetForegroundColourF7(),
+        }),
     });
 
-    const colorpickerButton = colorPicker({
+    const colorpickerButton = withShortcuts({
-        onChange: ({ currentTarget }) =>
+        shortcuts: ["F8"],
-            setForegroundColor((currentTarget as HTMLInputElement).value),
+        button: colorPicker({
-        tooltip: tr.editingChangeColourF8(),
+            onChange: ({ currentTarget }) =>
+                setForegroundColor((currentTarget as HTMLInputElement).value),
+            tooltip: tr.editingChangeColourF8(),
+        }),
     });
 
     return buttonGroup({

ts/editor/formatInline.ts

@@ -9,7 +9,7 @@ import {
     commandIconButton,
     iconButton,
     buttonGroup,
-    withShortcut,
+    withShortcuts,
 } 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 = withShortcut({
+    const boldButton = withShortcuts({
-        shortcut: "Control+KeyB",
+        shortcuts: ["Control+KeyB"],
         button: commandIconButton({
             icon: boldIcon,
             tooltip: tr.editingBoldTextCtrlandb(),
@@ -30,8 +30,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
         }),
     });
 
-    const italicButton = withShortcut({
+    const italicButton = withShortcuts({
-        shortcut: "Control+KeyI",
+        shortcuts: ["Control+KeyI"],
         button: commandIconButton({
             icon: italicIcon,
             tooltip: tr.editingItalicTextCtrlandi(),
@@ -39,8 +39,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
         }),
     });
 
-    const underlineButton = withShortcut({
+    const underlineButton = withShortcuts({
-        shortcut: "Control+KeyU",
+        shortcuts: ["Control+KeyU"],
         button: commandIconButton({
             icon: underlineIcon,
             tooltip: tr.editingUnderlineTextCtrlandu(),
@@ -48,20 +48,26 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
         }),
     });
 
-    const superscriptButton = commandIconButton({
+    const superscriptButton = withShortcuts({
-        icon: superscriptIcon,
+        shortcuts: ["Control+Shift+Equal"],
-        tooltip: tr.editingSuperscriptCtrlandand(),
+        button: commandIconButton({
-        command: "superscript",
+            icon: superscriptIcon,
+            tooltip: tr.editingSuperscriptCtrlandand(),
+            command: "superscript",
+        }),
     });
 
-    const subscriptButton = commandIconButton({
+    const subscriptButton = withShortcuts({
-        icon: subscriptIcon,
+        shortcuts: ["Control+Equal"],
-        tooltip: tr.editingSubscriptCtrland(),
+        button: commandIconButton({
-        command: "subscript",
+            icon: subscriptIcon,
+            tooltip: tr.editingSubscriptCtrland(),
+            command: "subscript",
+        }),
     });
 
-    const removeFormatButton = withShortcut({
+    const removeFormatButton = withShortcuts({
-        shortcut: "Control+KeyR",
+        shortcuts: ["Control+KeyR"],
         button: iconButton({
             icon: eraserIcon,
             tooltip: tr.editingRemoveFormattingCtrlandr(),

ts/editor/template.ts

@@ -13,6 +13,7 @@ import {
     dropdownMenu,
     dropdownItem,
     buttonGroup,
+    withShortcuts,
 } from "editor-toolbar/dynamicComponents";
 import * as tr from "anki/i18n";
 
@@ -41,21 +42,26 @@ const mathjaxMenuId = "mathjaxMenu";
 
 export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
-    const attachmentButton = iconButton({
+    const attachmentButton = withShortcuts({
-        icon: paperclipIcon,
+        shortcuts: ["F3"],
-        onClick: onAttachment,
+        button: iconButton({
-        tooltip: tr.editingAttachPicturesaudiovideoF3(),
+            icon: paperclipIcon,
+            onClick: onAttachment,
+            tooltip: tr.editingAttachPicturesaudiovideoF3(),
+        }),
     });
 
-    const recordButton = iconButton({
+    const recordButton = withShortcuts({
-        icon: micIcon,
+        shortcuts: ["F5"],
-        onClick: onRecord,
+        button: iconButton({
-        tooltip: tr.editingRecordAudioF5(),
+            icon: micIcon,
+            onClick: onRecord,
+            tooltip: tr.editingRecordAudioF5(),
+        }),
     });
 
     const mathjaxButton = iconButton({
         icon: functionIcon,
-        foo: 5,
     });
 
     const mathjaxButtonWithMenu = withDropdownMenu({
@@ -63,10 +69,13 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
         menuId: mathjaxMenuId,
     });
 
-    const htmlButton = iconButton({
+    const htmlButton = withShortcuts({
-        icon: xmlIcon,
+        shortcuts: ["Control+Shift+KeyX"],
-        onClick: onHtmlEdit,
+        button: iconButton({
-        tooltip: tr.editingHtmlEditor,
+            icon: xmlIcon,
+            onClick: onHtmlEdit,
+            tooltip: tr.editingHtmlEditor(),
+        }),
     });
 
     return buttonGroup({