Some styling

src/views/conflicts-resolution/component.tsx

@@ -3,7 +3,6 @@ import { useEffect, useRef } from "react";
 import { EditorView } from "@codemirror/view";
 import { EditorState } from "@codemirror/state";
 import { markdown } from "@codemirror/lang-markdown";
-import { basicSetup } from "codemirror";
 import diff from "./diff";
 import { createDiffHighlightPlugin } from "./diff-highlight-plugin";
 
@@ -11,10 +10,10 @@ import { createDiffHighlightPlugin } from "./diff-highlight-plugin";
 const styles = document.createElement("style");
 styles.innerHTML = `
   .diff-remove-background {
-    background-color: rgba(255, 0, 0, 0.1);
+    background-color: rgba(var(--background-modifier-error-rgb), 0.1);
   }
   .diff-add-background {
-    background-color: rgba(0, 255, 0, 0.1);
+    background-color: rgba(var(--color-green-rgb), 0.1);
   }
 `;
 document.head.appendChild(styles);
@@ -64,11 +63,26 @@ const DiffView: React.FC<DiffViewProps> = ({
       const state = EditorState.create({
         doc: content,
         extensions: [
-          basicSetup,
-          markdown(),
+          // basicSetup minus line numbers
           EditorView.lineWrapping,
           EditorView.editable.of(!readOnly),
           highlightPlugin,
+          EditorView.theme({
+            "&": {
+              backgroundColor: "var(--background-primary)",
+              color: "var(--text-normal)",
+            },
+            ".cm-line": {
+              padding: "0 4px",
+            },
+            "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": {
+              background: "var(--text-selection)",
+            },
+            "&.cm-focused .cm-cursor": {
+              borderLeftColor: "var(--text-normal)",
+            },
+          }),
+          markdown(),
           ...changeListener,
         ],
       });

src/views/conflicts-resolution/diff-highlight-plugin.ts

@@ -21,27 +21,31 @@ export function createDiffHighlightPlugin(spec: DiffHighlightPluginSpec) {
       }
 
       buildDecorations(view: EditorView): DecorationSet {
-        const doc = view.state.doc.toString();
+        const decorations = [];
+        const doc = view.state.doc;
 
-        const decorations = spec.diff
-          .map((d) => {
-            if (
-              (spec.isOriginal && d.type === "remove") ||
-              (!spec.isOriginal && d.type === "add")
-            ) {
-              // Find the text position in the actual document
-              const pos = doc.indexOf(d.value);
-              if (pos !== -1) {
-                return Decoration.mark({
-                  class: spec.isOriginal
-                    ? "diff-remove-background"
-                    : "diff-add-background",
-                }).range(pos, pos + d.value.length);
-              }
-            }
-            return null;
-          })
-          .filter((d): d is NonNullable<typeof d> => d !== null);
+        // Go through the document line by line
+        for (let i = 1; i <= doc.lines; i++) {
+          const line = doc.line(i);
+          const lineText = line.text;
+
+          // Find matching diff for this line
+          const diff = spec.diff.find((d) => d.value === lineText);
+
+          if (
+            diff &&
+            ((spec.isOriginal && diff.type === "remove") ||
+              (!spec.isOriginal && diff.type === "add"))
+          ) {
+            decorations.push(
+              Decoration.mark({
+                class: spec.isOriginal
+                  ? "diff-remove-background"
+                  : "diff-add-background",
+              }).range(line.from, line.to),
+            );
+          }
+        }
 
         return Decoration.set(decorations, true);
       }