diff --git a/frontend/components/Editor/Editor.js b/frontend/components/Editor/Editor.js index 1ad4d899..2e95eed0 100644 --- a/frontend/components/Editor/Editor.js +++ b/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} diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js index c6eab2c0..43fdde1d 100644 --- a/frontend/scenes/Document/Document.js +++ b/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;