yaak-mountain-loop/src-web/components/core/Editor/DiffViewer.tsx

import { yaml } from "@codemirror/lang-yaml";
import { syntaxHighlighting } from "@codemirror/language";
import { MergeView } from "@codemirror/merge";
import { EditorView } from "@codemirror/view";
import classNames from "classnames";
import { useEffect, useRef } from "react";
import "./DiffViewer.css";
import { readonlyExtensions, syntaxHighlightStyle } from "./extensions";

interface Props {
  /** Original/previous version (left side) */
  original: string;
  /** Modified/current version (right side) */
  modified: string;
  className?: string;
}

export function DiffViewer({ original, modified, className }: Props) {
  const containerRef = useRef<HTMLDivElement>(null);
  const viewRef = useRef<MergeView | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // Clean up previous instance
    viewRef.current?.destroy();

    const sharedExtensions = [
      yaml(),
      syntaxHighlighting(syntaxHighlightStyle),
      ...readonlyExtensions,
      EditorView.lineWrapping,
    ];

    viewRef.current = new MergeView({
      a: {
        doc: original,
        extensions: sharedExtensions,
      },
      b: {
        doc: modified,
        extensions: sharedExtensions,
      },
      parent: containerRef.current,
      collapseUnchanged: { margin: 2, minSize: 3 },
      highlightChanges: false,
      gutter: true,
      orientation: "a-b",
      revertControls: undefined,
    });

    return () => {
      viewRef.current?.destroy();
      viewRef.current = null;
    };
  }, [original, modified]);

  return (
    <div
      ref={containerRef}
      className={classNames("cm-wrapper cm-multiline h-full w-full", className)}
    />
  );
}