feat: focus on editor with hotkey 'e' (#37202)

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);

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 && (
         <Editor
           containerRef={this.containerRef}
+          ref={this.editorRef}
           {...challengeFile}
           fileKey={challengeFile.key}
         />
@@ -259,6 +261,7 @@ class ShowClassic extends Component {
     } = this.props;
     return (
       <Hotkeys
+        editorRef={this.editorRef}
         executeChallenge={executeChallenge}
         innerRef={this.containerRef}
         introPath={introPath}

client/src/templates/Challenges/components/Hotkeys.js

@@ -20,6 +20,7 @@ const mapDispatchToProps = { setEditorFocusability };
 const keyMap = {
   NAVIGATION_MODE: 'escape',
   EXECUTE_CHALLENGE: ['ctrl+enter', 'command+enter'],
+  FOCUS_EDITOR: 'e',
   NAVIGATE_PREV: ['p'],
   NAVIGATE_NEXT: ['n']
 };
@@ -27,6 +28,7 @@ const keyMap = {
 const propTypes = {
   canFocusEditor: PropTypes.bool,
   children: PropTypes.any,
+  editorRef: PropTypes.object,
   executeChallenge: PropTypes.func,
   innerRef: PropTypes.any,
   introPath: PropTypes.string,
@@ -38,6 +40,7 @@ const propTypes = {
 function Hotkeys({
   canFocusEditor,
   children,
+  editorRef,
   executeChallenge,
   introPath,
   innerRef,
@@ -54,6 +57,12 @@ function Hotkeys({
       e.preventDefault();
       if (executeChallenge) executeChallenge();
     },
+    FOCUS_EDITOR: e => {
+      e.preventDefault();
+      if (editorRef && editorRef.current) {
+        editorRef.current.getWrappedInstance().focusOnEditor();
+      }
+    },
     NAVIGATION_MODE: () => setEditorFocusability(false),
     NAVIGATE_PREV: () => {
       if (!canFocusEditor) navigate(prevChallengePath);