From ae19ed527d8596b8a44980a86edb517785cdf11c Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 20 May 2021 18:28:59 +0200
Subject: [PATCH] Switch to keyboard shortcuts based on event.key

---
 ts/components/WithShortcut.svelte     |  2 +-
 ts/deckoptions/DeckOptionsPage.svelte |  4 +++-
 ts/deckoptions/deckoptions-base.scss  |  2 +-
 ts/editor/ClozeButton.svelte          |  2 +-
 ts/editor/ColorButtons.svelte         |  4 ++--
 ts/editor/FormatInlineButtons.svelte  | 27 +++++++++++++++++++++------
 ts/editor/NoteTypeButtons.svelte      |  5 ++++-
 ts/editor/PreviewButton.svelte        |  5 ++++-
 ts/editor/TemplateButtons.svelte      | 18 +++++++++---------
 ts/editor/inputHandlers.ts            |  2 +-
 ts/lib/shortcuts.ts                   | 15 ++++-----------
 11 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/ts/components/WithShortcut.svelte b/ts/components/WithShortcut.svelte
index 75c019435..3f753fa91 100644
--- a/ts/components/WithShortcut.svelte
+++ b/ts/components/WithShortcut.svelte
@@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { onDestroy } from "svelte";
     import { registerShortcut, getPlatformString } from "lib/shortcuts";
 
-    export let shortcut: string;
+    export let shortcut: string[][];
     export let optionalModifiers: Modifier[] | undefined = [];
 
     const shortcutLabel = getPlatformString(shortcut);
diff --git a/ts/deckoptions/DeckOptionsPage.svelte b/ts/deckoptions/DeckOptionsPage.svelte
index 809c93bda..63d92127f 100644
--- a/ts/deckoptions/DeckOptionsPage.svelte
+++ b/ts/deckoptions/DeckOptionsPage.svelte
@@ -36,7 +36,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let registerCleanup: () => void;
     onMount(() => {
-        registerCleanup = registerShortcut(() => state.save(false), "Control+Enter");
+        registerCleanup = registerShortcut(() => state.save(false), [
+            ["Control", "Enter"],
+        ]);
     });
     onDestroy(() => registerCleanup?.());
 </script>
