From 47809f62301546e0b4cc22e8469306f47781bc95 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 22 Apr 2021 14:32:44 +0200
Subject: [PATCH] Add shortcut labels for ColorPicker and Latex items

---
 ts/editor-toolbar/ColorPicker.svelte  | 15 +++++++++++---
 ts/editor-toolbar/DropdownItem.svelte |  8 ++++++-
 ts/editor/template.ts                 | 30 ++++++++++++++++-----------
 ts/lib/shortcuts.ts                   |  2 +-
 4 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index f491531c8..c722ba232 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -3,12 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { getContext } from "svelte";
+    import { onMount, createEventDispatcher, getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
+    import { mergeTooltipAndShortcut } from "./helpers";
 
     export let id: string;
     export let className = "";
-    export let tooltip: string;
+    export let tooltip: string | undefined;
+    export let shortcutLabel: string | undefined;
+
+    $: title = mergeTooltipAndShortcut(tooltip, shortcutLabel);
 
     export let onChange: (event: Event) => void;
 
@@ -18,11 +22,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     const nightMode = getContext(nightModeKey);
 
+    let buttonRef: HTMLButtonElement;
     let inputRef: HTMLInputElement;
 
     function delegateToInput() {
         inputRef.click();
     }
+
+    const dispatch = createEventDispatcher();
+    onMount(() => dispatch("mount", { button: buttonRef }));
 </script>
 
 <style lang="scss">
@@ -57,12 +65,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </style>
 
 <button
+    bind:this={buttonRef}
     tabindex="-1"
     {id}
     class={extendClassName(className)}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
-    title={tooltip}
+    {title}
     on:click={delegateToInput}
     on:mousedown|preventDefault>
     <input bind:this={inputRef} type="color" on:change={onChange} />
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index e9d494926..6ea252f92 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/ts/editor-toolbar/DropdownItem.svelte
@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import { getContext } from "svelte";
+    import { onMount, createEventDispatcher, getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
 
     export let id: string;
@@ -14,7 +14,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let onClick: (event: MouseEvent) => void;
 
+    let buttonRef: HTMLButtonElement;
+
     const nightMode = getContext(nightModeKey);
+
+    const dispatch = createEventDispatcher();
+    onMount(() => dispatch("mount", { button: buttonRef }));
 </script>
 
 <style lang="scss">
@@ -60,6 +65,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <button
     {id}
+    bind:this={buttonRef}
     class={`btn dropdown-item ${className}`}
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
diff --git a/ts/editor/template.ts b/ts/editor/template.ts
index ba1dff07d..d1189dd76 100644
--- a/ts/editor/template.ts
+++ b/ts/editor/template.ts
@@ -117,20 +117,26 @@ export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu>
     ];
 
     const latexMenuItems = [
-        dropdownItem({
-            onClick: () => wrap("[latex]", "[/latex]"),
-            label: tr.editingLatex(),
-            endLabel: "Ctrl+T, T",
+        withShortcuts({
+            shortcuts: ["Control+KeyT, KeyT"],
+            button: dropdownItem({
+                onClick: () => wrap("[latex]", "[/latex]"),
+                label: tr.editingLatex(),
+            }),
         }),
-        dropdownItem({
-            onClick: () => wrap("[$]", "[/$]"),
-            label: tr.editingLatexEquation(),
-            endLabel: "Ctrl+T, E",
+        withShortcuts({
+            shortcuts: ["Control+KeyT, KeyE"],
+            button: dropdownItem({
+                onClick: () => wrap("[$]", "[/$]"),
+                label: tr.editingLatexEquation(),
+            }),
         }),
-        dropdownItem({
-            onClick: () => wrap("[$$]", "[/$$]"),
-            label: tr.editingLatexMathEnv(),
-            endLabel: "Ctrl+T, M",
+        withShortcuts({
+            shortcuts: ["Control+KeyT, KeyM"],
+            button: dropdownItem({
+                onClick: () => wrap("[$$]", "[/$$]"),
+                label: tr.editingLatexMathEnv(),
+            }),
         }),
     ];
 
diff --git a/ts/lib/shortcuts.ts b/ts/lib/shortcuts.ts
index f6f292d69..4d3ab87f6 100644
--- a/ts/lib/shortcuts.ts
+++ b/ts/lib/shortcuts.ts
@@ -86,7 +86,7 @@ function check(event: KeyboardEvent, modifiersAndKey: string[]): boolean {
     );
 }
 
-const shortcutTimeoutMs = 350;
+const shortcutTimeoutMs = 400;
 
 function innerShortcut(
     lastEvent: KeyboardEvent,