feat: restore focus on editor when pane/apply/fix buttons used (#344)

deneb-viz · May 15, 2024 · 68611da · 68611da
1 parent 348b337
commit 68611da
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 41 deletions.
diff --git a/src/features/commands/index.ts b/src/features/commands/index.ts
@@ -21,10 +21,14 @@ import {
     IZoomOtherCommandTestOptions,
     IZoomLevelCommandTestOptions
 } from './types';
-import { EditorApplyMode, TEditorRole } from '../json-editor';
+import {
+    EditorApplyMode,
+    IEditorRefs,
+    TEditorRole,
+    setFocusToActiveEditor
+} from '../json-editor';
 import { APPLICATION_INFORMATION, VISUAL_PREVIEW_ZOOM } from '../../../config';
 import { launchUrl } from '../visual-host';
-import { IAceEditor } from 'react-ace/lib/types';
 
 export * from './types';
 
@@ -59,25 +63,24 @@ export const getNextApplyMode = (applyMode: EditorApplyMode): EditorApplyMode =>
 /**
  * Applies the changes to the specification.
  */
-export const handleApplyChanges = (
-    specEditor: IAceEditor,
-    configEditor: IAceEditor
-) =>
+export const handleApplyChanges = (editorRefs: IEditorRefs) => {
     executeCommand('applyChanges', () =>
-        persistSpecification(specEditor, configEditor)
+        persistSpecification(
+            editorRefs?.spec.current.editor,
+            editorRefs?.config.current.editor
+        )
     );
+    setFocusToActiveEditor(editorRefs);
+};
 
 /**
  * Toggles the auto-apply changes mode.
  */
-export const handleAutoApplyChanges = (
-    specEditor: IAceEditor,
-    configEditor: IAceEditor
-) => {
+export const handleAutoApplyChanges = (editorRefs: IEditorRefs) => {
     const {
         editor: { toggleApplyMode }
     } = getState();
-    handleApplyChanges(specEditor, configEditor);
+    handleApplyChanges(editorRefs);
     executeCommand('autoApplyToggle', toggleApplyMode);
 };
 
@@ -111,10 +114,11 @@ export const handleDebugPaneSignal = () => {
 /**
  * Sets editor to config.
  */
-export const handleEditorPaneConfig = () => {
+export const handleEditorPaneConfig = (editorRefs: IEditorRefs) => {
     executeCommand('navigateConfig', () => {
         setEditorPivotItem('Config');
     });
+    editorRefs.config?.current?.editor?.focus();
 };
 
 /**
@@ -129,10 +133,11 @@ export const handleEditorPaneSettings = () => {
 /**
  * Sets editor to specification.
  */
-export const handleEditorPaneSpecification = () => {
+export const handleEditorPaneSpecification = (editorRefs: IEditorRefs) => {
     executeCommand('navigateSpecification', () => {
         setEditorPivotItem('Spec');
     });
+    editorRefs.spec?.current?.editor?.focus();
 };
 
 /**
@@ -146,13 +151,15 @@ export const handleExportSpecification = () =>
 /**
  * Invokes JSON formatting.
  */
-export const handleFormatJson = (
-    specEditor: IAceEditor,
-    configEditor: IAceEditor
-) =>
+export const handleFormatJson = (editorRefs: IEditorRefs) => {
     executeCommand('formatJson', () =>
-        fixAndFormatSpecification(specEditor, configEditor)
+        fixAndFormatSpecification(
+            editorRefs?.spec.current.editor,
+            editorRefs?.config.current.editor
+        )
     );
+    setFocusToActiveEditor(editorRefs);
+};
 
 export const handleOpenCreateSpecificationDialog = () => {
     executeCommand('newSpecification', () => {

diff --git a/src/features/interface/components/advanced-editor-interface.tsx b/src/features/interface/components/advanced-editor-interface.tsx
@@ -68,25 +68,21 @@ export const AdvancedEditorInterface: React.FC = () => {
         }),
         shallow
     );
-    const { spec, config } = useJsonEditorContext();
+    const editorRefs = useJsonEditorContext();
     const hotkeyHandler = (command: Command, callback: () => void) =>
         useHotkeys(getCommandKey(command), callback, HOTKEY_OPTIONS);
-    hotkeyHandler('applyChanges', () =>
-        handleApplyChanges(spec?.current.editor, config?.current.editor)
-    );
-    hotkeyHandler('autoApplyToggle', () =>
-        handleAutoApplyChanges(spec?.current.editor, config?.current.editor)
-    );
-    hotkeyHandler('formatJson', () =>
-        handleFormatJson(spec?.current.editor, config?.current.editor)
-    );
+    hotkeyHandler('applyChanges', () => handleApplyChanges(editorRefs));
+    hotkeyHandler('autoApplyToggle', () => handleAutoApplyChanges(editorRefs));
+    hotkeyHandler('formatJson', () => handleFormatJson(editorRefs));
     hotkeyHandler('newSpecification', handleOpenCreateSpecificationDialog);
     hotkeyHandler('exportSpecification', handleExportSpecification);
     hotkeyHandler('fieldMappings', handleOpenRemapDialog);
     hotkeyHandler('themeToggle', handleToggleEditorTheme);
     hotkeyHandler('helpSite', handleOpenWebsite);
-    hotkeyHandler('navigateSpecification', handleEditorPaneSpecification);
-    hotkeyHandler('navigateConfig', handleEditorPaneConfig);
+    hotkeyHandler('navigateSpecification', () =>
+        handleEditorPaneSpecification(editorRefs)
+    );
+    hotkeyHandler('navigateConfig', () => handleEditorPaneConfig(editorRefs));
     hotkeyHandler('navigateSettings', handleEditorPaneSettings);
     hotkeyHandler('zoomIn', handleZoomIn);
     hotkeyHandler('zoomOut', handleZoomOut);

diff --git a/src/features/json-editor/components/json-editor.tsx b/src/features/json-editor/components/json-editor.tsx
@@ -236,6 +236,12 @@ export const JsonEditor: React.FC<IJsonEditorProps> = ({ thisEditorRole }) => {
             ),
         [editorText, provider, current]
     );
+    // Ensure that focus is applied if we change the editor role.
+    useEffect(() => {
+        if (isActiveEditor) {
+            ref?.current?.editor?.focus();
+        }
+    }, [provider, current]);
     return (
         <div style={{ display }} className={classes.editorContainer} {...attr}>
             <AceEditor

diff --git a/src/features/toolbar/components/advanced-editor-toolbar.tsx b/src/features/toolbar/components/advanced-editor-toolbar.tsx
@@ -16,7 +16,7 @@ import { shallow } from 'zustand/shallow';
 
 import { getI18nValue } from '../../i18n';
 import store from '../../../store';
-import { TEditorRole } from '../../json-editor';
+import { TEditorRole, useJsonEditorContext } from '../../json-editor';
 import { ApplyMenuButton } from './apply-menu-button';
 import { ToolbarButtonStandard } from './toolbar-button-standard';
 import { useToolbarStyles } from '.';
@@ -32,6 +32,7 @@ export const AdvancedEditorToolbar: React.FC = () => {
         (state) => ({ editorSelectedOperation: state.editorSelectedOperation }),
         shallow
     );
+    const editorRefs = useJsonEditorContext();
     const classes = useToolbarStyles();
     const onPaneModeChange: ToolbarProps['onCheckedValueChange'] = (
         e,
@@ -40,10 +41,10 @@ export const AdvancedEditorToolbar: React.FC = () => {
         const role = checkedItems[0] as TEditorRole;
         switch (role) {
             case 'Spec':
-                handleEditorPaneSpecification();
+                handleEditorPaneSpecification(editorRefs);
                 break;
             case 'Config':
-                handleEditorPaneConfig();
+                handleEditorPaneConfig(editorRefs);
                 break;
             case 'Settings':
                 handleEditorPaneSettings();

diff --git a/src/features/toolbar/components/apply-menu-button.tsx b/src/features/toolbar/components/apply-menu-button.tsx
@@ -33,16 +33,16 @@ export const ApplyMenuButton: React.FC = () => {
         () => (applyMode === 'Manual' ? manualIcon : autoIcon),
         [applyMode]
     );
-    const { spec, config } = useJsonEditorContext();
+    const editorRefs = useJsonEditorContext();
     const onClick = useCallback(() => {
-        handleApplyChanges(spec?.current.editor, config?.current.editor);
+        handleApplyChanges(editorRefs);
     }, []);
     const onAutoSelect = useCallback(() => {
-        handleApplyChanges(spec?.current.editor, config?.current.editor);
+        handleApplyChanges(editorRefs);
         updateApplyMode('Auto');
     }, []);
     const onManualSelect = useCallback(() => {
-        handleApplyChanges(spec?.current.editor, config?.current.editor);
+        handleApplyChanges(editorRefs);
         updateApplyMode('Manual');
     }, []);
     const classes = useToolbarStyles();

diff --git a/src/features/toolbar/components/toolbar-button-standard.tsx b/src/features/toolbar/components/toolbar-button-standard.tsx
@@ -69,9 +69,8 @@ export const ToolbarButtonStandard: React.FC<IToolbarButtonProps> = ({
         role === 'debug' ? classes.buttonSmall : '',
         resolveClasses(command)
     );
-    const { spec, config } = useJsonEditorContext();
-    const handleClick = () =>
-        resolveClick(command)(spec?.current.editor, config?.current.editor);
+    const editorRefs = useJsonEditorContext();
+    const handleClick = () => resolveClick(command)(editorRefs);
     const [ref, setRef] = useState<HTMLElement | null>();
     return (
         <>