diff --git a/ts/deckoptions/deckoptions-base.scss b/ts/deckoptions/deckoptions-base.scss
index e8a1dd920..ead0dbf6f 100644
--- a/ts/deckoptions/deckoptions-base.scss
+++ b/ts/deckoptions/deckoptions-base.scss
@@ -51,5 +51,5 @@ code {
 
 // override the default down arrow colour in <select> elements
 .night-mode select {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
 }
diff --git a/ts/editor/ClozeButton.svelte b/ts/editor/ClozeButton.svelte
index 2db076744..e8a4d2add 100644
--- a/ts/editor/ClozeButton.svelte
+++ b/ts/editor/ClozeButton.svelte
@@ -42,7 +42,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <WithShortcut
-    shortcut="Control+Shift+KeyC"
+    shortcut={[['Control', 'Shift', 'C']]}
     optionalModifiers={['Alt']}
     let:createShortcut
     let:shortcutLabel>
diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index 73a0e22e8..b6f791059 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -36,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <ButtonGroup {api}>
     <ButtonGroupItem>
-        <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
+        <WithShortcut shortcut={[['F7']]} let:createShortcut let:shortcutLabel>
             <IconButton
                 class="forecolor"
                 tooltip={appendInParentheses(tr.editingSetForegroundColor(), shortcutLabel)}
@@ -48,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
+        <WithShortcut shortcut={[['F8']]} let:createShortcut let:shortcutLabel>
             <ColorPicker
                 tooltip={appendInParentheses(tr.editingChangeColor(), shortcutLabel)}
                 on:change={setWithCurrentColor}
diff --git a/ts/editor/FormatInlineButtons.svelte b/ts/editor/FormatInlineButtons.svelte
index f09e11da7..eab725899 100644
--- a/ts/editor/FormatInlineButtons.svelte
+++ b/ts/editor/FormatInlineButtons.svelte
@@ -26,7 +26,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <ButtonGroup {api}>
     <ButtonGroupItem>
-        <WithShortcut shortcut="Control+KeyB" let:createShortcut let:shortcutLabel>
+        <WithShortcut
+            shortcut={[['Control', 'b']]}
+            let:createShortcut
+            let:shortcutLabel>
             <WithState
                 key="bold"
                 update={() => document.queryCommandState('bold')}
@@ -47,7 +50,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut="Control+KeyI" let:createShortcut let:shortcutLabel>
+        <WithShortcut
+            shortcut={[['Control', 'i']]}
+            let:createShortcut
+            let:shortcutLabel>
             <WithState
                 key="italic"
                 update={() => document.queryCommandState('italic')}
@@ -68,7 +74,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut="Control+KeyU" let:createShortcut let:shortcutLabel>
+        <WithShortcut
+            shortcut={[['Control', 'u']]}
+            let:createShortcut
+            let:shortcutLabel>
             <WithState
                 key="underline"
                 update={() => document.queryCommandState('underline')}
@@ -90,7 +99,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <ButtonGroupItem>
         <WithShortcut
-            shortcut="Control+Shift+Equal"
+            shortcut={[['Control', '+']]}
             let:createShortcut
             let:shortcutLabel>
             <WithState
@@ -113,7 +122,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut="Control+Equal" let:createShortcut let:shortcutLabel>
+        <WithShortcut
+            shortcut={[['Control', '=']]}
+            let:createShortcut
+            let:shortcutLabel>
             <WithState
                 key="subscript"
                 update={() => document.queryCommandState('subscript')}
@@ -134,7 +146,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
+        <WithShortcut
+            shortcut={[['Control', 'r']]}
+            let:createShortcut
+            let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingRemoveFormatting(), shortcutLabel)}
                 on:click={() => {
diff --git a/ts/editor/NoteTypeButtons.svelte b/ts/editor/NoteTypeButtons.svelte
index 6df705e3b..e44212385 100644
--- a/ts/editor/NoteTypeButtons.svelte
+++ b/ts/editor/NoteTypeButtons.svelte
@@ -25,7 +25,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut="Control+KeyL" let:createShortcut let:shortcutLabel>
+        <WithShortcut
+            shortcut={[['Control', 'l']]}
+            let:createShortcut
+            let:shortcutLabel>
             <LabelButton
                 disables={false}
                 tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
diff --git a/ts/editor/PreviewButton.svelte b/ts/editor/PreviewButton.svelte
index c82a45bcf..4ff090693 100644
--- a/ts/editor/PreviewButton.svelte
+++ b/ts/editor/PreviewButton.svelte
@@ -10,7 +10,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import LabelButton from "components/LabelButton.svelte";
 </script>
 
-<WithShortcut shortcut="Control+Shift+KeyP" let:createShortcut let:shortcutLabel>
+<WithShortcut
+    shortcut={[['Control', 'Shift', 'P']]}
+    let:createShortcut
+    let:shortcutLabel>
     <LabelButton
         tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
         disables={false}
diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte
index eb88d2473..621905a31 100644
--- a/ts/editor/TemplateButtons.svelte
+++ b/ts/editor/TemplateButtons.svelte
@@ -36,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <ButtonGroup {api}>
     <ButtonGroupItem>
-        <WithShortcut shortcut="F3" let:createShortcut let:shortcutLabel>
+        <WithShortcut shortcut={[['F3']]} let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingAttachPicturesaudiovideo(), shortcutLabel)}
                 on:click={onAttachment}
@@ -47,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
+        <WithShortcut shortcut={[['F5']]} let:createShortcut let:shortcutLabel>
             <IconButton
                 tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
                 on:click={onRecord}
@@ -69,7 +69,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
             <DropdownMenu id={menuId}>
                 <WithShortcut
-                    shortcut="Control+KeyM, KeyM"
+                    shortcut={[['Control', 'm'], ['m']]}
                     let:createShortcut
                     let:shortcutLabel>
                     <DropdownItem
@@ -81,7 +81,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </WithShortcut>
 
                 <WithShortcut
