Add first shortcuts for bold, italic, underline, removeFormat

qt/aqt/editor.py

@@ -312,12 +312,8 @@ $editorToolbar.addButtonGroup({{
         # if a third element is provided, enable shortcut even when no field selected
         cuts: List[Tuple] = [
             ("Ctrl+L", self.onCardLayout, True),
-            ("Ctrl+B", self.toggleBold),
-            ("Ctrl+I", self.toggleItalic),
-            ("Ctrl+U", self.toggleUnderline),
             ("Ctrl++", self.toggleSuper),
             ("Ctrl+=", self.toggleSub),
-            ("Ctrl+R", self.removeFormat),
             ("F7", self.onForeground),
             ("F8", self.onChangeCol),
             ("Ctrl+Shift+C", self.onCloze),

ts/editor-toolbar/WithShortcut.svelte

@@ -21,8 +21,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let deregister;
 
     function createShortcut({ detail }: CustomEvent): void {
-        const button: HTMLButtonElement = detail.button;
-        deregister = registerShortcut(() => button.click(), shortcut);
+        const mounted: HTMLButtonElement = detail.button;
+        deregister = registerShortcut((event) => {
+            mounted.dispatchEvent(new MouseEvent("click"));
+            event.preventDefault();
+        }, shortcut);
     }
 
     onDestroy(() => deregister());

ts/editor-toolbar/dynamicComponents.ts

@@ -20,6 +20,9 @@ import type { DropdownItemProps } from "./DropdownItem";
 import WithDropdownMenu from "./WithDropdownMenu.svelte";
 import type { WithDropdownMenuProps } from "./WithDropdownMenu";
 
+import WithShortcut from "./WithShortcut.svelte";
+import type { WithShortcutProps } from "./WithShortcut";
+
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 
 export const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>(
@@ -55,3 +58,7 @@ export const withDropdownMenu = dynamicComponent<
     typeof WithDropdownMenu,
     WithDropdownMenuProps
 >(WithDropdownMenu);
+
+export const withShortcut = dynamicComponent<typeof WithShortcut, WithShortcutProps>(
+    WithShortcut
+);

ts/editor/formatInline.ts

@@ -9,6 +9,7 @@ import {
     commandIconButton,
     iconButton,
     buttonGroup,
+    withShortcut,
 } from "editor-toolbar/dynamicComponents";
 
 import boldIcon from "./type-bold.svg";
@@ -20,22 +21,31 @@ import eraserIcon from "./eraser.svg";
 
 export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
-    const boldButton = commandIconButton({
-        icon: boldIcon,
-        tooltip: tr.editingBoldTextCtrlandb(),
-        command: "bold",
+    const boldButton = withShortcut({
+        shortcut: "Control+KeyB",
+        button: commandIconButton({
+            icon: boldIcon,
+            tooltip: tr.editingBoldTextCtrlandb(),
+            command: "bold",
+        }),
     });
 
-    const italicButton = commandIconButton({
-        icon: italicIcon,
-        tooltip: tr.editingItalicTextCtrlandi(),
-        command: "italic",
+    const italicButton = withShortcut({
+        shortcut: "Control+KeyI",
+        button: commandIconButton({
+            icon: italicIcon,
+            tooltip: tr.editingItalicTextCtrlandi(),
+            command: "italic",
+        }),
     });
 
-    const underlineButton = commandIconButton({
-        icon: underlineIcon,
-        tooltip: tr.editingUnderlineTextCtrlandu(),
-        command: "underline",
+    const underlineButton = withShortcut({
+        shortcut: "Control+KeyU",
+        button: commandIconButton({
+            icon: underlineIcon,
+            tooltip: tr.editingUnderlineTextCtrlandu(),
+            command: "underline",
+        }),
     });
 
     const superscriptButton = commandIconButton({
@@ -50,12 +60,15 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
         command: "subscript",
     });
 
-    const removeFormatButton = iconButton({
-        icon: eraserIcon,
-        tooltip: tr.editingRemoveFormattingCtrlandr(),
-        onClick: () => {
-            document.execCommand("removeFormat");
-        },
+    const removeFormatButton = withShortcut({
+        shortcut: "Control+KeyR",
+        button: iconButton({
+            icon: eraserIcon,
+            tooltip: tr.editingRemoveFormattingCtrlandr(),
+            onClick: () => {
+                document.execCommand("removeFormat");
+            },
+        }),
     });
 
     return buttonGroup({