More keyboard shortcuts

src/components/Layout/Layout.js

@@ -64,7 +64,11 @@ class Layout extends React.Component {
             </Flex>
             { this.props.search && (
               <Flex>
-                <div className={ styles.search } onClick={ this.search }>
+                <div
+                  onClick={ this.search }
+                  className={ styles.search }
+                  title="Search (/)"
+                >
                   <img src={ require('assets/icons/search.svg') } />
                 </div>
               </Flex>

src/components/MarkdownEditor/MarkdownEditor.js

@@ -20,6 +20,7 @@ class MarkdownEditor extends React.Component {
     text: React.PropTypes.string,
     onChange: React.PropTypes.func.isRequired,
     replaceText: React.PropTypes.func.isRequired,
+    onSave: React.PropTypes.func.isRequired,
 
     // This is actually not used but it triggers
     // re-render to help with CodeMirror focus issues
@@ -120,6 +121,8 @@ class MarkdownEditor extends React.Component {
       theme: 'atlas',
       extraKeys: {
         Enter: 'newlineAndIndentContinueMarkdownList',
+        "Ctrl-Enter": this.props.onSave,
+        "Cmd-Enter": this.props.onSave,
       },
       placeholder: "# Start with a title...",
     };

src/scenes/DocumentEdit/DocumentEdit.js

@@ -20,6 +20,7 @@ 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'])
 @withRouter
 @observer
 class DocumentEdit extends Component {
@@ -71,6 +72,15 @@ 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();
+    }
+  }
+
   onSave = () => {
     // if (this.props.title.length === 0) {
     //   alert("Please add a title before saving (hint: Write a markdown header)");
@@ -144,6 +154,7 @@ class DocumentEdit extends Component {
             store={ this.store }
             scrollTop={ this.state.scrollTop }
             onScroll={ this.onScroll }
+            onSave={ this.onSave }
           />
         ) }
       </Layout>

src/scenes/DocumentEdit/components/Editor.js

@@ -22,6 +22,7 @@ const Editor = observer((props) => {
           text={ store.text }
           replaceText={ store.replaceText }
           preview={ store.preview }
+          onSave={ props.onSave }
         />
       </EditorPane>
       { store.preview ? (

src/scenes/DocumentScene/DocumentScene.js

@@ -2,6 +2,7 @@ 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 DocumentSceneStore, {
   DOCUMENT_PREFERENCES
@@ -21,6 +22,7 @@ const cx = classNames.bind(styles);
 
 import treeStyles from 'components/Tree/Tree.scss';
 
+@keydown(['cmd+/', 'ctrl+/'])
 @observer(['ui'])
 class DocumentScene extends React.Component {
   static propTypes = {
@@ -44,6 +46,11 @@ class DocumentScene extends React.Component {
   }
 
   componentWillReceiveProps = (nextProps) => {
+    const key = nextProps.keydown.event;
+    if (key && key.key === '/' && (key.metaKey || key.ctrl.Key)) {
+      this.toggleSidebar();
+    }
+
     // Reload on url change
     const oldId = this.props.params.id;
     const newId = nextProps.params.id;
@@ -87,6 +94,10 @@ class DocumentScene extends React.Component {
     };
   }
 
+  toggleSidebar = () => {
+    this.props.ui.toggleSidebar();
+  }
+
   renderNode = (node) => {
     return (
       <span className={ treeStyles.nodeLabel } onClick={this.onClickNode.bind(null, node)}>
@@ -98,7 +109,6 @@ class DocumentScene extends React.Component {
   render() {
     const {
       sidebar,
-      toggleSidebar,
     } = this.props.ui;
 
     const doc = this.store.document;
@@ -153,7 +163,11 @@ class DocumentScene extends React.Component {
                     />
                   </div>
                 ) }
-                <div className={ styles.sidebarToggle } onClick={ toggleSidebar }>
+                <div
+                  onClick={ this.toggleSidebar }
+                  className={ styles.sidebarToggle }
+                  title="Toggle sidebar (Cmd+/)"
+                >
                   <img
                     src={ require("assets/icons/menu.svg") }
                     className={ styles.menuIcon }