feat(DesignerV2): Added merge/diff view to code editor component (#8819)

* Added merge view to code editor component

* Added tests

* Fixed a few issues

Author: rllyy97

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

@@ -13,6 +13,7 @@ interface CodeViewProps {
   isConsumption?: boolean;
 }
 
+// eslint-disable-next-line react/display-name
 const CodeViewEditor = forwardRef(({ workflowKind, isConsumption }: CodeViewProps, ref) => {
   const dispatch = useDispatch<AppDispatch>();
   const isWorkflowIsDirty = useIsWorkflowDirty();

libs/designer-ui/package.json

@@ -12,6 +12,7 @@
     "@codemirror/language": "^6.10.0",
     "@codemirror/legacy-modes": "^6.4.0",
     "@codemirror/lint": "^6.8.0",
+    "@codemirror/merge": "^6.12.0",
     "@codemirror/search": "^6.5.0",
     "@codemirror/state": "^6.4.0",
     "@codemirror/view": "^6.28.0",
@@ -21,9 +22,6 @@
     "@fluentui/react-icons": "2.0.224",
     "@fluentui/theme": "2.6.25",
     "@fluentui/utilities": "8.15.0",
-    "@lezer/common": "^1.2.0",
-    "@lezer/highlight": "^1.2.0",
-    "@lezer/lr": "^1.4.0",
     "@lexical/html": "0.33.1",
     "@lexical/link": "0.33.1",
     "@lexical/list": "0.33.1",
@@ -32,6 +30,9 @@
     "@lexical/selection": "0.33.1",
     "@lexical/table": "0.33.1",
     "@lexical/utils": "0.33.1",
+    "@lezer/common": "^1.2.0",
+    "@lezer/highlight": "^1.2.0",
+    "@lezer/lr": "^1.4.0",
     "@microsoft/logic-apps-shared": "workspace:*",
     "@react-hookz/web": "22.0.0",
     "@xyflow/react": "^12.3.5",
@@ -60,7 +61,10 @@
     },
     "./package.json": "./package.json"
   },
-  "files": ["build/lib/**/*", "src"],
+  "files": [
+    "build/lib/**/*",
+    "src"
+  ],
   "license": "MIT",
   "main": "src/index.ts",
   "module": "src/index.ts",

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

@@ -12,6 +12,7 @@ import { xml } from '@codemirror/lang-xml';
 import { yaml } from '@codemirror/lang-yaml';
 import { csharp } from '@codemirror/legacy-modes/mode/clike';
 import { powerShell } from '@codemirror/legacy-modes/mode/powershell';
+import { MergeView } from '@codemirror/merge';
 import { useTheme } from '@fluentui/react';
 import { EditorLanguage } from '@microsoft/logic-apps-shared';
 import { createFluentTheme } from './themes/fluent';
@@ -59,6 +60,8 @@ export const CodeMirrorEditor = forwardRef<CodeMirrorEditorRef, CodeMirrorEditor
       className,
       defaultValue = '',
       value,
+      originalValue,
+      showMerge,
       language,
       height,
       width,
@@ -87,6 +90,7 @@ export const CodeMirrorEditor = forwardRef<CodeMirrorEditorRef, CodeMirrorEditor
     const { isInverted } = useTheme();
     const containerRef = useRef<HTMLDivElement>(null);
     const viewRef = useRef<EditorView | null>(null);
+    const mergeViewRef = useRef<MergeView | null>(null);
     const isInitializedRef = useRef(false);
 
     // Create ref methods
@@ -149,6 +153,54 @@ export const CodeMirrorEditor = forwardRef<CodeMirrorEditorRef, CodeMirrorEditor
       }
       isInitializedRef.current = true;
 
+      const baseThemeSpec = {
+        '&': {
+          fontSize: `${fontSize}px`,
+          height: '100%',
+          minHeight: '100px',
+          boxSizing: 'border-box',
+        },
+        '.cm-scroller': {
+          overflow: 'auto',
+          fontFamily: '"SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+          fontWeight: '500',
+          letterSpacing: '0.5px',
+          lineHeight: '1.4',
+        },
+        '.cm-content': {
+          textAlign: 'left',
+          padding: '4px 0',
+          fontVariantLigatures: 'none',
+        },
+        '.cm-line': {
+          padding: '0 4px',
+        },
+        '.cm-gutterElement': {
+          fontFamily: '"SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+          fontWeight: '500',
+        },
+        '.cm-changedLine': {
+          backgroundColor: 'rgba(100, 255, 128, .12) !important',
+        },
+      };
+
+      const editorTheme = EditorView.theme({
+        ...baseThemeSpec,
+        '&': {
+          ...baseThemeSpec['&'],
+          border: `1px solid ${isInverted ? '#605e5c' : '#8a8886'}`,
+          borderRadius: '2px',
+        },
+        '&.cm-focused': {
+          outline: 'none',
+          borderColor: '#0078d4',
+        },
+        '.cm-gutters': {
+          borderRight: `1px solid ${isInverted ? '#3b3a39' : '#e1e1e1'}`,
+          backgroundColor: isInverted ? '#252423' : '#f3f3f3',
+        },
+      });
+
       const extensions = [
         history(),
         bracketMatching(),
@@ -173,43 +225,7 @@ export const CodeMirrorEditor = forwardRef<CodeMirrorEditorRef, CodeMirrorEditor
           onMouseDown,
         }),
         keybindingsCompartment.of(createKeybindingExtensions({ openTokenPicker, indentWithTab })),
