diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js index c4ee19ba9..0bcef3cdc 100644 --- a/src/components/Layout/Layout.js +++ b/src/components/Layout/Layout.js @@ -64,7 +64,11 @@ class Layout extends React.Component { { this.props.search && ( -
+
diff --git a/src/components/MarkdownEditor/MarkdownEditor.js b/src/components/MarkdownEditor/MarkdownEditor.js index ad2df39c0..64f58933a 100644 --- a/src/components/MarkdownEditor/MarkdownEditor.js +++ b/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...", }; diff --git a/src/scenes/DocumentEdit/DocumentEdit.js b/src/scenes/DocumentEdit/DocumentEdit.js index fb2c4f000..4586ddcb9 100644 --- a/src/scenes/DocumentEdit/DocumentEdit.js +++ b/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 } /> ) } diff --git a/src/scenes/DocumentEdit/components/Editor.js b/src/scenes/DocumentEdit/components/Editor.js index 6f4a79b5f..eb8fb10d5 100644 --- a/src/scenes/DocumentEdit/components/Editor.js +++ b/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 } /> { store.preview ? ( @@ -35,4 +36,4 @@ const Editor = observer((props) => { ); }); -export default Editor; \ No newline at end of file +export default Editor; diff --git a/src/scenes/DocumentScene/DocumentScene.js b/src/scenes/DocumentScene/DocumentScene.js index 83b8c6454..7462823cc 100644 --- a/src/scenes/DocumentScene/DocumentScene.js +++ b/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 ( @@ -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 { />
) } -
+