diff --git a/src/views/conflicts-resolution/component.tsx b/src/views/conflicts-resolution/component.tsx index 1ac2dd1..05d25e0 100644 --- a/src/views/conflicts-resolution/component.tsx +++ b/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 = ({ 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, ], }); diff --git a/src/views/conflicts-resolution/diff-highlight-plugin.ts b/src/views/conflicts-resolution/diff-highlight-plugin.ts index 26ae04a..2c4f93a 100644 --- a/src/views/conflicts-resolution/diff-highlight-plugin.ts +++ b/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 => 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); }