diff --git a/src/features/common/components/code-editor/editor.component.tsx b/src/features/common/components/code-editor/editor.component.tsx index 6a442eb0..ddac153b 100644 --- a/src/features/common/components/code-editor/editor.component.tsx +++ b/src/features/common/components/code-editor/editor.component.tsx @@ -18,6 +18,7 @@ type Props = React.HTMLAttributes & { textareaId?: string; textareaClassName?: string; autoFocus?: boolean; + focusOnWindowFocus?: boolean; disabled?: boolean; form?: string; maxLength?: number; @@ -87,6 +88,15 @@ export class EditorComponent extends React.Component { componentDidMount() { this._recordCurrentState(); + if (this.props.focusOnWindowFocus) { + window.addEventListener("focus", this._focusInput); + } + } + + componentWillUnmount() { + if (this.props.focusOnWindowFocus) { + window.removeEventListener("focus", this._focusInput); + } } private _recordCurrentState = () => { @@ -161,6 +171,13 @@ export class EditorComponent extends React.Component { this._history.offset++; }; + private _focusInput = () => { + const input = this._input; + + if (!input) return; + input.focus(); + }; + private _updateInput = (record: Record) => { const input = this._input; @@ -466,7 +483,7 @@ export class EditorComponent extends React.Component { selectionStart, selectionEnd, }, - true, + true ); this.props.onValueChange(value); @@ -516,6 +533,7 @@ export class EditorComponent extends React.Component { insertSpaces, ignoreTabKey, preClassName, + focusOnWindowFocus, ...rest } = this.props; diff --git a/src/features/debugger/components/debugger-toolbar/debugger-toolbar.component.tsx b/src/features/debugger/components/debugger-toolbar/debugger-toolbar.component.tsx index 8c7d0201..c224994e 100644 --- a/src/features/debugger/components/debugger-toolbar/debugger-toolbar.component.tsx +++ b/src/features/debugger/components/debugger-toolbar/debugger-toolbar.component.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; import styles from "./debugger-toolbar.module.scss"; import { BoxComponent } from "@/features/common/components/box/box.component"; import { useDebuggerStore } from "@/features/debugger/services/debugger.store"; @@ -18,9 +18,22 @@ interface DebuggerToolbarComponentProps { export const DebuggerToolbarComponent: React.FC< DebuggerToolbarComponentProps > = ({ decoderDictionary, encoderDictionary, mode }) => { + const tabRefs = useRef>([]); const activeWidget$ = useDebuggerStore((state) => state.activeWidget$); - const setActiveWidget$ = useDebuggerStore((state) => state.setActiveWidget$); + const isDecoder = activeWidget$ === DebuggerWidgetValues.DECODER; + + const handleKeyDown = (e: React.KeyboardEvent) => { + const { key } = e; + + if (key == "ArrowRight" || key == "ArrowLeft") { + setActiveWidget$( + isDecoder ? DebuggerWidgetValues.ENCODER : DebuggerWidgetValues.DECODER + ); + e.preventDefault(); + } + tabRefs.current[isDecoder ? 0 : 1]?.focus(); + }; if (mode === DebuggerModeValues.UNIFIED) { return ( @@ -40,8 +53,15 @@ export const DebuggerToolbarComponent: React.FC< onClick={() => { setActiveWidget$(DebuggerWidgetValues.DECODER); }} + onKeyDown={handleKeyDown} data-active={activeWidget$ === DebuggerWidgetValues.DECODER} data-testid={dataTestidDictionary.debugger.decoderTab.id} + aria-selected={activeWidget$ === DebuggerWidgetValues.DECODER} + aria-controls={`${DebuggerWidgetValues.DECODER}-panel`} + ref={(el) => { + tabRefs.current[0] = el; + }} + tabIndex={activeWidget$ === DebuggerWidgetValues.DECODER ? 0 : -1} > {decoderDictionary.compactTitle} @@ -53,11 +73,18 @@ export const DebuggerToolbarComponent: React.FC<
  • { setActiveWidget$(DebuggerWidgetValues.ENCODER); }} data-active={activeWidget$ === DebuggerWidgetValues.ENCODER} data-testid={dataTestidDictionary.debugger.encoderTab.id} + aria-selected={activeWidget$ === DebuggerWidgetValues.ENCODER} + aria-controls={`${DebuggerWidgetValues.ENCODER}-panel`} + ref={(el) => { + tabRefs.current[1] = el; + }} + tabIndex={activeWidget$ === DebuggerWidgetValues.ENCODER ? 0 : -1} > {encoderDictionary.compactTitle} diff --git a/src/features/decoder/components/jwt-editor.component.tsx b/src/features/decoder/components/jwt-editor.component.tsx index 62757a40..88bf2859 100644 --- a/src/features/decoder/components/jwt-editor.component.tsx +++ b/src/features/decoder/components/jwt-editor.component.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { EditorComponent } from "@/features/common/components/code-editor/editor.component"; interface JwtEditorComponentProps { @@ -14,6 +14,8 @@ export const JwtEditorComponent: React.FC = ({ handleJwtChange(code)} highlight={(code) => { if (!code) {