-                    shortcut="Control+KeyM, KeyE"
+                    shortcut={[['Control', 'm'], ['e']]}
                     let:createShortcut
                     let:shortcutLabel>
                     <DropdownItem
@@ -93,7 +93,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </WithShortcut>
 
                 <WithShortcut
-                    shortcut="Control+KeyM, KeyC"
+                    shortcut={[['Control', 'm'], ['c']]}
                     let:createShortcut
                     let:shortcutLabel>
                     <DropdownItem
@@ -105,7 +105,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </WithShortcut>
 
                 <WithShortcut
-                    shortcut="Control+KeyT, KeyT"
+                    shortcut={[['Control', 't'], ['t']]}
                     let:createShortcut
                     let:shortcutLabel>
                     <DropdownItem
@@ -117,7 +117,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </WithShortcut>
 
                 <WithShortcut
-                    shortcut="Control+KeyT, KeyE"
+                    shortcut={[['Control', 't'], ['e']]}
                     let:createShortcut
                     let:shortcutLabel>
                     <DropdownItem
@@ -129,7 +129,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 </WithShortcut>
 
                 <WithShortcut
-                    shortcut="Control+KeyT, KeyM"
+                    shortcut={[['Control', 't'], ['m']]}
                     let:createShortcut
                     let:shortcutLabel>
                     <DropdownItem
@@ -145,7 +145,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <ButtonGroupItem>
         <WithShortcut
-            shortcut="Control+Shift+KeyX"
+            shortcut={[['Control', 'Shift', 'X']]}
             let:createShortcut
             let:shortcutLabel>
             <IconButton
diff --git a/ts/editor/inputHandlers.ts b/ts/editor/inputHandlers.ts
index 88ccf76f3..63ea98c16 100644
--- a/ts/editor/inputHandlers.ts
+++ b/ts/editor/inputHandlers.ts
@@ -66,7 +66,7 @@ function updateFocus(evt: FocusEvent) {
 
 registerShortcut(
     () => document.addEventListener("focusin", updateFocus, { once: true }),
-    "Tab",
+    [["Tab"]],
     ["Shift"]
 );
 
diff --git a/ts/lib/shortcuts.ts b/ts/lib/shortcuts.ts
index 00ee2df7a..5c83f2efa 100644
--- a/ts/lib/shortcuts.ts
+++ b/ts/lib/shortcuts.ts
@@ -18,10 +18,6 @@ const platformModifiers = isApplePlatform()
     ? ["Meta", "Alt", "Shift", "Control"]
     : ["Control", "Alt", "Shift", "OS"];
 
-function splitKeyCombinationString(keyCombinationString: string): string[][] {
-    return keyCombinationString.split(", ").map((segment) => segment.split("+"));
-}
-
 function modifiersToPlatformString(modifiers: string[]): string {
     const displayModifiers = isApplePlatform()
         ? ["^", "⌥", "⇧", "⌘"]
@@ -70,14 +66,12 @@ function toPlatformString(modifiersAndKey: string[]): string {
     )}${keyToPlatformString(modifiersAndKey[modifiersAndKey.length - 1])}`;
 }
 
-export function getPlatformString(keyCombinationString: string): string {
-    return splitKeyCombinationString(keyCombinationString)
-        .map(toPlatformString)
-        .join(", ");
+export function getPlatformString(keyCombination: string[][]): string {
+    return keyCombination.map(toPlatformString).join(", ");
 }
 
 function checkKey(event: KeyboardEvent, key: string): boolean {
-    return event.code === key;
+    return event.key === key;
 }
 
 function checkModifiers(
@@ -139,10 +133,9 @@ function innerShortcut(
 
 export function registerShortcut(
     callback: (event: KeyboardEvent) => void,
-    keyCombinationString: string,
+    keyCombination: string[][],
     optionalModifiers: Modifier[] = []
 ): () => void {
-    const keyCombination = splitKeyCombinationString(keyCombinationString);
     const [firstKey, ...restKeys] = keyCombination;
 
     const handler = (event: KeyboardEvent): void => {