@neo4j-cypher/react-codemirror 2.0.0-next.40 → 2.0.0-next.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-cypher/react-codemirror",
-  "version": "2.0.0-next.40",
+  "version": "2.0.0-next.41",
   "keywords": [
     "codemirror",
     "codemirror 6",
@@ -26,7 +26,9 @@
     "CHANGELOG.md"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/lang-cypher/prism-global.js"
+  ],
   "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts",
   "dependencies": {
@@ -46,23 +48,23 @@
     "style-mod": "^4.1.2",
     "vscode-languageserver-types": "^3.17.3",
     "workerpool": "^9.3.3",
-    "@neo4j-cypher/language-support": "2.0.0-next.37",
-    "@neo4j-cypher/lint-worker": "1.10.1-next.14"
+    "@neo4j-cypher/language-support": "2.0.0-next.38",
+    "@neo4j-cypher/lint-worker": "1.10.1-next.15"
   },
   "devDependencies": {
     "@neo4j-ndl/base": "^3.2.10",
-    "@playwright/experimental-ct-react": "^1.55.1",
-    "@playwright/test": "^1.55.1",
+    "@playwright/experimental-ct-react": "1.62.1",
+    "@playwright/test": "1.62.1",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^6.1.1",
     "copyfiles": "^2.4.1",
     "jsdom": "^24.1.1",
-    "playwright": "^1.55.1",
+    "playwright": "1.62.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^4.5.10"
+    "vite": "^8.2.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -75,7 +77,7 @@
     "dev": "tsc --watch",
     "build": "pnpm copy-lint-worker && tsc --declaration --outDir dist/",
     "copy-lint-worker": "copyfiles -u 4 ../lint-worker/dist/esm/lintWorker.mjs dist/src/lang-cypher && copyfiles -u 4 ../lint-worker/dist/esm/lintWorker.mjs src/lang-cypher",
-    "clean": "rm -rf {dist,tsconfig.tsbuildinfo}",
+    "clean": "rm -rf dist tsconfig*.tsbuildinfo",
     "test": "vitest run",
     "test:e2e": "playwright test -c playwright-ct.config.ts",
     "test:e2e-ui": "playwright test -c playwright-ct.config.ts --ui",

package/src/CypherEditor.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { EditorView } from '@codemirror/view';
+import type { EditorView } from '@codemirror/view';
 import { createRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
@@ -13,22 +13,24 @@ let root: ReturnType<typeof createRoot>;
 
 const ref = createRef<CypherEditor>();
 let value = '';
-const onChange = vi.fn((v: string) => {
+const onChange = vi.fn<(v: string) => void>((v) => {
   value = v;
   rerender();
 });
 
-global.IS_REACT_ACT_ENVIRONMENT = true;
+(global as any).IS_REACT_ACT_ENVIRONMENT = true;
 const DEBOUNCE_TIME_WITH_MARGIN = DEBOUNCE_TIME + 100;
 
 /** Avoids crash in test environment */
 function mockEditorView(editorView: EditorView) {
-  editorView.coordsAtPos = vi.fn().mockReturnValue({
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-  });
+  editorView.coordsAtPos = vi
+    .fn<() => { left: number; top: number; right: number; bottom: number }>()
+    .mockReturnValue({
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+    });
 }
 
 async function debounce() {
@@ -107,24 +109,28 @@ test('props.value set to undefined preserves editorValue', () => {
   expect(getEditorValue()).toBe('initial');
 });
 
-// value updates from outside onExecute are overwritten by pending updates
-test.fails('new props.value should cancel onChange', async () => {
+// This test documents unexpected behaviour:
+//  value updates (from outside onExecute) are overwritten by pending updates.
+test('new props.value should cancel onChange', async () => {
   // 1. value is updated internally
   ref.current.setValueAndFocus('update');
 
   // 2. editor is rerendered with a new value while a value update is still pending
+  // the update to 'new external value' is overwritten by the pending update to 'update'
   value = 'new external value';
   rerender();
 
   await debounce();
 
-  // expect(onChange).not.toHaveBeenCalled();
-  expect(getEditorValue()).toBe('new external value');
-  expect(value).toBe('new external value');
+  // NOTE: These assertions currently check for the WRONG behavior (they are inverted).
+  expect(onChange).toHaveBeenCalled();
+  expect(getEditorValue()).not.toBe('new external value');
+  expect(value).not.toBe('new external value');
 });
 
-// value updates from outside onExecute are overwritten by pending updates
-test.fails('new props.value set to same value should cancel onChange', async () => {
+// This test documents unexpected behaviour:
+//  value updates (from outside onExecute) are overwritten by pending updates
+test('new props.value set to same value should cancel onChange', async () => {
   // 1. value is set initially
   value = 'same value';
   rerender();
@@ -133,14 +139,16 @@ test.fails('new props.value set to same value should cancel onChange', async ()
   ref.current.setValueAndFocus('update');
 
   // 3. editor is rerendered with a new value while a value update is still pending
+  // the update to 'same value' is overwritten by the pending update to 'update'
   value = 'same value';
   rerender();
 
   await debounce();
 
-  // expect(onChange).not.toHaveBeenCalled();
-  expect(getEditorValue()).toBe('same value');
-  expect(value).toBe('same value');
+  // NOTE: These assertions currently check for the WRONG behavior (they are inverted).
+  expect(onChange).toHaveBeenCalled();
+  expect(getEditorValue()).not.toBe('same value');
+  expect(value).not.toBe('same value');
 });
 
 test('rerender should not cancel onChange', async () => {

package/src/CypherEditor.tsx

@@ -1,18 +1,8 @@
 import { insertNewline } from '@codemirror/commands';
-import {
-  Annotation,
-  Compartment,
-  EditorState,
-  Extension,
-} from '@codemirror/state';
-import {
-  EditorView,
-  KeyBinding,
-  keymap,
-  lineNumbers,
-  placeholder,
-  ViewUpdate,
-} from '@codemirror/view';
+import type { Extension } from '@codemirror/state';
+import { Annotation, Compartment, EditorState } from '@codemirror/state';
+import type { KeyBinding, ViewUpdate } from '@codemirror/view';
+import { EditorView, keymap, lineNumbers, placeholder } from '@codemirror/view';
 import {
   createInlinePanelController,
   type InlinePanelCallbacks,
@@ -37,12 +27,13 @@ import {
   replaceHistory,
   replMode as historyNavigation,
 } from './historyNavigation';
-import { cypher, CypherConfig } from './lang-cypher/langCypher';
+import type { CypherConfig } from './lang-cypher/langCypher';
+import { cypher } from './lang-cypher/langCypher';
 import { cleanupWorkers } from './lang-cypher/syntaxValidation';
 import { basicNeo4jSetup } from './neo4jSetup';
 import { getThemeExtension } from './themes';
 import { richClipboardCopier } from './richClipboardCopier';
-import { LintWorker } from '@neo4j-cypher/lint-worker';
+import type { LintWorker } from '@neo4j-cypher/lint-worker';
 import workerpool from 'workerpool';
 
 type DomEventHandlers = Parameters<typeof EditorView.domEventHandlers>[0];

package/src/e2e_tests/autoCompletion.spec.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/unbound-method */
 import { testData } from '@neo4j-cypher/language-support';
 import { expect, test } from '@playwright/experimental-ct-react';
 import type { Page } from '@playwright/test';

package/src/e2e_tests/historyNavigation.spec.tsx

@@ -284,7 +284,7 @@ test('test onExecute', async ({ page, mount }) => {
   const execButton = isMac ? 'Meta+Enter' : 'Control+Enter';
 
   const initialValue = 'MATCH (n) RETURN n;';
-  const history = [];
+  const history: string[] = [];
 
   const onExecute = (cmd: string) => {
     history.unshift(cmd);

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/unbound-method */
 import { testData } from '@neo4j-cypher/language-support';
 import { expect, test } from '@playwright/experimental-ct-react';
-import { Locator } from 'playwright/test';
+import type { Locator } from 'playwright/test';
 import { CypherEditor } from '../CypherEditor';
 
 test.use({ viewport: { width: 1000, height: 500 } });

package/src/editorActions.ts

@@ -2,6 +2,7 @@ import { StateEffect, StateField, type Extension } from '@codemirror/state';
 import {
   Decoration,
   EditorView,
+  type Rect,
   ViewPlugin,
   type ViewUpdate,
   WidgetType,
@@ -40,10 +41,23 @@ export type EditorActionsController = {
  *    `absolute` on the editor element (which does not scroll). It never moves
  *    when the document grows, when an inline panel opens above the first line,
  *    or when the content scrolls — content simply scrolls behind it.
+ *
+ * The overlay is measured against the scroller's visible box rather than
+ * against the spacer or the content: the spacer moves down the document
+ * whenever something renders above the first line (an inline panel, the
+ * deleted lines of a diff), and the content reaches past the right edge as
+ * soon as it overflows.
+ * Vertically the cluster is centred on the first line.
  */
 
 const SPACER_BOTTOM_GAP = 2;
 const SPACER_LEFT_GAP = 4;
+/**
+ * Floor for the overlay's inset from the visible right edge, so it stays off
+ * the content's last pixel even if a theme zeroes `.cm-line`'s right padding
+ * (the base theme's 2px, which is what normally provides the inset).
+ */
+const MIN_OVERLAY_RIGHT_INSET = 2;
 
 export function createEditorActionsController(): EditorActionsController {
   const setActiveEffect = StateEffect.define<boolean>();
@@ -74,6 +88,38 @@ export function createEditorActionsController(): EditorActionsController {
       return true;
     }
 
+    /**
+     * The spacer floats right, so CodeMirror's default — the widget's own box —
+     * puts the caret at the right edge of the cluster whenever the spacer is
+     * the only thing it can measure on the first line (an empty document).
+     * Report the start of the line's inline content instead: the node after
+     * the spacer (text, a placeholder, or CodeMirror's trailing `<br>`).
+     */
+    coordsAt(dom: HTMLElement): Rect | null {
+      const next = dom.nextSibling;
+      if (!next) {
+        return null;
+      }
+      let rects: DOMRectList;
+      if (next instanceof Element) {
+        rects = next.getClientRects();
+      } else {
+        const range = document.createRange();
+        range.selectNodeContents(next);
+        rects = range.getClientRects();
+      }
+      const rect = rects[0];
+      if (!rect) {
+        return null;
+      }
+      return {
+        left: rect.left,
+        right: rect.left,
+        top: rect.top,
+        bottom: rect.bottom,
+      };
+    }
+
     ignoreEvent(): boolean {
       return true;
     }
@@ -136,13 +182,11 @@ export function createEditorActionsController(): EditorActionsController {
             `${container.offsetWidth}px`,
           );
           view.dom.style.setProperty(
-            '--cm-editor-actions-height',
-            `${container.offsetHeight}px`,
-          );
-          view.dom.style.setProperty(
-            '--cm-editor-actions-content-min-height',
-            `${container.offsetHeight + SPACER_BOTTOM_GAP}px`,
+            '--cm-editor-actions-reserved-width',
+            `${container.offsetWidth + SPACER_LEFT_GAP}px`,
           );
+          // The spacer's height follows the overlay's position, so `align`
+          // owns it.
           this.align(view);
         });
         this.resizeObserver.observe(container);
@@ -153,28 +197,52 @@ export function createEditorActionsController(): EditorActionsController {
       }
 
       private align(view: EditorView): void {
-        view.requestMeasure<{ top: number; right: number } | null>({
+        view.requestMeasure<{
+          top: number;
+          right: number;
+          spacerHeight: number;
+          contentMinHeight: number;
+        } | null>({
           read: () => {
             if (!this.dom) {
               return null;
             }
             const editorRect = view.dom.getBoundingClientRect();
-            const spacer = view.dom.querySelector('.cm-editor-actions-spacer');
-            let topClient: number;
-            let rightClient: number;
-            if (spacer) {
-              const rect = spacer.getBoundingClientRect();
-              topClient = rect.top;
-              rightClient = rect.right;
-            } else {
-              const rect = view.contentDOM.getBoundingClientRect();
-              const style = window.getComputedStyle(view.contentDOM);
-              topClient = rect.top + (parseFloat(style.paddingTop) || 0);
-              rightClient = rect.right - (parseFloat(style.paddingRight) || 0);
-            }
+            const scrollerRect = view.scrollDOM.getBoundingClientRect();
+            const style = window.getComputedStyle(view.contentDOM);
+            const visibleRight = scrollerRect.left + view.scrollDOM.clientWidth;
+            // Match the inset `.cm-line`'s right padding gives the spacer, so
+            // the overlay lands on the space the spacer reserves and stays off
+            // `contentRect.right - 1`, the pixel CodeMirror hit-tests to
+            // measure a wrapped line's selection. Cover it and the first
+            // line's highlight collapses to zero width — hence the floor.
+            const line = view.contentDOM.querySelector('.cm-line');
+            const lineRightPadding = line
+              ? parseFloat(window.getComputedStyle(line).paddingRight) || 0
+              : 0;
+
+            const contentPaddingTop = parseFloat(style.paddingTop) || 0;
+            const height = this.dom.offsetHeight;
+            // How far the cluster has to rise above the first line's top to
+            // sit centred on it, limited to the padding it can rise into.
+            const lift = Math.min(
+              Math.max((height - view.defaultLineHeight) / 2, 0),
+              contentPaddingTop,
+            );
+
             return {
-              top: topClient - editorRect.top + view.scrollDOM.scrollTop,
-              right: editorRect.right - rightClient - view.scrollDOM.scrollLeft,
+              top: scrollerRect.top - editorRect.top + contentPaddingTop - lift,
+              right:
+                editorRect.right -
+                visibleRight +
+                (parseFloat(style.paddingRight) || 0) +
+                Math.max(lineRightPadding, MIN_OVERLAY_RIGHT_INSET),
+              // The spacer starts at the first line's top, so it only needs to
+              // clear the part of the cluster that hangs below it.
+              spacerHeight: height - lift,
+              // A floor under the content, so an empty document is still tall
+              // enough to hold the overlay.
+              contentMinHeight: contentPaddingTop - lift + height,
             };
           },
           write: (pos) => {
@@ -189,6 +257,14 @@ export function createEditorActionsController(): EditorActionsController {
               '--cm-editor-actions-right',
               `${pos.right}px`,
             );
+            view.dom.style.setProperty(
+              '--cm-editor-actions-height',
+              `${pos.spacerHeight}px`,
+            );
+            view.dom.style.setProperty(
+              '--cm-editor-actions-content-min-height',
+              `${pos.contentMinHeight}px`,
+            );
           },
         });
       }
@@ -206,6 +282,7 @@ export function createEditorActionsController(): EditorActionsController {
           root.style.removeProperty('--cm-editor-actions-width');
           root.style.removeProperty('--cm-editor-actions-height');
           root.style.removeProperty('--cm-editor-actions-content-min-height');
+          root.style.removeProperty('--cm-editor-actions-reserved-width');
           root.style.removeProperty('--cm-editor-actions-top');
           root.style.removeProperty('--cm-editor-actions-right');
         }
@@ -230,6 +307,10 @@ export function createEditorActionsController(): EditorActionsController {
       WebkitUserSelect: 'none',
       pointerEvents: 'none',
     },
+    // The spacer only clears the first line, so a panel above it makes its own room.
+    '.cm-inline-panel': {
+      paddingRight: 'var(--cm-editor-actions-reserved-width, 0px)',
+    },
     '.cm-placeholder': {
       display: 'inline',
     },

package/src/historyNavigation.ts

@@ -1,5 +1,7 @@
-import { Extension, StateEffect } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
+import type { Extension } from '@codemirror/state';
+import { StateEffect } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
+import { keymap } from '@codemirror/view';
 
 import { StateField } from '@codemirror/state';
 
@@ -10,7 +12,7 @@ type HistoryState = {
   documentUpdate: string | null;
 };
 const DRAFT_ENTRY_INDEX = -1;
-const historyInitialState = {
+const historyInitialState: HistoryState = {
   history: [],
   index: DRAFT_ENTRY_INDEX,
   documentUpdate: null,

package/src/lang-cypher/autocomplete.ts

@@ -1,14 +1,11 @@
-import {
-  Completion,
-  CompletionSource,
-  snippet,
-} from '@codemirror/autocomplete';
+import type { Completion, CompletionSource } from '@codemirror/autocomplete';
+import { snippet } from '@codemirror/autocomplete';
 import { shouldAutoCompleteYield } from '@neo4j-cypher/language-support';
 import {
   CompletionItemKind,
   CompletionItemTag,
 } from 'vscode-languageserver-types';
-import { CompletionItemIcons } from '../icons';
+import type { CompletionItemIcons } from '../icons';
 import type { CypherConfig } from './langCypher';
 import { getDocString } from './utils';
 

package/src/lang-cypher/constants.ts

@@ -1,8 +1,9 @@
 import { languageDataProp } from '@codemirror/language';
 import type { Facet } from '@codemirror/state';
 import { NodeSet, NodeType } from '@lezer/common';
-import { styleTags, Tag, tags } from '@lezer/highlight';
-import { CypherTokenType } from '@neo4j-cypher/language-support';
+import type { Tag } from '@lezer/highlight';
+import { styleTags, tags } from '@lezer/highlight';
+import type { CypherTokenType } from '@neo4j-cypher/language-support';
 
 export const cypherTokenTypeToNode = (facet: Facet<unknown>) => ({
   topNode: NodeType.define({

package/src/lang-cypher/createCypherTheme.ts

@@ -1,13 +1,11 @@
-import {
-  HighlightStyle,
-  syntaxHighlighting,
-  TagStyle,
-} from '@codemirror/language';
-import { Extension } from '@codemirror/state';
+import type { TagStyle } from '@codemirror/language';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { CypherTokenType } from '@neo4j-cypher/language-support';
-import { StyleSpec } from 'style-mod';
-import { HighlightedCypherTokenTypes, tokenTypeToStyleTag } from './constants';
+import type { StyleSpec } from 'style-mod';
+import type { HighlightedCypherTokenTypes } from './constants';
+import { tokenTypeToStyleTag } from './constants';
 import {
   byWordSvg,
   caseSensitiveSvg,
@@ -255,8 +253,12 @@ export const createCypherTheme = ({
 
   const themeExtension = EditorView.theme(themeOptions, { dark });
 
-  const styles = Object.entries(highlightStyles).map(
-    ([token, color]: [HighlightedCypherTokenTypes, string]): TagStyle => ({
+  const styles = (
+    Object.entries(highlightStyles) as Array<
+      [HighlightedCypherTokenTypes, string]
+    >
+  ).map(
+    ([token, color]): TagStyle => ({
       tag: tokenTypeToStyleTag[token],
       color,
       class: token === CypherTokenType.consoleCommand ? 'cm-bold' : undefined,

package/src/lang-cypher/langCypher.ts

@@ -4,10 +4,8 @@ import {
   Language,
   LanguageSupport,
 } from '@codemirror/language';
-import {
-  CypherLanguageService,
-  type DbSchema,
-} from '@neo4j-cypher/language-support';
+import type { CypherLanguageService } from '@neo4j-cypher/language-support';
+import { type DbSchema } from '@neo4j-cypher/language-support';
 import { completionStyles, cypherAutocomplete } from './autocomplete';
 import { ParserAdapter } from './parser-adapter';
 import { signatureHelpTooltip } from './signatureHelp';