From 4ad58f56eab88d18830c95b2070366118be8dda4 Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Wed, 16 Oct 2019 13:53:16 +0200 Subject: [PATCH] feat: focus on editor with hotkey 'e' (#37202) --- client/src/templates/Challenges/classic/Editor.js | 11 ++++++++++- client/src/templates/Challenges/classic/Show.js | 3 +++ client/src/templates/Challenges/components/Hotkeys.js | 9 +++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/client/src/templates/Challenges/classic/Editor.js b/client/src/templates/Challenges/classic/Editor.js index a12ce73abf..29322e747d 100644 --- a/client/src/templates/Challenges/classic/Editor.js +++ b/client/src/templates/Challenges/classic/Editor.js @@ -105,6 +105,7 @@ class Editor extends Component { }; this._editor = null; + this.focusOnEditor = this.focusOnEditor.bind(this); } editorWillMount = monaco => { @@ -145,6 +146,10 @@ class Editor extends Component { } } + focusOnEditor() { + this._editor.focus(); + } + onChange = editorValue => { const { updateFile, fileKey } = this.props; updateFile({ key: fileKey, editorValue }); @@ -179,7 +184,11 @@ class Editor extends Component { Editor.displayName = 'Editor'; Editor.propTypes = propTypes; +// NOTE: withRef gets replaced by forwardRef in react-redux 6, +// https://github.com/reduxjs/react-redux/releases/tag/v6.0.0 export default connect( mapStateToProps, - mapDispatchToProps + mapDispatchToProps, + null, + { withRef: true } )(Editor); diff --git a/client/src/templates/Challenges/classic/Show.js b/client/src/templates/Challenges/classic/Show.js index d5d3fc2389..6c8886ff8a 100644 --- a/client/src/templates/Challenges/classic/Show.js +++ b/client/src/templates/Challenges/classic/Show.js @@ -105,6 +105,7 @@ class ShowClassic extends Component { }; this.containerRef = React.createRef(); + this.editorRef = React.createRef(); } onResize() { this.setState({ resizing: true }); @@ -222,6 +223,7 @@ class ShowClassic extends Component { challengeFile && ( @@ -259,6 +261,7 @@ class ShowClassic extends Component { } = this.props; return ( { + e.preventDefault(); + if (editorRef && editorRef.current) { + editorRef.current.getWrappedInstance().focusOnEditor(); + } + }, NAVIGATION_MODE: () => setEditorFocusability(false), NAVIGATE_PREV: () => { if (!canFocusEditor) navigate(prevChallengePath);