Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-22 10:52:30 +01:00
Code Issues Releases Wiki Activity

New WYSIWYG: Added mac shortcut support

Browse Source
This commit is contained in:
Dan Brown 2024-10-04 12:41:13 +01:00
parent b1a3ea1aa4
commit be6529d0a1
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
resources/js/wysiwyg/services/shortcuts.ts
View File

@ -32,39 +32,43 @@ function toggleInlineCode(editor: LexicalEditor): boolean {
type ShortcutAction = (editor: LexicalEditor, context: EditorUiContext) => boolean;
/**
* List of action functions by their shortcut combo.
* We use "meta" as an abstraction for ctrl/cmd depending on platform.
*/
const actionsByKeys: Record<string, ShortcutAction> = {
'ctrl+s': () => {
'meta+s': () => {
window.$events.emit('editor-save-draft');
return true;
},
'ctrl+enter': () => {
'meta+enter': () => {
window.$events.emit('editor-save-page');
return true;
},
'ctrl+1': (editor) => headerHandler(editor, 'h1'),
'ctrl+2': (editor) => headerHandler(editor, 'h2'),
'ctrl+3': (editor) => headerHandler(editor, 'h3'),
'ctrl+4': (editor) => headerHandler(editor, 'h4'),
'ctrl+5': wrapFormatAction(toggleSelectionAsParagraph),
'ctrl+d': wrapFormatAction(toggleSelectionAsParagraph),
'ctrl+6': wrapFormatAction(toggleSelectionAsBlockquote),
'ctrl+q': wrapFormatAction(toggleSelectionAsBlockquote),
'ctrl+7': wrapFormatAction(formatCodeBlock),
'ctrl+e': wrapFormatAction(formatCodeBlock),
'ctrl+8': toggleInlineCode,
'ctrl+shift+e': toggleInlineCode,
'ctrl+9': wrapFormatAction(cycleSelectionCalloutFormats),
'meta+1': (editor) => headerHandler(editor, 'h1'),
'meta+2': (editor) => headerHandler(editor, 'h2'),
'meta+3': (editor) => headerHandler(editor, 'h3'),
'meta+4': (editor) => headerHandler(editor, 'h4'),
'meta+5': wrapFormatAction(toggleSelectionAsParagraph),
'meta+d': wrapFormatAction(toggleSelectionAsParagraph),
'meta+6': wrapFormatAction(toggleSelectionAsBlockquote),
'meta+q': wrapFormatAction(toggleSelectionAsBlockquote),
'meta+7': wrapFormatAction(formatCodeBlock),
'meta+e': wrapFormatAction(formatCodeBlock),
'meta+8': toggleInlineCode,
'meta+shift+e': toggleInlineCode,
'meta+9': wrapFormatAction(cycleSelectionCalloutFormats),
'ctrl+o': wrapFormatAction((e) => toggleSelectionAsList(e, 'number')),
'ctrl+p': wrapFormatAction((e) => toggleSelectionAsList(e, 'bullet')),
'ctrl+k': (editor, context) => {
'meta+o': wrapFormatAction((e) => toggleSelectionAsList(e, 'number')),
'meta+p': wrapFormatAction((e) => toggleSelectionAsList(e, 'bullet')),
'meta+k': (editor, context) => {
editor.getEditorState().read(() => {
const selectedLink = $getNodeFromSelection($getSelection(), $isLinkNode) as LinkNode | null;
$showLinkForm(selectedLink, context);
});
return true;
},
'ctrl+shift+k': (editor, context) => {
'meta+shift+k': (editor, context) => {
showLinkSelector(entity => {
insertOrUpdateLink(editor, {
text: entity.name,
@ -79,8 +83,7 @@ const actionsByKeys: Record<string, ShortcutAction> = {
function createKeyDownListener(context: EditorUiContext): (e: KeyboardEvent) => void {
return (event: KeyboardEvent) => {
// TODO - Mac Cmd support
const combo = `${event.ctrlKey ? 'ctrl+' : ''}${event.shiftKey ? 'shift+' : ''}${event.key}`.toLowerCase();
const combo = keyboardEventToKeyComboString(event);
// console.log(`pressed: ${combo}`);
if (actionsByKeys[combo]) {
const handled = actionsByKeys[combo](context.editor, context);
@ -92,10 +95,29 @@ function createKeyDownListener(context: EditorUiContext): (e: KeyboardEvent) =>
};
}
function keyboardEventToKeyComboString(event: KeyboardEvent): string {
const metaKeyPressed = isMac() ? event.metaKey : event.ctrlKey;
const parts = [
metaKeyPressed ? 'meta' : '',
event.shiftKey ? 'shift' : '',
event.key,
];
return parts.filter(Boolean).join('+').toLowerCase();
}
function isMac(): boolean {
return window.navigator.userAgent.includes('Mac OS X');
}
function overrideDefaultCommands(editor: LexicalEditor) {
// Prevent default ctrl+enter command
editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
return event?.ctrlKey ? true : false
if (isMac()) {
return event?.metaKey || false;
}
return event?.ctrlKey || false;
}, COMMAND_PRIORITY_HIGH);
}

2
resources/js/wysiwyg/todo.md
View File

@ -6,7 +6,7 @@
## Main Todo
- Mac: Shortcut support via command.
//
## Secondary Todo