@neo4j-cypher/react-codemirror 2.0.0-next.36 → 2.0.0-next.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-cypher/react-codemirror",
-  "version": "2.0.0-next.36",
+  "version": "2.0.0-next.37",
   "keywords": [
     "codemirror",
     "codemirror 6",
@@ -34,6 +34,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",
@@ -47,8 +48,8 @@
     "style-mod": "^4.1.2",
     "vscode-languageserver-types": "^3.17.3",
     "workerpool": "^9.3.3",
-    "@neo4j-cypher/language-support": "2.0.0-next.33",
-    "@neo4j-cypher/lint-worker": "1.10.1-next.10"
+    "@neo4j-cypher/language-support": "2.0.0-next.34",
+    "@neo4j-cypher/lint-worker": "1.10.1-next.11"
   },
   "devDependencies": {
     "@neo4j-ndl/base": "^3.2.10",

package/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(

package/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,
+  });
+}

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -131,11 +131,6 @@ test('Semantic errors are correctly accumulated', async ({ page, mount }) => {
 
   await mount(<CypherEditor value={query} />);
 
-  await editorPage.checkErrorMessage(
-    'MATCH (n)',
-    'Query cannot conclude with MATCH (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD).',
-  );
-
   await editorPage.checkErrorMessage(
     '-1',
     "Invalid input. '-1' is not a valid value. Must be a positive integer.",
@@ -151,11 +146,6 @@ test('Multiline errors are correctly placed', async ({ page, mount }) => {
 
   await mount(<CypherEditor value={query} />);
 
-  await editorPage.checkErrorMessage(
-    'MATCH (n)',
-    'Query cannot conclude with MATCH (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD).',
-  );
-
   await editorPage.checkErrorMessage(
     '-1',
     "Invalid input. '-1' is not a valid value. Must be a positive integer.",
@@ -171,11 +161,6 @@ test('Validation errors are correctly overlapped', async ({ page, mount }) => {
 
   await mount(<CypherEditor value={query} />);
 
-  await editorPage.checkErrorMessage(
-    '-1',
-    'Query cannot conclude with CALL (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD).',
-  );
-
   await editorPage.checkErrorMessage(
     '-1',
     "Invalid input. '-1' is not a valid value. Must be a positive integer.",

package/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';

package/src/inlinePanel.ts

@@ -79,32 +79,57 @@ export function createInlinePanelController(): InlinePanelController {
     }
   }
 
+  const buildDecoration = (options: InlinePanelShowOptions): DecorationSet =>
+    Decoration.set([
+      Decoration.widget({
+        widget: new InlinePanelWidget(options),
+        block: true,
+        side: options.placement === 'below' ? 1 : -1,
+      }).range(options.pos),
+    ]);
+
+  const readOptions = (
+    decorations: DecorationSet,
+  ): InlinePanelShowOptions | null => {
+    const widget = decorations.iter().value?.spec?.widget;
+    return widget instanceof InlinePanelWidget ? widget.options : null;
+  };
+
   const field = StateField.define<DecorationSet>({
     create() {
       return Decoration.none;
     },
     update(decorations, transaction) {
-      let next: DecorationSet | null = null;
       for (const effect of transaction.effects) {
         if (effect.is(showEffect)) {
-          if (effect.value === null) {
-            next = Decoration.none;
-          } else {
-            const side = effect.value.placement === 'below' ? 1 : -1;
-            next = Decoration.set([
-              Decoration.widget({
-                widget: new InlinePanelWidget(effect.value),
-                block: true,
-                side,
-              }).range(effect.value.pos),
-            ]);
-          }
+          return effect.value === null
+            ? Decoration.none
+            : buildDecoration(effect.value);
         }
       }
-      if (next !== null) {
-        return next;
+
+      // Nothing to do when the panel is closed, or when the document is unchanged
+      if (decorations.size === 0 || !transaction.docChanged) {
+        return decorations.map(transaction.changes);
+      }
+
+      // Re-anchor manually because CodeMirror's default mapping silently drops
+      // block-widget decorations when their anchor line is deleted
+      const options = readOptions(decorations);
+      if (options === null) {
+        return decorations.map(transaction.changes);
       }
-      return decorations.map(transaction.changes);
+      const side = options.placement === 'below' ? 1 : -1;
+      const lineNumber = Math.min(
+        transaction.startState.doc.lineAt(options.pos).number,
+        transaction.newDoc.lines,
+      );
+      const line = transaction.newDoc.line(lineNumber);
+
+      return buildDecoration({
+        ...options,
+        pos: side === 1 ? line.to : line.from,
+      });
     },
     provide: (f) => EditorView.decorations.from(f),
   });

package/src/lang-cypher/createCypherTheme.ts

@@ -18,6 +18,17 @@ import {
   upArrowSvg,
 } from './themeIcons';
 
+export interface DiffColors {
+  /** Background fill for the whole inserted/changed line. */
+  insertedLine: string;
+  /** Highlight for the exact inserted text within a changed line. */
+  insertedText: string;
+  /** Background fill for the whole deleted line widget. */
+  deletedLine: string;
+  /** Highlight for the exact deleted text within a deleted chunk. */
+  deletedText: string;
+}
+
 export interface ThemeOptions {
   dark: boolean;
   editorSettings: {
@@ -40,6 +51,7 @@ export interface ThemeOptions {
   };
   highlightStyles: Partial<Record<HighlightedCypherTokenTypes, string>>;
   inheritBgColor?: boolean;
+  diffColors?: DiffColors;
 }
 
 export const createCypherTheme = ({
@@ -47,6 +59,7 @@ export const createCypherTheme = ({
   editorSettings: settings,
   highlightStyles,
   inheritBgColor,
+  diffColors,
 }: ThemeOptions): Extension => {
   const themeOptions: Record<string, StyleSpec> = {
     '&': {
@@ -218,6 +231,26 @@ export const createCypherTheme = ({
         },
       },
     },
+    ...(diffColors && {
+      '&.cm-merge-b .cm-changedLine': {
+        backgroundColor: diffColors.insertedLine,
+      },
+      '&.cm-merge-b .cm-changedText': {
+        background: diffColors.insertedText,
+      },
+      '&.cm-merge-b .cm-deletedChunk': {
+        backgroundColor: diffColors.deletedLine,
+      },
+      '&.cm-merge-b .cm-deletedChunk .cm-deletedText': {
+        background: diffColors.deletedText,
+      },
+      // Hide the empty deletion widget that unifiedMergeView renders
+      // when the original document is empty (its only line is an empty <del>).
+      '&.cm-merge-b .cm-deletedChunk:has(> .cm-deletedLine:only-child > del > br:only-child)':
+        {
+          display: 'none',
+        },
+    }),
   };
 
   const themeExtension = EditorView.theme(themeOptions, { dark });