Add shortcut labels for ColorPicker and Latex items

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} />

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}

ts/editor/template.ts

@@ -117,20 +117,26 @@ export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu>
     ];
 
     const latexMenuItems = [
-        dropdownItem({
+        withShortcuts({
-            onClick: () => wrap("[latex]", "[/latex]"),
+            shortcuts: ["Control+KeyT, KeyT"],
-            label: tr.editingLatex(),
+            button: dropdownItem({
-            endLabel: "Ctrl+T, T",
+                onClick: () => wrap("[latex]", "[/latex]"),
+                label: tr.editingLatex(),
+            }),
         }),
-        dropdownItem({
+        withShortcuts({
-            onClick: () => wrap("[$]", "[/$]"),
+            shortcuts: ["Control+KeyT, KeyE"],
-            label: tr.editingLatexEquation(),
+            button: dropdownItem({
-            endLabel: "Ctrl+T, E",
+                onClick: () => wrap("[$]", "[/$]"),
+                label: tr.editingLatexEquation(),
+            }),
         }),
-        dropdownItem({
+        withShortcuts({
-            onClick: () => wrap("[$$]", "[/$$]"),
+            shortcuts: ["Control+KeyT, KeyM"],
-            label: tr.editingLatexMathEnv(),
+            button: dropdownItem({
-            endLabel: "Ctrl+T, M",
+                onClick: () => wrap("[$$]", "[/$$]"),
+                label: tr.editingLatexMathEnv(),
+            }),
         }),
     ];
 

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,