Add first shortcuts for bold, italic, underline, removeFormat

This commit is contained in:
Henrik Giesel 2021-04-22 02:36:54 +02:00
parent dc5b13eeab
commit 85f89dc111
4 changed files with 43 additions and 24 deletions

View file

@ -312,12 +312,8 @@ $editorToolbar.addButtonGroup({{
# if a third element is provided, enable shortcut even when no field selected # if a third element is provided, enable shortcut even when no field selected
cuts: List[Tuple] = [ cuts: List[Tuple] = [
("Ctrl+L", self.onCardLayout, True), ("Ctrl+L", self.onCardLayout, True),
("Ctrl+B", self.toggleBold),
("Ctrl+I", self.toggleItalic),
("Ctrl+U", self.toggleUnderline),
("Ctrl++", self.toggleSuper), ("Ctrl++", self.toggleSuper),
("Ctrl+=", self.toggleSub), ("Ctrl+=", self.toggleSub),
("Ctrl+R", self.removeFormat),
("F7", self.onForeground), ("F7", self.onForeground),
("F8", self.onChangeCol), ("F8", self.onChangeCol),
("Ctrl+Shift+C", self.onCloze), ("Ctrl+Shift+C", self.onCloze),

View file

@ -21,8 +21,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let deregister; let deregister;
function createShortcut({ detail }: CustomEvent): void { function createShortcut({ detail }: CustomEvent): void {
const button: HTMLButtonElement = detail.button; const mounted: HTMLButtonElement = detail.button;
deregister = registerShortcut(() => button.click(), shortcut); deregister = registerShortcut((event) => {
mounted.dispatchEvent(new MouseEvent("click"));
event.preventDefault();
}, shortcut);
} }
onDestroy(() => deregister()); onDestroy(() => deregister());

View file

@ -20,6 +20,9 @@ import type { DropdownItemProps } from "./DropdownItem";
import WithDropdownMenu from "./WithDropdownMenu.svelte"; import WithDropdownMenu from "./WithDropdownMenu.svelte";
import type { WithDropdownMenuProps } from "./WithDropdownMenu"; import type { WithDropdownMenuProps } from "./WithDropdownMenu";
import WithShortcut from "./WithShortcut.svelte";
import type { WithShortcutProps } from "./WithShortcut";
import { dynamicComponent } from "sveltelib/dynamicComponent"; import { dynamicComponent } from "sveltelib/dynamicComponent";
export const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>( export const labelButton = dynamicComponent<typeof LabelButton, LabelButtonProps>(
@ -55,3 +58,7 @@ export const withDropdownMenu = dynamicComponent<
typeof WithDropdownMenu, typeof WithDropdownMenu,
WithDropdownMenuProps WithDropdownMenuProps
>(WithDropdownMenu); >(WithDropdownMenu);
export const withShortcut = dynamicComponent<typeof WithShortcut, WithShortcutProps>(
WithShortcut
);

View file

@ -9,6 +9,7 @@ import {
commandIconButton, commandIconButton,
iconButton, iconButton,
buttonGroup, buttonGroup,
withShortcut,
} from "editor-toolbar/dynamicComponents"; } from "editor-toolbar/dynamicComponents";
import boldIcon from "./type-bold.svg"; import boldIcon from "./type-bold.svg";
@ -20,22 +21,31 @@ import eraserIcon from "./eraser.svg";
export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGroup> & export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGroup> &
ButtonGroupProps { ButtonGroupProps {
const boldButton = commandIconButton({ const boldButton = withShortcut({
icon: boldIcon, shortcut: "Control+KeyB",
tooltip: tr.editingBoldTextCtrlandb(), button: commandIconButton({
command: "bold", icon: boldIcon,
tooltip: tr.editingBoldTextCtrlandb(),
command: "bold",
}),
}); });
const italicButton = commandIconButton({ const italicButton = withShortcut({
icon: italicIcon, shortcut: "Control+KeyI",
tooltip: tr.editingItalicTextCtrlandi(), button: commandIconButton({
command: "italic", icon: italicIcon,
tooltip: tr.editingItalicTextCtrlandi(),
command: "italic",
}),
}); });
const underlineButton = commandIconButton({ const underlineButton = withShortcut({
icon: underlineIcon, shortcut: "Control+KeyU",
tooltip: tr.editingUnderlineTextCtrlandu(), button: commandIconButton({
command: "underline", icon: underlineIcon,
tooltip: tr.editingUnderlineTextCtrlandu(),
command: "underline",
}),
}); });
const superscriptButton = commandIconButton({ const superscriptButton = commandIconButton({
@ -50,12 +60,15 @@ export function getFormatInlineGroup(): DynamicSvelteComponent<typeof ButtonGrou
command: "subscript", command: "subscript",
}); });
const removeFormatButton = iconButton({ const removeFormatButton = withShortcut({
icon: eraserIcon, shortcut: "Control+KeyR",
tooltip: tr.editingRemoveFormattingCtrlandr(), button: iconButton({
onClick: () => { icon: eraserIcon,
document.execCommand("removeFormat"); tooltip: tr.editingRemoveFormattingCtrlandr(),
}, onClick: () => {
document.execCommand("removeFormat");
},
}),
}); });
return buttonGroup({ return buttonGroup({