diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx index 7fba8badf..39ace8f6e 100644 --- a/src/components/editor/editor.tsx +++ b/src/components/editor/editor.tsx @@ -13,6 +13,7 @@ import { DocumentRenderPane } from './document-renderer-pane/document-render-pan import { EditorPane } from './editor-pane/editor-pane' import { editorTestContent } from './editorTestContent' import { DualScrollState, ScrollState } from './scroll/scroll-props' +import { shortcutHandler } from './shortcut/shortcut' import { Splitter } from './splitter/splitter' import { YAMLMetaData } from './yaml-metadata/yaml-metadata' @@ -64,6 +65,13 @@ export const Editor: React.FC = () => { updateDocumentTitle() }, [updateDocumentTitle]) + useEffect(() => { + document.addEventListener('keyup', shortcutHandler, false) + return () => { + document.removeEventListener('keyup', shortcutHandler, false) + } + }, []) + useEffect(() => { setFirstDraw(false) }, []) @@ -101,7 +109,7 @@ export const Editor: React.FC = () => { content={markdownContent} scrollState={scrollState.editorScrollState} onScroll={onEditorScroll} - onMakeScrollSource={() => scrollSource.current = ScrollSource.EDITOR} + onMakeScrollSource={() => (scrollSource.current = ScrollSource.EDITOR)} /> } showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)} diff --git a/src/components/editor/shortcut/shortcut.ts b/src/components/editor/shortcut/shortcut.ts new file mode 100644 index 000000000..fd71c7799 --- /dev/null +++ b/src/components/editor/shortcut/shortcut.ts @@ -0,0 +1,19 @@ +import { setEditorMode } from '../../../redux/editor/methods' +import { EditorMode } from '../app-bar/editor-view-mode' +import { isMac } from '../utils' + +export const shortcutHandler = (event: KeyboardEvent): void => { + const modifierKey = isMac ? event.metaKey : event.ctrlKey + + if (modifierKey && event.altKey && event.key === 'b') { + setEditorMode(EditorMode.BOTH) + } + + if (modifierKey && event.altKey && event.key === 'v') { + setEditorMode(EditorMode.PREVIEW) + } + + if (modifierKey && event.altKey && event.key === 'e') { + setEditorMode(EditorMode.EDITOR) + } +}