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

This commit is contained in:
Oliver Eyton-Williams
2019-10-16 13:53:16 +02:00
committed by mrugesh
parent 6db5292521
commit 4ad58f56ea
3 changed files with 22 additions and 1 deletions

View File

@ -105,6 +105,7 @@ class Editor extends Component {
}; };
this._editor = null; this._editor = null;
this.focusOnEditor = this.focusOnEditor.bind(this);
} }
editorWillMount = monaco => { editorWillMount = monaco => {
@ -145,6 +146,10 @@ class Editor extends Component {
} }
} }
focusOnEditor() {
this._editor.focus();
}
onChange = editorValue => { onChange = editorValue => {
const { updateFile, fileKey } = this.props; const { updateFile, fileKey } = this.props;
updateFile({ key: fileKey, editorValue }); updateFile({ key: fileKey, editorValue });
@ -179,7 +184,11 @@ class Editor extends Component {
Editor.displayName = 'Editor'; Editor.displayName = 'Editor';
Editor.propTypes = propTypes; 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( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps,
null,
{ withRef: true }
)(Editor); )(Editor);

View File

@ -105,6 +105,7 @@ class ShowClassic extends Component {
}; };
this.containerRef = React.createRef(); this.containerRef = React.createRef();
this.editorRef = React.createRef();
} }
onResize() { onResize() {
this.setState({ resizing: true }); this.setState({ resizing: true });
@ -222,6 +223,7 @@ class ShowClassic extends Component {
challengeFile && ( challengeFile && (
<Editor <Editor
containerRef={this.containerRef} containerRef={this.containerRef}
ref={this.editorRef}
{...challengeFile} {...challengeFile}
fileKey={challengeFile.key} fileKey={challengeFile.key}
/> />
@ -259,6 +261,7 @@ class ShowClassic extends Component {
} = this.props; } = this.props;
return ( return (
<Hotkeys <Hotkeys
editorRef={this.editorRef}
executeChallenge={executeChallenge} executeChallenge={executeChallenge}
innerRef={this.containerRef} innerRef={this.containerRef}
introPath={introPath} introPath={introPath}

View File

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