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.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);
|
||||
|
@ -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}
|
||||
|
@ -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);
|
||||
|
Reference in New Issue
Block a user