Fixes #136 - Keyboard shortcuts should work when editor is not focused

frontend/components/Editor/Editor.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Editor, Plain } from 'slate';
+import keydown from 'react-keydown';
 import classnames from 'classnames/bind';
 import type { Document, State, Editor as EditorType } from './types';
 import Flex from 'components/Flex';
@@ -30,11 +31,6 @@ type Props = {
   heading?: ?React.Element<*>,
 };
 
-type KeyData = {
-  isMeta: boolean,
-  key: string,
-};
-
 @observer class MarkdownEditor extends Component {
   props: Props;
   editor: EditorType;
@@ -82,25 +78,24 @@ type KeyData = {
     this.props.onChange(Markdown.serialize(state));
   };
 
-  onKeyDown = (ev: SyntheticKeyboardEvent, data: KeyData, state: State) => {
+  @keydown('meta+s')
-    if (!data.isMeta) return;
+  onSaveAndContinue(ev: SyntheticKeyboardEvent) {
-
-    switch (data.key) {
-      case 's':
     ev.preventDefault();
     ev.stopPropagation();
     this.props.onSave();
-        return state;
+  }
-      case 'enter':
+
+  @keydown('meta+enter')
+  onSave(ev: SyntheticKeyboardEvent) {
     ev.preventDefault();
     ev.stopPropagation();
     this.props.onSave({ redirect: false });
-        return state;
-      case 'escape':
-        return this.props.onCancel();
-      default:
   }
-  };
+
+  @keydown('esc')
+  onCancel() {
+    this.props.onCancel();
+  }
 
   focusAtStart = () => {
     const state = this.editor.getState();
@@ -138,7 +133,6 @@ type KeyData = {
           state={this.state.state}
           onChange={this.onChange}
           onDocumentChange={this.onDocumentChange}
-          onKeyDown={this.onKeyDown}
           onSave={this.props.onSave}
           readOnly={this.props.readOnly}
         />