From 85f89dc111036f28a65ef714d8d0f192e695d98d Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 22 Apr 2021 02:36:54 +0200
Subject: [PATCH] Add first shortcuts for bold, italic, underline, removeFormat

---
 qt/aqt/editor.py                       |  4 ---
 ts/editor-toolbar/WithShortcut.svelte  |  7 ++--
 ts/editor-toolbar/dynamicComponents.ts |  7 ++++
 ts/editor/formatInline.ts              | 49 ++++++++++++++++----------
 4 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 420653512..64f12bfbb 100644
--- a/qt/aqt/editor.py
+++ b/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),
diff --git a/ts/editor-toolbar/WithShortcut.svelte b/ts/editor-toolbar/WithShortcut.svelte
index bbc5e9cba..fdf30456f 100644
--- a/ts/editor-toolbar/WithShortcut.svelte
+++ b/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());
diff --git a/ts/editor-toolbar/dynamicComponents.ts b/ts/editor-toolbar/dynamicComponents.ts
index 72fc9de30..5774421b6 100644
--- a/ts/editor-toolbar/dynamicComponents.ts
+++ b/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
+);
diff --git a/ts/editor/formatInline.ts b/ts/editor/formatInline.ts
index 09d8ee3b9..3052e1066 100644
--- a/ts/editor/formatInline.ts
+++ b/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({