Use codemirror merge addon to replace mis-merge

Author: yaoweiprc

packages/insomnia/package.json

@@ -40,8 +40,8 @@
     "@apideck/better-ajv-errors": "^0.3.6",
     "@apidevtools/swagger-parser": "10.1.1",
     "@bufbuild/protobuf": "^1.10.0",
-    "@connectrpc/connect-node": "^1.6.1",
     "@connectrpc/connect": "^1.6.1",
+    "@connectrpc/connect-node": "^1.6.1",
     "@faker-js/faker": "9.7.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
@@ -71,26 +71,27 @@
     "autoprefixer": "^10.4.21",
     "aws4": "^1.13.2",
     "buffer": "^6.0.3",
-    "chai-json-schema": "1.5.1",
     "chai": "^4.5.0",
+    "chai-json-schema": "1.5.1",
     "chardet": "^2.1.0",
     "classnames": "^2.5.1",
     "clone": "^2.1.2",
-    "codemirror-graphql": "^2.2.0",
     "codemirror": "^5.65.19",
+    "codemirror-graphql": "^2.2.0",
     "color": "^4.2.3",
     "content-disposition": "^0.5.4",
     "cookie-parser": "^1.4.7",
     "date-fns": "^3.6.0",
     "decompress": "^4.2.1",
     "deep-equal": "^1.1.2",
+    "diff-match-patch-ts": "^0.6.0",
     "dompurify": "^3.2.5",
     "electron-context-menu": "^3.6.1",
     "electron-updater": "^6.6.2",
     "fastq": "^1.19.1",
     "fuzzysort": "^1.9.0",
-    "graphql-ws": "^5.16.2",
     "graphql": "^16.10.0",
+    "graphql-ws": "^5.16.2",
     "grpc-reflection-js": "Kong/grpc-reflection-js#master",
     "gsap": "^3.12.7",
     "hawk": "9.0.2",
@@ -121,14 +122,14 @@
     "oauth-1.0a": "^2.2.6",
     "objectpath": "^2.0.0",
     "papaparse": "^5.5.2",
-    "react-aria-components": "^1.12.2",
+    "react": "^18.3.1",
     "react-aria": "3.43.2",
+    "react-aria-components": "^1.12.2",
     "react-dom": "^18.3.1",
     "react-resizable-panels": "^3.0.6",
     "react-router": "^7.9.4",
     "react-stately": "3.41.0",
     "react-use": "^17.6.0",
-    "react": "^18.3.1",
     "shell-quote": "^1.8.2",
     "socket.io-client": "^4.8.1",
     "swagger-ui-dist": "^5.21.0",

packages/insomnia/src/ui/components/.client/codemirror/base-imports.ts

@@ -33,6 +33,7 @@ import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/selection/selection-pointer';
 import 'codemirror/addon/display/placeholder';
 import 'codemirror/addon/lint/lint';
+import 'codemirror/addon/merge/merge.js';
 
 // for the code that uses this yaml parser, see https://github.com/codemirror/CodeMirror/blob/master/addon/lint/yaml-lint.js
 import * as jsyaml from 'js-yaml';

packages/insomnia/src/ui/components/.client/codemirror/merge-editor.tsx

@@ -0,0 +1,85 @@
+import './base-imports';
+
+import classnames from 'classnames';
+import CodeMirror from 'codemirror';
+import type { MergeView } from 'codemirror/addon/merge/merge';
+import { DiffMatchPatch, DiffOp } from 'diff-match-patch-ts';
+import React, { useEffect, useRef } from 'react';
+
+import { useIsLightTheme } from '~/ui/hooks/theme';
+
+// these global variables are required by codemirror merge addon
+window.diff_match_patch = DiffMatchPatch;
+window.DIFF_DELETE = DiffOp.Delete;
+window.DIFF_INSERT = DiffOp.Insert;
+window.DIFF_EQUAL = DiffOp.Equal;
+
+interface Props {
+  leftContent: string;
+  rightContent: string;
+  centerContent: string;
+  onChange: (value: string) => void;
+}
+
+export const MergeEditor = ({ leftContent, rightContent, centerContent, onChange }: Props) => {
+  const divRef = useRef<HTMLDivElement>(null);
+  const mergeViewRef = useRef<MergeView | null>(null);
+
+  const leftContentRef = useRef(leftContent);
+  const rightContentRef = useRef(rightContent);
+  const centerContentRef = useRef(centerContent);
+  const onChangeRef = useRef<(value: string) => void>(onChange);
+
+  useEffect(() => {
+    leftContentRef.current = leftContent;
+    rightContentRef.current = rightContent;
+    centerContentRef.current = centerContent;
+    onChangeRef.current = onChange;
+  }, [leftContent, rightContent, centerContent, onChange]);
+
+  const isLightTheme = useIsLightTheme();
+  const isLightThemeRef = useRef(isLightTheme);
+
+  useEffect(() => {
+    const onChange = (instance: CodeMirror.Editor) => {
+      onChangeRef.current(instance.getDoc().getValue());
+    };
+    if (!divRef.current) {
+      return;
+    }
+    const div = divRef.current;
+    mergeViewRef.current = CodeMirror.MergeView(div, {
+      value: centerContentRef.current,
+      origLeft: leftContentRef.current,
+      origRight: rightContentRef.current,
+      lineNumbers: true,
+      mode: 'yaml',
+      theme: isLightThemeRef.current ? 'default' : 'base16-dark',
+    });
+    mergeViewRef.current.editor().on('changes', onChange);
+    return () => {
+      if (mergeViewRef.current) {
+        mergeViewRef.current.editor().off('changes', onChange);
+      }
+      mergeViewRef.current = null;
+      if (div) {
+        div.innerHTML = '';
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (mergeViewRef.current?.editor().getDoc().getValue() !== centerContent) {
+      mergeViewRef.current?.editor().getDoc().setValue(centerContent);
+    }
+  }, [centerContent]);
+
+  return (
+    <div
+      className={classnames('h-full', {
+        'dark-merge-editor': !isLightTheme,
+      })}
+      ref={divRef}
+    />
+  );
+};

packages/insomnia/src/ui/components/dropdowns/git-project-sync-dropdown.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-aria-components';
 import { useParams, useRevalidator } from 'react-router';
 import * as reactUse from 'react-use';
+import { parse, stringify } from 'yaml';
 
 import { useGitProjectCheckoutBranchActionFetcher } from '~/routes/git.branch.checkout';
 import { useGitProjectFetchActionFetcher } from '~/routes/git.fetch';
@@ -35,6 +36,7 @@ import { GitPullRequiredModal } from '../modals/git-pull-required-modal';
 import { GitProjectRepositorySettingsModal } from '../modals/git-repository-settings-modal';
 import { SyncMergeModal } from '../modals/sync-merge-modal';
 import { showToast } from '../toast-notification';
+import resultSample from './merge-result-sample.json';
 interface Props {
   gitRepository?: GitRepository;
 }
@@ -477,6 +479,21 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
 
   const pendingChangesCount = status?.localChanges ?? 0;
 
+  useEffect(() => {
+    for (const conflict of resultSample.conflicts) {
+      if (typeof conflict.mergeResult !== 'string') {
+        conflict.mergeResult = stringify(conflict.mergeResult);
+      }
+    }
+    showModal(SyncMergeModal, {
+      editorType: 'merge',
+      conflicts: resultSample.conflicts,
+      labels: resultSample.labels,
+      onResolveAll: (conflicts: MergeConflict[]) => {},
+      onCancelUnresolved: () => {},
+    });
+  }, []);
+
   return (
     <>
       {operationError && (