Add better better shortcutLabel support for buttons

ts/editor-toolbar/CommandIconButton.svelte

@@ -48,6 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string;
     export let className = "";
     export let tooltip: string;
+    export let shortcutLabel: string | undefined;
     export let icon: string;
 
     export let command: string;
@@ -80,6 +81,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {id}
     {className}
     {tooltip}
+    {shortcutLabel}
     {active}
     {disables}
     {dropdownToggle}

ts/editor-toolbar/DropdownItem.svelte

@@ -9,10 +9,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string;
     export let className = "";
     export let tooltip: string;
+    export let label: string;
+    export let shortcutLabel: string | undefined;
 
     export let onClick: (event: MouseEvent) => void;
-    export let label: string;
-    export let endLabel: string;
 
     const nightMode = getContext(nightModeKey);
 </script>
@@ -66,6 +66,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     title={tooltip}
     on:click={onClick}
     on:mousedown|preventDefault>
-    <span class:me-3={endLabel}>{label}</span>
+    <span class:me-3={shortcutLabel}>{label}</span>
-    {#if endLabel}<span class="monospace">{endLabel}</span>{/if}
+    {#if shortcutLabel}<span class="monospace">{shortcutLabel}</span>{/if}
 </button>

ts/editor-toolbar/IconButton.svelte

@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let id: string;
     export let className = "";
     export let tooltip: string;
+    export let shortcutLabel: string | undefined;
     export let icon: string;
 
     export let onClick: (event: MouseEvent) => void;
@@ -16,6 +17,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let dropdownToggle = false;
 </script>
 
-<SquareButton {id} {className} {tooltip} {onClick} {disables} {dropdownToggle} on:mount>
+<SquareButton
+    {id}
+    {className}
+    {tooltip}
+    {shortcutLabel}
+    {onClick}
+    {disables}
+    {dropdownToggle}
+    on:mount>
     {@html icon}
 </SquareButton>

ts/editor-toolbar/LabelButton.svelte

@@ -6,12 +6,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
+    import { mergeTooltipAndShortcut } from "./helpers";
 
     export let id: string;
     export let className = "";
-
+    export let tooltip: string | undefined;
+    export let shortcutLabel: string | undefined;
     export let label: string;
-    export let tooltip: string;
+
+    $: title = mergeTooltipAndShortcut(tooltip, shortcutLabel);
+
     export let onClick: (event: MouseEvent) => void;
     export let disables = true;
     export let dropdownToggle = false;
@@ -61,7 +65,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:btn-night={nightMode}
     tabindex="-1"
     disabled={_disabled}
-    title={tooltip}
+    {title}
     {...extraProps}
     on:click={onClick}
     on:mousedown|preventDefault>

ts/editor-toolbar/SquareButton.svelte

@@ -6,10 +6,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Readable } from "svelte/store";
     import { getContext, onMount, createEventDispatcher } from "svelte";
     import { disabledKey, 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 onClick: (event: MouseEvent) => void;
     export let active = false;
@@ -79,7 +83,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:btn-day={!nightMode}
     class:btn-night={nightMode}
     tabindex="-1"
-    title={tooltip}
+    {title}
     disabled={_disabled}
     {...extraProps}
     on:click={onClick}

ts/editor-toolbar/WithShortcuts.svelte

@@ -12,18 +12,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let button: ToolbarItem;
     export let shortcuts: string[];
 
-    function extend({
+    function extend({ ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
-        tooltip,
+        const shortcutLabel = getPlatformString(shortcuts[0]);
-        ...rest
-    }: DynamicSvelteComponent): DynamicSvelteComponent {
-        const platformShortcut = getPlatformString(shortcuts[0]);
-
-        if (tooltip) {
-            tooltip = `${tooltip} (${platformShortcut})`;
-        }
 
         return {
-            tooltip,
+            shortcutLabel,
             ...rest,
         };
     }
@@ -32,6 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     function createShortcut({ detail }: CustomEvent): void {
         const mounted: HTMLButtonElement = detail.button;
+        console.log(mounted);
         deregisters = shortcuts.map((shortcut: string): (() => void) =>
             registerShortcut((event) => {
                 mounted.dispatchEvent(new MouseEvent("click"));

ts/editor-toolbar/helpers.ts

@@ -0,0 +1,12 @@
+export function mergeTooltipAndShortcut(
+    tooltip: string | undefined,
+    shortcutLabel: string | undefined
+): string | undefined {
+    return tooltip
+        ? shortcutLabel
+            ? `${tooltip} (${shortcutLabel})`
+            : tooltip
+        : shortcutLabel
+        ? `(${shortcutLabel})`
+        : undefined;
+}

ts/editor/notetype.ts

@@ -6,7 +6,11 @@ import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
 import { bridgeCommand } from "anki/bridgecommand";
 import * as tr from "anki/i18n";
-import { labelButton, buttonGroup } from "editor-toolbar/dynamicComponents";
+import {
+    labelButton,
+    buttonGroup,
+    withShortcuts,
+} from "editor-toolbar/dynamicComponents";
 
 export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
     ButtonGroupProps {
@@ -17,11 +21,14 @@ export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
         tooltip: tr.editingCustomizeFields(),
     });
 
-    const cardsButton = labelButton({
+    const cardsButton = withShortcuts({
-        onClick: () => bridgeCommand("cards"),
+        shortcuts: ["Control+KeyL"],
-        disables: false,
+        button: labelButton({
-        label: `${tr.editingCards()}...`,
+            onClick: () => bridgeCommand("cards"),
-        tooltip: tr.editingCustomizeCardTemplates(),
+            disables: false,
+            label: `${tr.editingCards()}...`,
+            tooltip: tr.editingCustomizeCardTemplates(),
+        }),
     });
 
     return buttonGroup({

ts/editor/template.ts

@@ -47,7 +47,7 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
         button: iconButton({
             icon: paperclipIcon,
             onClick: onAttachment,
-            tooltip: tr.editingAttachPicturesaudiovideoF3(),
+            tooltip: tr.editingAttachPicturesaudiovideo(),
         }),
     });
 
@@ -56,7 +56,7 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
         button: iconButton({
             icon: micIcon,
             onClick: onRecord,
-            tooltip: tr.editingRecordAudioF5(),
+            tooltip: tr.editingRecordAudio(),
         }),
     });
 
@@ -93,20 +93,26 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
 export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu> &
     DropdownMenuProps)[] {
     const mathjaxMenuItems = [
-        dropdownItem({
+        withShortcuts({
-            onClick: () => wrap("\\(", "\\)"),
+            shortcuts: ["Control+KeyM, KeyM"],
-            label: tr.editingMathjaxInline(),
+            button: dropdownItem({
-            endLabel: "Ctrl+M, M",
+                onClick: () => wrap("\\(", "\\)"),
+                label: tr.editingMathjaxInline(),
+            }),
         }),
-        dropdownItem({
+        withShortcuts({
-            onClick: () => wrap("\\[", "\\]"),
+            shortcuts: ["Control+KeyM, KeyE"],
-            label: tr.editingMathjaxBlock(),
+            button: dropdownItem({
-            endLabel: "Ctrl+M, E",
+                onClick: () => wrap("\\[", "\\]"),
+                label: tr.editingMathjaxBlock(),
+            }),
         }),
-        dropdownItem({
+        withShortcuts({
-            onClick: () => wrap("\\(\\ce{", "}\\)"),
+            shortcuts: ["Control+KeyM, KeyC"],
-            label: tr.editingMathjaxChemistry(),
+            button: dropdownItem({
-            endLabel: "Ctrl+M, C",
+                onClick: () => wrap("\\(\\ce{", "}\\)"),
+                label: tr.editingMathjaxChemistry(),
+            }),
         }),
     ];