diff --git a/lib/app-layout/index.tsx b/lib/app-layout/index.tsx index 6781be677..b38ed455b 100644 --- a/lib/app-layout/index.tsx +++ b/lib/app-layout/index.tsx @@ -65,11 +65,12 @@ export class AppLayout extends Component { keyboardShortcutsAreOpen, showKeyboardShortcuts, } = this.props; - const { ctrlKey, code, metaKey } = event; + const { ctrlKey, metaKey } = event; + const key = event.key.toLowerCase(); const cmdOrCtrl = ctrlKey || metaKey; - if (cmdOrCtrl && code === 'Slash') { + if (cmdOrCtrl && key === '/') { keyboardShortcutsAreOpen ? hideKeyboardShortcuts() : showKeyboardShortcuts(); diff --git a/lib/app.tsx b/lib/app.tsx index 845e26334..510e7af62 100644 --- a/lib/app.tsx +++ b/lib/app.tsx @@ -77,13 +77,14 @@ class AppComponent extends Component { if (!hotkeysEnabled) { return; } - const { code, ctrlKey, metaKey, shiftKey } = event; + const { ctrlKey, metaKey, shiftKey } = event; + const key = event.key.toLowerCase(); // Is either cmd or ctrl pressed? (But not both) const cmdOrCtrl = (ctrlKey || metaKey) && ctrlKey !== metaKey; // open tag list - if (cmdOrCtrl && shiftKey && 'KeyU' === code) { + if (cmdOrCtrl && shiftKey && 'u' === key) { this.props.toggleTagList(); event.stopPropagation(); @@ -92,8 +93,8 @@ class AppComponent extends Component { } if ( - (cmdOrCtrl && shiftKey && 'KeyS' === code) || - (cmdOrCtrl && !shiftKey && 'KeyF' === code) + (cmdOrCtrl && shiftKey && 's' === key) || + (cmdOrCtrl && !shiftKey && 'f' === key) ) { this.props.focusSearchField(); @@ -102,11 +103,11 @@ class AppComponent extends Component { return false; } - if (('Escape' === code || 'Esc' === code) && this.props.isSearchActive) { + if (('Escape' === key || 'Esc' === key) && this.props.isSearchActive) { this.props.clearSearch(); } - if (cmdOrCtrl && shiftKey && 'KeyF' === code) { + if (cmdOrCtrl && shiftKey && 'f' === key) { this.props.toggleFocusMode(); event.stopPropagation(); @@ -114,7 +115,7 @@ class AppComponent extends Component { return false; } - if (cmdOrCtrl && shiftKey && 'KeyI' === code) { + if (cmdOrCtrl && shiftKey && 'i' === key) { this.props.createNote(); event.stopPropagation(); @@ -123,7 +124,7 @@ class AppComponent extends Component { } // prevent default browser behavior for search and find - if (cmdOrCtrl && ('KeyG' === code || 'KeyF' === code)) { + if (cmdOrCtrl && ('g' === key || 'f' === key)) { event.stopPropagation(); event.preventDefault(); } diff --git a/lib/note-content-editor.tsx b/lib/note-content-editor.tsx index 7d493b3d4..947ba8554 100644 --- a/lib/note-content-editor.tsx +++ b/lib/note-content-editor.tsx @@ -161,17 +161,18 @@ class NoteContentEditor extends Component { }; handleShortcut = (event: KeyboardEvent) => { - const { ctrlKey, code, metaKey, shiftKey } = event; + const { ctrlKey, metaKey, shiftKey } = event; + const key = event.key.toLowerCase(); const cmdOrCtrl = ctrlKey || metaKey; - if (cmdOrCtrl && shiftKey && code === 'KeyG') { + if (cmdOrCtrl && shiftKey && key === 'g') { this.setPrevSearchSelection(); event.stopPropagation(); event.preventDefault(); return false; } - if (cmdOrCtrl && !shiftKey && code === 'KeyG') { + if (cmdOrCtrl && !shiftKey && key === 'g') { this.setNextSearchSelection(); event.stopPropagation(); event.preventDefault(); diff --git a/lib/note-editor/index.tsx b/lib/note-editor/index.tsx index 20e1c301a..a9517ad43 100644 --- a/lib/note-editor/index.tsx +++ b/lib/note-editor/index.tsx @@ -49,13 +49,15 @@ export class NoteEditor extends Component { if (!this.props.keyboardShortcuts) { return; } - const { code, ctrlKey, metaKey, shiftKey } = event; + + const { ctrlKey, metaKey, shiftKey } = event; + const key = event.key.toLowerCase(); const { note, noteId, toggleMarkdown } = this.props; const cmdOrCtrl = ctrlKey || metaKey; // toggle Markdown enabled - if (note && cmdOrCtrl && shiftKey && 'KeyM' === code) { + if (note && cmdOrCtrl && shiftKey && 'm' === key) { console.log('toggling markdown'); toggleMarkdown(noteId, !this.markdownEnabled()); event.stopPropagation(); @@ -64,7 +66,7 @@ export class NoteEditor extends Component { } // toggle editor mode - if (cmdOrCtrl && shiftKey && 'KeyP' === code && this.markdownEnabled()) { + if (cmdOrCtrl && shiftKey && 'p' === key && this.markdownEnabled()) { this.props.toggleEditMode(); event.stopPropagation(); event.preventDefault(); @@ -72,7 +74,7 @@ export class NoteEditor extends Component { } // toggle between tag editor and note editor - if (shiftKey && cmdOrCtrl && 'KeyY' === code && this.props.isEditorActive) { + if (shiftKey && cmdOrCtrl && 'y' === key && this.props.isEditorActive) { // prefer focusing the edit field first if (!this.editFieldHasFocus() || this.props.isSearchActive) { this.focusNoteEditor?.(); diff --git a/lib/note-list/index.tsx b/lib/note-list/index.tsx index d1c5a29e5..3e26d7666 100644 --- a/lib/note-list/index.tsx +++ b/lib/note-list/index.tsx @@ -216,11 +216,12 @@ export class NoteList extends Component { if (!this.props.keyboardShortcuts) { return; } - const { ctrlKey, code, metaKey, shiftKey } = event; + const { ctrlKey, metaKey, shiftKey } = event; + const key = event.key.toLowerCase(); const { isSmallScreen, showNoteList } = this.props; const cmdOrCtrl = ctrlKey || metaKey; - if (cmdOrCtrl && shiftKey && code === 'KeyK') { + if (cmdOrCtrl && shiftKey && key === 'k') { this.props.selectNoteAbove(); event.stopPropagation(); @@ -228,7 +229,7 @@ export class NoteList extends Component { return false; } - if (cmdOrCtrl && shiftKey && code === 'KeyJ') { + if (cmdOrCtrl && shiftKey && key === 'j') { this.props.selectNoteBelow(); event.stopPropagation(); @@ -236,7 +237,7 @@ export class NoteList extends Component { return false; } - if (isSmallScreen && cmdOrCtrl && shiftKey && code === 'KeyL') { + if (isSmallScreen && cmdOrCtrl && shiftKey && key === 'l') { this.props.toggleNoteList(); event.stopPropagation(); @@ -244,7 +245,7 @@ export class NoteList extends Component { return false; } - if (isSmallScreen && showNoteList && code === 'Enter') { + if (isSmallScreen && showNoteList && key === 'Enter') { this.props.openNote(); event.stopPropagation(); diff --git a/lib/tag-field/index.tsx b/lib/tag-field/index.tsx index f12146b2a..7f0ff8f26 100644 --- a/lib/tag-field/index.tsx +++ b/lib/tag-field/index.tsx @@ -154,7 +154,7 @@ export class TagField extends Component { preventStealingFocus = ({ ctrlKey, - code, + key, metaKey, shiftKey, }: KeyboardEvent) => { @@ -163,7 +163,7 @@ export class TagField extends Component { } const cmdOrCtrl = ctrlKey || metaKey; - if (cmdOrCtrl && shiftKey && 'KeyY' === code) { + if (cmdOrCtrl && shiftKey && 'y' === key.toLowerCase()) { this.setState({ selectedTag: '' as T.TagName }); }