Added keyboard shortcuts

src/components/MarkdownEditor/MarkdownEditor.js

@@ -121,8 +121,15 @@ class MarkdownEditor extends React.Component {
       theme: 'atlas',
       extraKeys: {
         Enter: 'newlineAndIndentContinueMarkdownList',
+
         "Ctrl-Enter": this.props.onSave,
         "Cmd-Enter": this.props.onSave,
+
+        "Cmd-Esc": this.props.onCancel,
+        "Ctrl-Esc": this.props.onCancel,
+
+        // "Cmd-Shift-p": this.props.togglePreview,
+        // "Ctrl-Shift-p": this.props.togglePreview,
       },
       placeholder: "# Start with a title...",
     };

src/scenes/Atlas/Atlas.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Link, browserHistory } from 'react-router';
+import keydown, { keydownScoped } from 'react-keydown';
+import _ from 'lodash';
 
 import store from './AtlasStore';
 
@@ -14,6 +16,7 @@ import Flex from 'components/Flex';
 
 import styles from './Atlas.scss';
 
+@keydown(['c'])
 @observer
 class Atlas extends React.Component {
   componentDidMount = () => {
@@ -27,8 +30,17 @@ class Atlas extends React.Component {
     })
   }
 
-  onClickCreate = (event) => {
-    event.preventDefault();
+  componentWillReceiveProps = (nextProps) => {
+    const key = nextProps.keydown.event;
+    if (key) {
+      if (key.key === 'c') {
+        _.defer(this.onCreate);
+      }
+    }
+  }
+
+  onCreate = (event) => {
+    if (event) event.preventDefault();
     browserHistory.push(`/atlas/${store.atlas.id}/new`);
   }
 
@@ -43,7 +55,7 @@ class Atlas extends React.Component {
       actions = (
         <Flex direction="row">
           <DropdownMenu label={ <MoreIcon /> } >
-            <MenuItem onClick={ this.onClickCreate }>
+            <MenuItem onClick={ this.onCreate }>
               New document
             </MenuItem>
           </DropdownMenu>

src/scenes/DocumentEdit/DocumentEdit.js

@@ -20,7 +20,10 @@ import SaveAction from './components/SaveAction';
 const DISREGARD_CHANGES = `You have unsaved changes.
 Are you sure you want to disgard them?`;
 
-@keydown(['cmd+enter', 'ctrl+enter', 'esc'])
+@keydown([
+  'cmd+enter', 'ctrl+enter',
+  'cmd+esc', 'ctrl+esc',
+  'cmd+shift+p', 'ctrl+shift+p'])
 @withRouter
 @observer
 class DocumentEdit extends Component {
@@ -75,9 +78,22 @@ class DocumentEdit extends Component {
   componentWillReceiveProps = (nextProps) => {
     const key = nextProps.keydown.event;
 
-    // Cmd + Enter
-    if (key && key.key === 'Enter' && (key.metaKey || key.ctrl.Key)) {
-      this.onSave();
+    if (key) {
+      // Cmd + Enter
+      if(key.key === 'Enter' && (key.metaKey || key.ctrl.Key)) {
+        this.onSave();
+      }
+
+      // Cmd + Esc
+      if(key.key === 'Escape' && (key.metaKey || key.ctrl.Key)) {
+        this.onCancel();
+      }
+
+      // Cmd + m
+      console.log(key)
+      if(key.key === 'P' && key.shiftKey && (key.metaKey || key.ctrl.Key)) {
+        this.store.togglePreview();
+      }
     }
   }
 
@@ -155,6 +171,8 @@ class DocumentEdit extends Component {
             scrollTop={ this.state.scrollTop }
             onScroll={ this.onScroll }
             onSave={ this.onSave }
+            onCancel={ this.onCancel }
+            togglePreview={ this.togglePreview }
           />
         ) }
       </Layout>

src/scenes/DocumentEdit/components/Editor.js

@@ -23,6 +23,8 @@ const Editor = observer((props) => {
           replaceText={ store.replaceText }
           preview={ store.preview }
           onSave={ props.onSave }
+          onCancel={ props.onCancel }
+          togglePreview={ props.togglePreview }
         />
       </EditorPane>
       { store.preview ? (

src/scenes/DocumentScene/DocumentScene.js

@@ -2,7 +2,8 @@ import React, { PropTypes } from 'react';
 import { toJS } from 'mobx';
 import { Link, browserHistory } from 'react-router';
 import { observer } from 'mobx-react';
-import keydown, { keydownScoped } from 'react-keydown';
+import keydown from 'react-keydown';
+import _ from 'lodash';
 
 import DocumentSceneStore, {
   DOCUMENT_PREFERENCES
@@ -22,7 +23,7 @@ const cx = classNames.bind(styles);
 
 import treeStyles from 'components/Tree/Tree.scss';
 
-@keydown(['cmd+/', 'ctrl+/'])
+@keydown(['cmd+/', 'ctrl+/', 'c', 'e'])
 @observer(['ui'])
 class DocumentScene extends React.Component {
   static propTypes = {
@@ -47,8 +48,18 @@ class DocumentScene extends React.Component {
 
   componentWillReceiveProps = (nextProps) => {
     const key = nextProps.keydown.event;
-    if (key && key.key === '/' && (key.metaKey || key.ctrl.Key)) {
-      this.toggleSidebar();
+    if (key) {
+      if (key.key === '/' && (key.metaKey || key.ctrl.Key)) {
+        this.toggleSidebar();
+      }
+
+      if (key.key === 'c') {
+        _.defer(this.onCreate);
+      }
+
+      if (key.key === 'e') {
+        _.defer(this.onEdit);
+      }
     }
 
     // Reload on url change