Brow 326 add merge view (#693)

* add codemirror merge diff view

* enable gutter for mergeView

* use ndl token colors for diff view

* add react codemirror demo for diff view

* add changeset

* suggested modification to demo

* remove unnecessary reanchor for inline panel when diff view is rendered

* fix reanchor when line is deleted

* update react-codemirror playground

* fix the panel position when prev position is higher than the current number of lines in the new updated query

---------

Co-authored-by: Isak <isak.nilsson@neo4j.com>

Author: alisasanib

.changeset/fuzzy-boxes-kneel.md

@@ -0,0 +1,6 @@
+---
+"@neo4j-cypher/react-codemirror-playground": patch
+"@neo4j-cypher/react-codemirror": patch
+---
+
+Add diff view to the Cypher editor using @codemirror/merge

packages/react-codemirror-playground/src/App.tsx

@@ -1,6 +1,7 @@
 import { DbSchema, testData } from '@neo4j-cypher/language-support';
 import {
   CypherEditor,
+  type DiffProps,
   type InlinePanelProps,
 } from '@neo4j-cypher/react-codemirror';
 import { useCallback, useMemo, useRef, useState } from 'react';
@@ -33,15 +34,15 @@ function InlinePanelDemo({ onClose }: { onClose: () => void }) {
 }
 
 const demos = {
-  allTokenTypes: `MATCH (variable :Label)-[:REL_TYPE]->() 
-WHERE variable.property = "String" 
+  allTokenTypes: `MATCH (variable :Label)-[:REL_TYPE]->()
+WHERE variable.property = "String"
     OR namespaced.function() = false
     // comment
-    OR $parameter > 2 
+    OR $parameter > 2
 RETURN variable;`,
   basic: `MATCH (n:Person)
-WHERE n.name = "Steve" 
-RETURN n 
+WHERE n.name = "Steve"
+RETURN n
 LIMIT 12;`,
   subqueries: `UNWIND range(1,100) as _
 CALL {
@@ -50,14 +51,43 @@ CALL {
   MATCH path = (source)-[*1..10]->(target)
   WITH path, reduce(weight = 0, r IN relationships(path) | weight + r.weight) as Weight
   ORDER BY Weight LIMIT 3
-  RETURN length(path) as l, Weight 
-} 
+  RETURN length(path) as l, Weight
+}
 RETURN count(*)`,
   createDatabase: `CREATE DATABASE testdb OPTIONS {existingData: 'use', seedURI:'s3://bucketpath', seedConfig: 'region=eu-west-1', seedCredentials: 'foo;bar'};`,
 } as const;
 
 type DemoName = keyof typeof demos;
 
+const diffExamples: Record<DemoName, { before: string; after: string }> = {
+  allTokenTypes: {
+    before: demos.allTokenTypes,
+    after: demos.allTokenTypes.replace(
+      'WHERE variable.property = "String"',
+      'WHERE variable.property = "Changed String"',
+    ),
+  },
+  basic: {
+    before: demos.basic,
+    after: `MATCH (n:Person)
+WHERE n.name = "Steve"
+WITH n
+ORDER BY n.age DESC
+RETURN n
+LIMIT 12;`,
+  },
+  subqueries: {
+    before: demos.subqueries,
+    after: demos.subqueries
+      .replace('[*1..10]', '[*1..5]')
+      .replace('RETURN count(*)', 'RETURN count(*) LIMIT 1000'),
+  },
+  createDatabase: {
+    before: demos.createDatabase,
+    after: `CREATE DATABASE testdb OPTIONS {existingData: 'ignore', seedURI:'s3://bucketpath', seedConfig: 'region=eu-west-1', seedCredentials: 'foo;bar', storeFormat: 'aligned'};`,
+  },
+};
+
 export function App() {
   const [selectedDemoName, setSelectedDemoName] = useState<DemoName>('basic');
   const [value, setValue] = useState<string>(demos[selectedDemoName]);
@@ -74,35 +104,62 @@ export function App() {
   );
   const [schemaError, setSchemaError] = useState<string | null>(null);
 
-  const [isInlinePanelOpen, setIsInlinePanelOpen] = useState(false);
+  const editorRef = useRef<CypherEditor>(null);
+
+  const [inlinePanel, setInlinePanel] = useState<InlinePanelProps | null>(null);
   const [inlinePanelContainer, setInlinePanelContainer] =
     useState<HTMLElement | null>(null);
 
-  const closeInlinePanel = useCallback(() => setIsInlinePanelOpen(false), []);
+  const openInlinePanel = useCallback(() => {
+    const view = editorRef.current?.editorView.current;
+    if (!view || inlinePanel !== null) return;
+    const stableContainer = document.createElement('div');
+    setInlinePanel({
+      pos: view.state.selection.main.from,
+      onMount: (widgetDiv) => {
+        widgetDiv.appendChild(stableContainer);
+        setInlinePanelContainer(stableContainer);
+      },
+      onUnmount: () => {},
+    });
+  }, [inlinePanel]);
+
+  const closeInlinePanel = useCallback(() => {
+    setInlinePanelContainer(null);
+    setInlinePanel(null);
+  }, []);
+
+  const [diff, setDiff] = useState<DiffProps | null>(null);
+  let beforeValue: string = '';
+  const showDiff = useCallback(() => {
+    beforeValue =
+      editorRef.current?.editorView.current?.state.doc.toString() ?? '';
+    setDiff({ original: beforeValue });
+  }, []);
+  const acceptDiff = useCallback(() => setDiff(null), []);
+  const rejectDiff = useCallback(() => {
+    setValue(beforeValue);
+    setDiff(null);
+  }, []);
+
+  const loadDemoContent = useCallback(() => {
+    const example = diffExamples[selectedDemoName];
+    setValue(example.after);
+    setDiff({ original: example.before });
+  }, [selectedDemoName]);
 
   const extraKeybindings = [
     {
       key: 'Ctrl-Shift-f',
       mac: 'Alt-Shift-f',
       preventDefault: true,
       run: () => {
-        editorRef.current.format();
+        editorRef.current?.format();
         return true;
       },
     },
   ];
 
-  const editorRef = useRef<CypherEditor>(null);
-
-  const inlinePanel: InlinePanelProps | null = isInlinePanelOpen
-    ? {
-        pos:
-          editorRef.current?.editorView.current?.state.selection.main.from ?? 0,
-        onMount: setInlinePanelContainer,
-        onUnmount: () => setInlinePanelContainer(null),
-      }
-    : null;
-
   const treeData = useMemo(() => {
     return getDebugTree(value);
   }, [value]);
@@ -141,14 +198,16 @@ export function App() {
               </button>
             </div>
             <div className="flex gap-1">
-              {Object.keys(demos).map((demoName: DemoName) => (
+              {(Object.keys(demos) as DemoName[]).map((demoName) => (
                 <button
                   key={demoName}
-                  className={`hover:bg-blue-600 text-white font-bold py-1 px-3 rounded 
+                  className={`hover:bg-blue-600 text-white font-bold py-1 px-3 rounded
                 ${selectedDemoName === demoName ? 'bg-blue-600' : 'bg-blue-400'}`}
                   onClick={() => {
                     setSelectedDemoName(demoName);
                     setValue(demos[demoName]);
+                    setDiff(null);
+                    closeInlinePanel();
                   }}
                 >
                   {demoName}
@@ -174,6 +233,7 @@ export function App() {
               }}
               ariaLabel="Cypher Editor"
               inlinePanel={inlinePanel}
+              diff={diff}
             />
             {inlinePanelContainer &&
               createPortal(
@@ -182,7 +242,7 @@ export function App() {
               )}
             <div className="flex gap-4">
               <p
-                onClick={() => editorRef.current.format()}
+                onClick={() => editorRef.current?.format()}
                 className="text-blue-500 cursor-pointer hover:text-blue-700"
                 title={
                   window.navigator.userAgent.includes('Mac')
@@ -193,11 +253,44 @@ export function App() {
                 Format Query
               </p>
               <p
-                onClick={() => setIsInlinePanelOpen((prevState) => !prevState)}
+                onClick={() =>
+                  inlinePanel ? closeInlinePanel() : openInlinePanel()
+                }
                 className="text-blue-500 cursor-pointer hover:text-blue-700"
               >
-                {isInlinePanelOpen ? 'Close inline panel' : 'Open inline panel'}
+                {inlinePanel ? 'Close inline panel' : 'Open inline panel'}
               </p>
+              {diff ? (
+                <>
+                  <p
+                    onClick={acceptDiff}
+                    className="text-green-600 cursor-pointer hover:text-green-800"
+                  >
+                    Accept diff
+                  </p>
+                  <p
+                    onClick={rejectDiff}
+                    className="text-red-600 cursor-pointer hover:text-red-800"
+                  >
+                    Reject diff
+                  </p>
+                </>
+              ) : (
+                <>
+                  <p
+                    onClick={showDiff}
+                    className="text-blue-500 cursor-pointer hover:text-blue-700"
+                  >
+                    Start diff
+                  </p>
+                  <p
+                    onClick={loadDemoContent}
+                    className="text-blue-500 cursor-pointer hover:text-blue-700"
+                  >
+                    Load demo diff
+                  </p>
+                </>
+              )}
             </div>
             {commandRanCount > 0 && (
               <span className="text-gray-400">

packages/react-codemirror/package.json

@@ -44,6 +44,7 @@
     "@codemirror/commands": "^6.8.1",
     "@codemirror/language": "^6.11.2",
     "@codemirror/lint": "^6.8.5",
+    "@codemirror/merge": "^6.12.1",
     "@codemirror/search": "^6.5.11",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.1",

packages/react-codemirror/src/CypherEditor.tsx

@@ -18,6 +18,7 @@ import {
   type InlinePanelCallbacks,
   type InlinePanelController,
 } from './inlinePanel';
+import { createDiffExtension, type DiffProps } from './diffView';
 import {
   formatQuery,
   CypherLanguageService,
@@ -190,6 +191,11 @@ export interface CypherEditorProps {
    * The widget DOM is only rebuilt when `pos` or `placement` change
    */
   inlinePanel?: InlinePanelProps | null;
+  /**
+   * Render a unified diff of the current document against `diff.original`.
+   * Deleted lines are shown as uneditable widgets.
+   */
+  diff?: DiffProps | null;
 }
 
 export type InlinePanelProps = {
@@ -291,6 +297,7 @@ const lineNumbersCompartment = new Compartment();
 const readOnlyCompartment = new Compartment();
 const placeholderCompartment = new Compartment();
 const domEventHandlerCompartment = new Compartment();
+const diffCompartment = new Compartment();
 
 const formatLineNumber =
   (prompt?: string) => (a: number, state: EditorState) => {
@@ -565,6 +572,9 @@ export class CypherEditor extends Component<
             })
           : [],
         this.inlinePanelController.extension,
+        diffCompartment.of(
+          this.props.diff ? createDiffExtension(this.props.diff) : [],
+        ),
       ],
       doc: this.props.value,
     });
@@ -734,6 +744,14 @@ export class CypherEditor extends Component<
       }
     }
 
+    if (prevProps.diff?.original !== this.props.diff?.original) {
+      this.editorView.current.dispatch({
+        effects: diffCompartment.reconfigure(
+          this.props.diff ? createDiffExtension(this.props.diff) : [],
+        ),
+      });
+    }
+
     if (prevProps.domEventHandlers !== this.props.domEventHandlers) {
       this.editorView.current.dispatch({
         effects: domEventHandlerCompartment.reconfigure(

packages/react-codemirror/src/diffView.ts

@@ -0,0 +1,24 @@
+import { unifiedMergeView } from '@codemirror/merge';
+import type { Extension } from '@codemirror/state';
+
+/**
+ * Props for rendering an inline diff in the editor.
+ *
+ * The diff is computed between {@link DiffProps.original} and the *current*
+ * editor document, so streaming/external updates to the document re-diff
+ * automatically against the same original.
+ */
+export type DiffProps = {
+  /** The baseline document the current editor content is compared against. */
+  original: string;
+};
+
+export function createDiffExtension({ original }: DiffProps): Extension {
+  return unifiedMergeView({
+    original,
+    highlightChanges: true,
+    syntaxHighlightDeletions: true,
+    mergeControls: false,
+    gutter: true,
+  });
+}

packages/react-codemirror/src/index.ts

@@ -1,5 +1,6 @@
 export * as LanguageSupport from '@neo4j-cypher/language-support';
 export { CypherEditor } from './CypherEditor';
 export type { InlinePanelProps } from './CypherEditor';
+export type { DiffProps } from './diffView';
 export { cypher } from './lang-cypher/langCypher';
 export { darkThemeConstants, lightThemeConstants } from './themes';