Extract view mode shortcut code into hook (#688)

src/components/editor/editor.tsx

@@ -16,7 +16,7 @@ import { EditorPane } from './editor-pane/editor-pane'
 import { editorTestContent } from './editorTestContent'
 import { useFirstDraw } from './hooks/useFirstDraw'
 import { DualScrollState, ScrollState } from './scroll/scroll-props'
-import { shortcutHandler } from './shortcut/shortcut'
+import { useViewModeShortcuts } from './hooks/useViewModeShortcuts'
 import { Splitter } from './splitter/splitter'
 import { YAMLMetaData } from './yaml-metadata/yaml-metadata'
 
@@ -75,12 +75,7 @@ export const Editor: React.FC = () => {
     }
   }, [markdownContent, setMarkdownContent])
 
-  useEffect(() => {
+  useViewModeShortcuts()
-    document.addEventListener('keydown', shortcutHandler, false)
-    return () => {
-      document.removeEventListener('keydown', shortcutHandler, false)
-    }
-  }, [])
 
   const isFirstDraw = useFirstDraw()
 

src/components/editor/hooks/useViewModeShortcuts.ts

@@ -1,7 +1,8 @@
+import { useEffect } from 'react'
 import { setEditorMode } from '../../../redux/editor/methods'
 import { EditorMode } from '../app-bar/editor-view-mode'
 
-export const shortcutHandler = (event: KeyboardEvent): void => {
+const shortcutHandler = (event: KeyboardEvent): void => {
   if (event.ctrlKey && event.altKey && event.key === 'b') {
     setEditorMode(EditorMode.BOTH)
     event.preventDefault()
@@ -17,3 +18,12 @@ export const shortcutHandler = (event: KeyboardEvent): void => {
     event.preventDefault()
   }
 }
+
+export const useViewModeShortcuts = ():void => {
+  useEffect(() => {
+    document.addEventListener('keydown', shortcutHandler, false)
+    return () => {
+      document.removeEventListener('keydown', shortcutHandler, false)
+    }
+  }, [])
+}