-        EditorView.theme({
-          '&': {
-            fontSize: `${fontSize}px`,
-            height: '100%',
-            minHeight: '100px',
-            border: `1px solid ${isInverted ? '#605e5c' : '#8a8886'}`,
-            borderRadius: '2px',
-            boxSizing: 'border-box',
-          },
-          '&.cm-focused': {
-            outline: 'none',
-            borderColor: '#0078d4',
-          },
-          '.cm-scroller': {
-            overflow: 'auto',
-            fontFamily: '"SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-            fontWeight: '500',
-            letterSpacing: '0.5px',
-            lineHeight: '1.4',
-          },
-          '.cm-content': {
-            textAlign: 'left',
-            padding: '4px 0',
-            fontVariantLigatures: 'none',
-          },
-          '.cm-line': {
-            padding: '0 4px',
-          },
-          '.cm-gutterElement': {
-            fontFamily: '"SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-            fontWeight: '500',
-          },
-          '.cm-gutters': {
-            borderRight: `1px solid ${isInverted ? '#3b3a39' : '#e1e1e1'}`,
-            backgroundColor: isInverted ? '#252423' : '#f3f3f3',
-          },
-        }),
+        editorTheme,
       ];
 
       if (lineNumbers === 'on') {
@@ -224,6 +240,47 @@ export const CodeMirrorEditor = forwardRef<CodeMirrorEditorRef, CodeMirrorEditor
         extensions.push(EditorView.lineWrapping);
       }
 
+      if (showMerge) {
+        const mergeView = new MergeView({
+          a: {
+            doc: originalValue ?? '',
+            extensions: [
+              EditorView.editable.of(false),
+              EditorState.readOnly.of(true),
+              themeCompartment.of(createFluentTheme(isInverted)),
+              languageCompartment.of(getLanguageExtension(language)),
+              EditorView.theme({
+                ...baseThemeSpec,
+                '.cm-changedLine': {
+                  backgroundColor: 'rgba(255, 128, 100, .12) !important',
+                },
+                '.cm-content': {
+                  backgroundColor: isInverted ? '#252423' : '#f3f3f3',
+                },
+              }),
+              ...(lineNumbers === 'on' ? [lineNumbersExtension()] : []),
+            ],
+          },
+          b: {
+            doc: value ?? defaultValue,
+            extensions,
+          },
+          parent: containerRef.current,
+        });
+
+        mergeViewRef.current = mergeView;
+        viewRef.current = mergeView.b;
+        onEditorRef?.(editorRef);
+        onEditorLoaded?.();
+
+        return () => {
+          mergeView.destroy();
+          mergeViewRef.current = null;
+          viewRef.current = null;
+          isInitializedRef.current = false;
+        };
+      }
+
       const state = EditorState.create({
         doc: value ?? defaultValue,
         extensions,
@@ -243,26 +300,53 @@ export const CodeMirrorEditor = forwardRef<CodeMirrorEditorRef, CodeMirrorEditor
         viewRef.current = null;
         isInitializedRef.current = false;
       };
-    }, []); // Only run once on mount
+    }, [showMerge, originalValue]); // Recreate editor when merge values change
 
     // Update theme when inverted changes
     useEffect(() => {
+      const newTheme = createFluentTheme(isInverted);
       if (viewRef.current) {
         viewRef.current.dispatch({
-          effects: themeCompartment.reconfigure(createFluentTheme(isInverted)),
+          effects: themeCompartment.reconfigure(newTheme),
+        });
+      }
+      // Also update panel A in merge view
+      if (mergeViewRef.current) {
+        mergeViewRef.current.a.dispatch({
+          effects: themeCompartment.reconfigure(newTheme),
         });
       }
     }, [isInverted]);
 
     // Update language when it changes
     useEffect(() => {
+      const newLang = getLanguageExtension(language);
       if (viewRef.current) {
         viewRef.current.dispatch({
-          effects: languageCompartment.reconfigure(getLanguageExtension(language)),
+          effects: languageCompartment.reconfigure(newLang),
+        });
+      }
+      // Also update panel A in merge view
+      if (mergeViewRef.current) {
+        mergeViewRef.current.a.dispatch({
+          effects: languageCompartment.reconfigure(newLang),
         });
       }
     }, [language]);
 
+    // Update originalValue in merge view panel A when it changes
+    useEffect(() => {
+      if (mergeViewRef.current && originalValue !== undefined) {
+        const panelA = mergeViewRef.current.a;
+        const currentValue = panelA.state.doc.toString();
+        if (originalValue !== currentValue) {
+          panelA.dispatch({
+            changes: { from: 0, to: panelA.state.doc.length, insert: originalValue },
+          });
+        }
+      }
+    }, [originalValue]);
+
     // Update readOnly when it changes
     useEffect(() => {
       if (viewRef.current) {
@@ -296,6 +380,7 @@ export const CodeMirrorEditor = forwardRef<CodeMirrorEditorRef, CodeMirrorEditor
     const containerStyle: React.CSSProperties = {
       height: height ?? '100%',
       width: width ?? '100%',
+      overflow: 'auto',
       ...monacoContainerStyle,
     };