feat(client): add hotkey 'r' to focus on instructions panel (#42503)
parent
8dfd98183d
commit
a8e2aff073
|
@ -119,6 +119,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
|
|||
static displayName: string;
|
||||
containerRef: React.RefObject<unknown>;
|
||||
editorRef: React.RefObject<unknown>;
|
||||
instructionsPanelRef: React.RefObject<HTMLElement>;
|
||||
resizeProps: ResizePropsType;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
layoutState: any;
|
||||
|
@ -137,6 +138,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
|
|||
|
||||
this.containerRef = React.createRef();
|
||||
this.editorRef = React.createRef();
|
||||
this.instructionsPanelRef = React.createRef();
|
||||
// Holds the information of the panes sizes for desktop view
|
||||
this.layoutState = this.getLayoutState();
|
||||
}
|
||||
|
@ -278,6 +280,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
|
|||
description={description}
|
||||
guideUrl={getGuideUrl({ forumTopicId, title })}
|
||||
instructions={instructions}
|
||||
instructionsPanelRef={this.instructionsPanelRef}
|
||||
showToolPanel={showToolPanel}
|
||||
superBlock={superBlock}
|
||||
title={title}
|
||||
|
@ -356,6 +359,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
|
|||
editorRef={this.editorRef}
|
||||
executeChallenge={executeChallenge}
|
||||
innerRef={this.containerRef}
|
||||
instructionsPanelRef={this.instructionsPanelRef}
|
||||
nextChallengePath={nextChallengePath}
|
||||
prevChallengePath={prevChallengePath}
|
||||
>
|
||||
|
|
|
@ -22,6 +22,7 @@ const keyMap = {
|
|||
NAVIGATION_MODE: 'escape',
|
||||
EXECUTE_CHALLENGE: ['ctrl+enter', 'command+enter'],
|
||||
FOCUS_EDITOR: 'e',
|
||||
FOCUS_INSTRUCTIONS_PANEL: 'r',
|
||||
NAVIGATE_PREV: ['p'],
|
||||
NAVIGATE_NEXT: ['n']
|
||||
};
|
||||
|
@ -33,6 +34,7 @@ interface HotkeysProps {
|
|||
editorRef?: React.Ref<HTMLElement> | any;
|
||||
executeChallenge?: () => void;
|
||||
innerRef: React.Ref<HTMLElement> | unknown;
|
||||
instructionsPanelRef?: React.RefObject<HTMLElement>;
|
||||
nextChallengePath: string;
|
||||
prevChallengePath: string;
|
||||
setEditorFocusability: (arg0: boolean) => void;
|
||||
|
@ -41,6 +43,7 @@ interface HotkeysProps {
|
|||
function Hotkeys({
|
||||
canFocusEditor,
|
||||
children,
|
||||
instructionsPanelRef,
|
||||
editorRef,
|
||||
executeChallenge,
|
||||
innerRef,
|
||||
|
@ -63,6 +66,11 @@ function Hotkeys({
|
|||
editorRef.current.getWrappedInstance().editor.focus();
|
||||
}
|
||||
},
|
||||
FOCUS_INSTRUCTIONS_PANEL: () => {
|
||||
if (instructionsPanelRef && instructionsPanelRef.current) {
|
||||
instructionsPanelRef.current.focus();
|
||||
}
|
||||
},
|
||||
NAVIGATION_MODE: () => setEditorFocusability(false),
|
||||
NAVIGATE_PREV: () => {
|
||||
if (!canFocusEditor) void navigate(prevChallengePath);
|
||||
|
|
|
@ -26,6 +26,7 @@ const propTypes = {
|
|||
description: PropTypes.string,
|
||||
guideUrl: PropTypes.string,
|
||||
instructions: PropTypes.string,
|
||||
instructionsPanelRef: PropTypes.any.isRequired,
|
||||
isChallengeCompleted: PropTypes.bool,
|
||||
showToolPanel: PropTypes.bool,
|
||||
superBlock: PropTypes.string,
|
||||
|
@ -72,6 +73,7 @@ export class SidePanel extends Component {
|
|||
title,
|
||||
description,
|
||||
instructions,
|
||||
instructionsPanelRef,
|
||||
isChallengeCompleted,
|
||||
guideUrl,
|
||||
tests,
|
||||
|
@ -81,7 +83,12 @@ export class SidePanel extends Component {
|
|||
videoUrl
|
||||
} = this.props;
|
||||
return (
|
||||
<div className='instructions-panel' role='complementary' tabIndex='-1'>
|
||||
<div
|
||||
className='instructions-panel'
|
||||
ref={instructionsPanelRef}
|
||||
role='complementary'
|
||||
tabIndex='-1'
|
||||
>
|
||||
<div>
|
||||
<ChallengeTitle
|
||||
block={block}
|
||||
|
|
Loading…
Reference in New Issue