langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prefer optionalModifiers over register multiple shortcuts

Browse Source
This commit is contained in:
Henrik Giesel 2021-04-22 17:52:27 +02:00
parent 31e4b79ff4
commit 5197e3b779
9 changed files with 70 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ts/editor-toolbar/WithShortcuts.d.ts → ts/editor-toolbar/WithShortcut.d.ts vendored
View File

@ -2,7 +2,8 @@
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type { ToolbarItem } from "./types";
export interface WithShortcutsProps {
export interface WithShortcutProps {
button: ToolbarItem;
shortcuts: string[];
shortcut: string;
optionalModifiers: string[];
}

21
ts/editor-toolbar/WithShortcuts.svelte → ts/editor-toolbar/WithShortcut.svelte
View File

@ -7,13 +7,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type { ToolbarItem } from "./types";
import { onDestroy } from "svelte";
import { registerShortcut, getPlatformString } from "anki/shortcuts";
import { Modifier, registerShortcut, getPlatformString } from "anki/shortcuts";
export let button: ToolbarItem;
export let shortcuts: string[];
export let shortcut: string;
export let optionalModifiers: Modifier[];
function extend({ ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
const shortcutLabel = getPlatformString(shortcuts[0]);
const shortcutLabel = getPlatformString(shortcut);
return {
shortcutLabel,
@ -21,19 +22,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
};
}
let deregisters: (() => void)[];
let deregister: () => void;
function createShortcut({ detail }: CustomEvent): void {
const mounted: HTMLButtonElement = detail.button;
deregisters = shortcuts.map((shortcut: string): (() => void) =>
registerShortcut((event) => {
mounted.dispatchEvent(new MouseEvent("click"));
deregister = registerShortcut(
(event: KeyboardEvent) => {
mounted.dispatchEvent(new KeyboardEvent("click", event));
event.preventDefault();
}, shortcut)
},
shortcut,
optionalModifiers
);
}
onDestroy(() => deregisters.forEach((dereg: () => void): void => dereg()));
onDestroy(() => deregister());
</script>
<svelte:component

8
ts/editor-toolbar/dynamicComponents.ts
View File

@ -20,8 +20,8 @@ import type { DropdownItemProps } from "./DropdownItem";
import WithDropdownMenu from "./WithDropdownMenu.svelte";
import type { WithDropdownMenuProps } from "./WithDropdownMenu";
import WithShortcuts from "./WithShortcuts.svelte";
import type { WithShortcutsProps } from "./WithShortcuts";
import WithShortcut from "./WithShortcut.svelte";
import type { WithShortcutProps } from "./WithShortcut";
import { dynamicComponent } from "sveltelib/dynamicComponent";
@ -59,6 +59,6 @@ export const withDropdownMenu = dynamicComponent<
WithDropdownMenuProps
>(WithDropdownMenu);
export const withShortcuts = dynamicComponent<typeof WithShortcuts, WithShortcutsProps>(
WithShortcuts
export const withShortcut = dynamicComponent<typeof WithShortcut, WithShortcutProps>(
WithShortcut
);

19
ts/editor/cloze.ts
View File

@ -1,11 +1,11 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type WithShortcuts from "editor-toolbar/WithShortcuts.svelte";
import type { WithShortcutsProps } from "editor-toolbar/WithShortcuts";
import type WithShortcut from "editor-toolbar/WithShortcut.svelte";
import type { WithShortcutProps } from "editor-toolbar/WithShortcut";
import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
import * as tr from "anki/i18n";
import { iconButton, withShortcuts } from "editor-toolbar/dynamicComponents";
import { iconButton, withShortcut } from "editor-toolbar/dynamicComponents";
import bracketsIcon from "./code-brackets.svg";
@ -35,16 +35,17 @@ function getCurrentHighestCloze(increment: boolean): number {
return Math.max(1, highest);
}
function onCloze(event: MouseEvent): void {
const highestCloze = getCurrentHighestCloze(!event.altKey);
function onCloze(event: KeyboardEvent | MouseEvent): void {
const highestCloze = getCurrentHighestCloze(!event.getModifierState("Alt"));
wrap(`{{c${highestCloze}::`, "}}");
}
export function getClozeButton(): DynamicSvelteComponent<typeof WithShortcuts> &
WithShortcutsProps {
return withShortcuts({
export function getClozeButton(): DynamicSvelteComponent<typeof WithShortcut> &
WithShortcutProps {
return withShortcut({
id: "cloze",
shortcuts: ["Control+Shift+KeyC", "Control+Alt+Shift+KeyC"],
shortcut: "Control+Shift+KeyC",
optionalModifiers: ["Alt"],
button: iconButton({
icon: bracketsIcon,
onClick: onCloze,

10
ts/editor/color.ts
View File

@ -8,7 +8,7 @@ import {
iconButton,
colorPicker,
buttonGroup,
withShortcuts,
withShortcut,
} from "editor-toolbar/dynamicComponents";
import * as tr from "anki/i18n";
@ -31,8 +31,8 @@ function wrapWithForecolor(color: string): void {
export function getColorGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
ButtonGroupProps {
const forecolorButton = withShortcuts({
shortcuts: ["F7"],
const forecolorButton = withShortcut({
shortcut: "F7",
button: iconButton({
icon: squareFillIcon,
className: "forecolor",
@ -41,8 +41,8 @@ export function getColorGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
}),
});
const colorpickerButton = withShortcuts({
shortcuts: ["F8"],
const colorpickerButton = withShortcut({
shortcut: "F8",
button: colorPicker({
onChange: ({ currentTarget }) =>
setForegroundColor((currentTarget as HTMLInputElement).value),

26
ts/editor/formatInline.ts
View File

@ -9,7 +9,7 @@ import {
commandIconButton,
iconButton,
buttonGroup,
withShortcuts,
withShortcut,
} from "editor-toolbar/dynamicComponents";
import boldIcon from "./type-bold.svg";
@ -21,8 +21,8 @@ import eraserIcon from "./eraser.svg";
export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
ButtonGroupProps {
const boldButton = withShortcuts({
shortcuts: ["Control+KeyB"],
const boldButton = withShortcut({
shortcut: "Control+KeyB",
button: commandIconButton({
icon: boldIcon,
tooltip: tr.editingBoldText(),
@ -30,8 +30,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
}),
});
const italicButton = withShortcuts({
shortcuts: ["Control+KeyI"],
const italicButton = withShortcut({
shortcut: "Control+KeyI",
button: commandIconButton({
icon: italicIcon,
tooltip: tr.editingItalicText(),
@ -39,8 +39,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
}),
});
const underlineButton = withShortcuts({
shortcuts: ["Control+KeyU"],
const underlineButton = withShortcut({
shortcut: "Control+KeyU",
button: commandIconButton({
icon: underlineIcon,
tooltip: tr.editingUnderlineText(),
@ -48,8 +48,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
}),
});
const superscriptButton = withShortcuts({
shortcuts: ["Control+Shift+Equal"],
const superscriptButton = withShortcut({
shortcut: "Control+Shift+Equal",
button: commandIconButton({
icon: superscriptIcon,
tooltip: tr.editingSuperscript(),
@ -57,8 +57,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
}),
});
const subscriptButton = withShortcuts({
shortcuts: ["Control+Equal"],
const subscriptButton = withShortcut({
shortcut: "Control+Equal",
button: commandIconButton({
icon: subscriptIcon,
tooltip: tr.editingSubscript(),
@ -66,8 +66,8 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
}),
});
const removeFormatButton = withShortcuts({
shortcuts: ["Control+KeyR"],
const removeFormatButton = withShortcut({
shortcut: "Control+KeyR",
button: iconButton({
icon: eraserIcon,
tooltip: tr.editingRemoveFormatting(),

6
ts/editor/notetype.ts
View File

@ -9,7 +9,7 @@ import * as tr from "anki/i18n";
import {
labelButton,
buttonGroup,
withShortcuts,
withShortcut,
} from "editor-toolbar/dynamicComponents";
export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
@ -21,8 +21,8 @@ export function getNotetypeGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
tooltip: tr.editingCustomizeFields(),
});
const cardsButton = withShortcuts({
shortcuts: ["Control+KeyL"],
const cardsButton = withShortcut({
shortcut: "Control+KeyL",
button: labelButton({
onClick: () => bridgeCommand("cards"),
disables: false,

38
ts/editor/template.ts
View File

@ -13,7 +13,7 @@ import {
dropdownMenu,
dropdownItem,
buttonGroup,
withShortcuts,
withShortcut,
} from "editor-toolbar/dynamicComponents";
import * as tr from "anki/i18n";
@ -42,8 +42,8 @@ const mathjaxMenuId = "mathjaxMenu";
export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
ButtonGroupProps {
const attachmentButton = withShortcuts({
shortcuts: ["F3"],
const attachmentButton = withShortcut({
shortcut: "F3",
button: iconButton({
icon: paperclipIcon,
onClick: onAttachment,
@ -51,8 +51,8 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
}),
});
const recordButton = withShortcuts({
shortcuts: ["F5"],
const recordButton = withShortcut({
shortcut: "F5",
button: iconButton({
icon: micIcon,
onClick: onRecord,
@ -69,8 +69,8 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
menuId: mathjaxMenuId,
});
const htmlButton = withShortcuts({
shortcuts: ["Control+Shift+KeyX"],
const htmlButton = withShortcut({
shortcut: "Control+Shift+KeyX",
button: iconButton({
icon: xmlIcon,
onClick: onHtmlEdit,
@ -93,22 +93,22 @@ export function getTemplateGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu> &
DropdownMenuProps)[] {
const mathjaxMenuItems = [
withShortcuts({
shortcuts: ["Control+KeyM, KeyM"],
withShortcut({
shortcut: "Control+KeyM, KeyM",
button: dropdownItem({
onClick: () => wrap("\\(", "\\)"),
label: tr.editingMathjaxInline(),
}),
}),
withShortcuts({
shortcuts: ["Control+KeyM, KeyE"],
withShortcut({
shortcut: "Control+KeyM, KeyE",
button: dropdownItem({
onClick: () => wrap("\\[", "\\]"),
label: tr.editingMathjaxBlock(),
}),
}),
withShortcuts({
shortcuts: ["Control+KeyM, KeyC"],
withShortcut({
shortcut: "Control+KeyM, KeyC",
button: dropdownItem({
onClick: () => wrap("\\(\\ce{", "}\\)"),
label: tr.editingMathjaxChemistry(),
@ -117,22 +117,22 @@ export function getTemplateMenus(): (DynamicSvelteComponent<typeof DropdownMenu>
];
const latexMenuItems = [
withShortcuts({
shortcuts: ["Control+KeyT, KeyT"],
withShortcut({
shortcut: "Control+KeyT, KeyT",
button: dropdownItem({
onClick: () => wrap("[latex]", "[/latex]"),
label: tr.editingLatex(),
}),
}),
withShortcuts({
shortcuts: ["Control+KeyT, KeyE"],
withShortcut({
shortcut: "Control+KeyT, KeyE",
button: dropdownItem({
onClick: () => wrap("[$]", "[/$]"),
label: tr.editingLatexEquation(),
}),
}),
withShortcuts({
shortcuts: ["Control+KeyT, KeyM"],
withShortcut({
shortcut: "Control+KeyT, KeyM",
button: dropdownItem({
onClick: () => wrap("[$$]", "[/$$]"),
label: tr.editingLatexMathEnv(),

2
ts/lib/shortcuts.ts
View File

@ -2,7 +2,7 @@
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import * as tr from "./i18n";
type Modifier = "Control" | "Alt" | "Shift" | "Meta";
export type Modifier = "Control" | "Alt" | "Shift" | "Meta";
const modifiers: Modifier[] = ["Control", "Alt", "Shift", "Meta"];