fix(Designer): Added tab indentation option to code editor (#8670)

* Added tab indention option to code editor

* Updated unit tests

Author: rllyy97

apps/Standalone/src/designer/app/AzureLogicAppsDesigner/CodeViewV2.tsx

@@ -1,6 +1,6 @@
 import { useMount } from '@fluentui/react-hooks';
 import type { EditorContentChangedEventArgs } from '@microsoft/designer-ui';
-import { MonacoEditor } from '@microsoft/designer-ui';
+import { CodeMirrorEditor } from '@microsoft/designer-ui';
 import { serializeBJSWorkflow, store as DesignerStore, setIsWorkflowDirty, useIsWorkflowDirty } from '@microsoft/logic-apps-designer-v2';
 import type { AppDispatch } from '@microsoft/logic-apps-designer-v2';
 import { EditorLanguage, isNullOrUndefined } from '@microsoft/logic-apps-shared';
@@ -60,14 +60,15 @@ const CodeViewEditor = forwardRef(({ workflowKind, isConsumption }: CodeViewProp
   return (
     <div>
       {isNullOrUndefined(code) ? null : (
-        <MonacoEditor
-          height="95vh"
+        <CodeMirrorEditor
+          height="100vh"
           language={EditorLanguage.json}
           value={code}
           overviewRulerBorder={true}
           scrollBeyondLastLine={false}
           fontSize={13}
           onContentChanged={handleContentChanged}
+          indentWithTab={true}
         />
       )}
     </div>

libs/designer-ui/src/lib/editor/codemirror/CodeMirrorEditor.tsx

@@ -80,6 +80,7 @@ export const CodeMirrorEditor = forwardRef<CodeMirrorEditorRef, CodeMirrorEditor
       onEditorRef,
       onMouseDown,
       openTokenPicker,
+      indentWithTab,
     },
     ref
   ) => {
@@ -171,7 +172,7 @@ export const CodeMirrorEditor = forwardRef<CodeMirrorEditorRef, CodeMirrorEditor
           onScrollChanged,
           onMouseDown,
         }),
-        keybindingsCompartment.of(createKeybindingExtensions({ openTokenPicker })),
+        keybindingsCompartment.of(createKeybindingExtensions({ openTokenPicker, indentWithTab })),
         EditorView.theme({
           '&': {
             fontSize: `${fontSize}px`,
@@ -275,10 +276,10 @@ export const CodeMirrorEditor = forwardRef<CodeMirrorEditorRef, CodeMirrorEditor
     useEffect(() => {
       if (viewRef.current) {
         viewRef.current.dispatch({
-          effects: keybindingsCompartment.reconfigure(createKeybindingExtensions({ openTokenPicker })),
+          effects: keybindingsCompartment.reconfigure(createKeybindingExtensions({ openTokenPicker, indentWithTab })),
         });
       }
-    }, [openTokenPicker]);
+    }, [openTokenPicker, indentWithTab]);
 
     // Update value when controlled value changes
     useEffect(() => {

libs/designer-ui/src/lib/editor/codemirror/extensions/__tests__/keybindings.test.ts

@@ -18,4 +18,20 @@ describe('createKeybindingExtensions', () => {
     // Base keybindings (default + history) are always included
     expect(extensions.length).toBeGreaterThan(0);
   });
+
+  it('should include indent with tab keybinding when indentWithTab is true', () => {
+    const extensions = createKeybindingExtensions({ indentWithTab: true });
+    // Should contain base keybindings (2) + tabSize (1) + keymap (1)
+    expect(extensions.length).toBe(4);
+    // This is a bit of a hack, but there's no easy way to inspect the keymap
+    const keymapExtension = extensions[3] as any;
+    expect(keymapExtension.value.length).toBe(2);
+    expect(keymapExtension.value[0].key).toBe('Tab');
+    expect(keymapExtension.value[1].key).toBe('Shift-Tab');
+  });
+
+  it('should not include indent with tab keybinding when indentWithTab is false', () => {
+    const extensions = createKeybindingExtensions({ indentWithTab: false });
+    expect(extensions.length).toBe(2);
+  });
 });

libs/designer-ui/src/lib/editor/codemirror/extensions/keybindings.ts

@@ -1,14 +1,34 @@
-import type { Extension } from '@codemirror/state';
+import { EditorState, type Extension } from '@codemirror/state';
 import { keymap, EditorView } from '@codemirror/view';
-import { defaultKeymap, historyKeymap } from '@codemirror/commands';
+import { defaultKeymap, historyKeymap, indentLess, insertTab } from '@codemirror/commands';
 
 export interface KeybindingExtensionOptions {
   openTokenPicker?(): void;
+  indentWithTab?: boolean;
 }
 
 export const createKeybindingExtensions = (options: KeybindingExtensionOptions): Extension[] => {
   const extensions: Extension[] = [keymap.of(defaultKeymap), keymap.of(historyKeymap)];
 
+  // Optionally add indent with tab keybinding
+  if (options.indentWithTab) {
+    extensions.push(
+      EditorState.tabSize.of(2),
+      keymap.of([
+        {
+          key: 'Tab',
+          preventDefault: true,
+          run: insertTab,
+        },
+        {
+          key: 'Shift-Tab',
+          preventDefault: true,
+          run: indentLess,
+        },
+      ])
+    );
+  }
+
   // Alt+/ to open token picker (matching Monaco behavior)
   // On macOS, Option+/ produces ÷ character, so we need to handle the keydown event directly
   if (options.openTokenPicker) {

libs/designer-ui/src/lib/editor/codemirror/types.ts

@@ -32,6 +32,7 @@ export interface CodeMirrorEditorProps {
     vertical?: 'auto' | 'hidden' | 'visible';
   };
   monacoContainerStyle?: React.CSSProperties;
+  indentWithTab?: boolean;
 
   // Event callbacks
   onBlur?(): void;

libs/designer-ui/src/lib/editor/monaco/index.tsx

@@ -5,6 +5,7 @@
 
 // Re-export the editor component with Monaco name
 export { CodeMirrorEditor as MonacoEditor } from '../codemirror';
+export { CodeMirrorEditor } from '../codemirror';
 
 // Re-export types with Monaco-compatible names
 export type {