From b48502cdd2976df32a0a1eb2382eb9c7178c2372 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sat, 23 Jul 2016 12:51:07 -0700
Subject: [PATCH] Added keyboard shortcuts

---
 .../MarkdownEditor/MarkdownEditor.js          |  7 +++++
 src/scenes/Atlas/Atlas.js                     | 18 ++++++++++---
 src/scenes/DocumentEdit/DocumentEdit.js       | 26 ++++++++++++++++---
 src/scenes/DocumentEdit/components/Editor.js  |  2 ++
 src/scenes/DocumentScene/DocumentScene.js     | 19 +++++++++++---
 5 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/components/MarkdownEditor/MarkdownEditor.js b/src/components/MarkdownEditor/MarkdownEditor.js
index 64f58933a..c41fd28aa 100644
--- a/src/components/MarkdownEditor/MarkdownEditor.js
+++ b/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...",
     };
diff --git a/src/scenes/Atlas/Atlas.js b/src/scenes/Atlas/Atlas.js
index 3ff86e63f..ce03bc90f 100644
--- a/src/scenes/Atlas/Atlas.js
+++ b/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>
diff --git a/src/scenes/DocumentEdit/DocumentEdit.js b/src/scenes/DocumentEdit/DocumentEdit.js
index 4586ddcb9..c0a768036 100644
--- a/src/scenes/DocumentEdit/DocumentEdit.js
+++ b/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>
diff --git a/src/scenes/DocumentEdit/components/Editor.js b/src/scenes/DocumentEdit/components/Editor.js
index eb8fb10d5..0d632d5d0 100644
--- a/src/scenes/DocumentEdit/components/Editor.js
+++ b/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 ? (
diff --git a/src/scenes/DocumentScene/DocumentScene.js b/src/scenes/DocumentScene/DocumentScene.js
index 49c2d560c..c7df607eb 100644
--- a/src/scenes/DocumentScene/DocumentScene.js
+++ b/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