From 8a9c2c923dc4e529f07ccda3589b6a7cf8fcc7ed Mon Sep 17 00:00:00 2001
From: Philip Molares <git@molar.es>
Date: Wed, 26 Aug 2020 21:42:05 +0200
Subject: [PATCH] added viewMode shortcuts (#486)
added viewMode shortcuts
---
src/components/editor/editor.tsx | 10 +++++++++-
src/components/editor/shortcut/shortcut.ts | 19 +++++++++++++++++++
2 files changed, 28 insertions(+), 1 deletion(-)
create mode 100644 src/components/editor/shortcut/shortcut.ts
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)
+ }
+}