diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index b78025274..144dc8817 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/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}
diff --git a/ts/editor-toolbar/DropdownItem.svelte b/ts/editor-toolbar/DropdownItem.svelte
index 21cce2d19..e9d494926 100644
--- a/ts/editor-toolbar/DropdownItem.svelte
+++ b/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);
@@ -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>
- {label}
- {#if endLabel}{endLabel}{/if}
+ {label}
+ {#if shortcutLabel}{shortcutLabel}{/if}
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index 849b33575..b01ceb4e7 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/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;
-
+
{@html icon}
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 0b838ce2e..1de49442c 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/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>
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index f0fc17e1b..ae0ac2bdb 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/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}
diff --git a/ts/editor-toolbar/WithShortcuts.svelte b/ts/editor-toolbar/WithShortcuts.svelte
index b7c3e4624..547e3d9b7 100644
--- a/ts/editor-toolbar/WithShortcuts.svelte
+++ b/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({
- tooltip,
- ...rest
- }: DynamicSvelteComponent): DynamicSvelteComponent {
- const platformShortcut = getPlatformString(shortcuts[0]);
-
- if (tooltip) {
- tooltip = `${tooltip} (${platformShortcut})`;
- }
+ function extend({ ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
+ const shortcutLabel = getPlatformString(shortcuts[0]);
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"));
diff --git a/ts/editor-toolbar/helpers.ts b/ts/editor-toolbar/helpers.ts
new file mode 100644
index 000000000..33fa31bec
--- /dev/null
+++ b/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;
+}
diff --git a/ts/editor/notetype.ts b/ts/editor/notetype.ts
index 4978aeea9..5192c97fe 100644
--- a/ts/editor/notetype.ts
+++ b/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 &
ButtonGroupProps {
@@ -17,11 +21,14 @@ export function getNotetypeGroup(): DynamicSvelteComponent &
tooltip: tr.editingCustomizeFields(),
});
- const cardsButton = labelButton({
- onClick: () => bridgeCommand("cards"),
- disables: false,
- label: `${tr.editingCards()}...`,
- tooltip: tr.editingCustomizeCardTemplates(),
+ const cardsButton = withShortcuts({
+ shortcuts: ["Control+KeyL"],
+ button: labelButton({
+ onClick: () => bridgeCommand("cards"),
+ disables: false,
+ label: `${tr.editingCards()}...`,
+ tooltip: tr.editingCustomizeCardTemplates(),
+ }),
});
return buttonGroup({
diff --git a/ts/editor/template.ts b/ts/editor/template.ts
index b31ebb377..ba1dff07d 100644
--- a/ts/editor/template.ts
+++ b/ts/editor/template.ts
@@ -47,7 +47,7 @@ export function getTemplateGroup(): DynamicSvelteComponent &
button: iconButton({
icon: paperclipIcon,
onClick: onAttachment,
- tooltip: tr.editingAttachPicturesaudiovideoF3(),
+ tooltip: tr.editingAttachPicturesaudiovideo(),
}),
});
@@ -56,7 +56,7 @@ export function getTemplateGroup(): DynamicSvelteComponent &
button: iconButton({
icon: micIcon,
onClick: onRecord,
- tooltip: tr.editingRecordAudioF5(),
+ tooltip: tr.editingRecordAudio(),
}),
});
@@ -93,20 +93,26 @@ export function getTemplateGroup(): DynamicSvelteComponent &
export function getTemplateMenus(): (DynamicSvelteComponent &
DropdownMenuProps)[] {
const mathjaxMenuItems = [
- dropdownItem({
- onClick: () => wrap("\\(", "\\)"),
- label: tr.editingMathjaxInline(),
- endLabel: "Ctrl+M, M",
+ withShortcuts({
+ shortcuts: ["Control+KeyM, KeyM"],
+ button: dropdownItem({
+ onClick: () => wrap("\\(", "\\)"),
+ label: tr.editingMathjaxInline(),
+ }),
}),
- dropdownItem({
- onClick: () => wrap("\\[", "\\]"),
- label: tr.editingMathjaxBlock(),
- endLabel: "Ctrl+M, E",
+ withShortcuts({
+ shortcuts: ["Control+KeyM, KeyE"],
+ button: dropdownItem({
+ onClick: () => wrap("\\[", "\\]"),
+ label: tr.editingMathjaxBlock(),
+ }),
}),
- dropdownItem({
- onClick: () => wrap("\\(\\ce{", "}\\)"),
- label: tr.editingMathjaxChemistry(),
- endLabel: "Ctrl+M, C",
+ withShortcuts({
+ shortcuts: ["Control+KeyM, KeyC"],
+ button: dropdownItem({
+ onClick: () => wrap("\\(\\ce{", "}\\)"),
+ label: tr.editingMathjaxChemistry(),
+ }),
}),
];