Merge pull request #441 from deneb-viz/feature/editor-focus

Improved auto-focus on editor
deneb-viz · May 15, 2024 · 5470869 · 5470869
2 parents 171e7b2 + 68611da
commit 5470869
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 99 deletions.
diff --git a/config/index.ts b/config/index.ts
@@ -97,10 +97,6 @@ export const KEY_BINDINGS = {
         combination: 'ctrl|alt|9,ctrl|alt|num_9',
         functionalArea: 'other'
     },
-    editorFocusOut: {
-        combination: 'esc',
-        functionalArea: 'other'
-    },
     zoomIn: {
         combination: 'ctrl|alt|+,ctrl|alt|=',
         functionalArea: 'other'

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
         "@deneb-viz/integration-powerbi": "*",
         "@deneb-viz/json-processing": "*",
         "@deneb-viz/template-usermeta-schema": "*",
-        "@fluentui/react-components": "^9.50.0",
+        "@fluentui/react-components": "^9.51.0",
         "@fluentui/react-icons": "^2.0.239",
         "@types/ace": "^0.0.44",
         "@types/d3": "^7.1.0",

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();
 };
 
 /**
@@ -143,25 +148,18 @@ export const handleExportSpecification = () =>
         getState().interface.setModalDialogRole('Export');
     });
 
-/**
- * Set focus to the specification editor
- */
-export const handleFocusSpecificationEditor = () => {
-    executeCommand('editorFocusOut', () => {
-        document.getElementById('editor-pivot-spec').focus();
-    });
-};
-
 /**
  * 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
@@ -32,7 +32,6 @@ import {
     handleEditorPaneSettings,
     handleEditorPaneSpecification,
     handleExportSpecification,
-    handleFocusSpecificationEditor,
     handleFormatJson,
     handleOpenCreateSpecificationDialog,
     handleOpenRemapDialog,
@@ -69,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);
@@ -98,7 +93,6 @@ export const AdvancedEditorInterface: React.FC = () => {
     hotkeyHandler('debugPaneShowData', handleDebugPaneData);
     hotkeyHandler('debugPaneShowSignals', handleDebugPaneSignal);
     hotkeyHandler('debugPaneShowLogs', handleDebugPaneLog);
-    hotkeyHandler('editorFocusOut', handleFocusSpecificationEditor);
     const handleResize = (width: number) => {
         updateEditorPaneWidth({
             editorPaneWidth: width,