Restore shortcuts with editor focus

frontend/components/Editor/Editor.js

@@ -33,6 +33,11 @@ type Props = {
   heading?: ?React.Element<*>,
 };
 
+type KeyData = {
+  isMeta: boolean,
+  key: string,
+};
+
 @observer class MarkdownEditor extends Component {
   props: Props;
   editor: EditorType;
@@ -113,15 +118,16 @@ type Props = {
     ev.preventDefault();
   };
 
+  // Handling of keyboard shortcuts outside of editor focus
   @keydown('meta+s')
-  onSaveAndContinue(ev: SyntheticKeyboardEvent) {
+  onSave(ev: SyntheticKeyboardEvent) {
     ev.preventDefault();
     ev.stopPropagation();
     this.props.onSave();
   }
 
   @keydown('meta+enter')
-  onSave(ev: SyntheticKeyboardEvent) {
+  onSaveAndExit(ev: SyntheticKeyboardEvent) {
     ev.preventDefault();
     ev.stopPropagation();
     this.props.onSave({ redirect: false });
@@ -132,6 +138,24 @@ type Props = {
     this.props.onCancel();
   }
 
+  // Handling of keyboard shortcuts within editor focus
+  onKeyDown = (ev: SyntheticKeyboardEvent, data: KeyData, state: State) => {
+    if (!data.isMeta) return;
+
+    switch (data.key) {
+      case 's':
+        this.onSave(ev);
+        break;
+      case 'enter':
+        this.onSaveAndExit(ev);
+        break;
+      case 'escape':
+        this.onCancel();
+        break;
+      default:
+    }
+  };
+
   focusAtStart = () => {
     const state = this.editor.getState();
     const transform = state.transform();
@@ -174,6 +198,7 @@ type Props = {
             schema={this.schema}
             plugins={this.plugins}
             state={this.state.state}
+            onKeyDown={this.onKeyDown}
             onChange={this.onChange}
             onDocumentChange={this.onDocumentChange}
             onSave={this.props.onSave}

frontend/scenes/Document/Document.js

@@ -267,10 +267,6 @@ const LoadingState = styled(PreviewLoading)`
   margin: 80px 20px;
 `;
 
-const DocumentContainer = styled.div`
-
-`;
-
 const StyledDropToImport = styled(DropToImport)`
   display: flex;
   flex: 1;