feat: focus on editor with hotkey 'e' (#37202)
This commit is contained in:
committed by
mrugesh
parent
6db5292521
commit
4ad58f56ea
@ -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);
|
||||||
|
@ -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}
|
||||||
|
@ -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);
|
||||||
|
Reference in New Issue
Block a user