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

View File

@ -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}

View File

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