@neo4j-cypher/react-codemirror 2.0.0-next.22 → 2.0.0-next.24

package/package.json

@@ -17,9 +17,9 @@
     "codemirror",
     "codemirror 6"
   ],
-  "version": "2.0.0-next.22",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "version": "2.0.0-next.24",
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
   "type": "module",
   "sideEffects": false,
   "repository": {
@@ -31,7 +31,7 @@
   },
   "engineStrict": true,
   "engines": {
-    "node": ">=18.18.2"
+    "node": ">=22.15.0"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.17.0",
@@ -51,7 +51,8 @@
     "style-mod": "^4.1.2",
     "vscode-languageserver-types": "^3.17.3",
     "workerpool": "^9.0.4",
-    "@neo4j-cypher/language-support": "2.0.0-next.19"
+    "@neo4j-cypher/language-support": "2.0.0-next.21",
+    "@neo4j-cypher/lint-worker": "2025.4.1-next.0"
   },
   "devDependencies": {
     "@neo4j-ndl/base": "^3.2.10",
@@ -61,6 +62,7 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^4.3.1",
+    "copyfiles": "^2.4.1",
     "jsdom": "^24.1.1",
     "lodash": "^4.17.21",
     "playwright": "^1.51.1",
@@ -72,8 +74,10 @@
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "scripts": {
-    "build": "tsc --declaration --outDir dist/",
-    "clean": "rm -rf dist",
+    "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}",
     "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.tsx

@@ -183,12 +183,12 @@ export interface CypherEditorProps {
 const format = (view: EditorView): void => {
   try {
     const doc = view.state.doc.toString();
-    const { formattedString, newCursorPos } = formatQuery(doc, view.state.selection.main.anchor);
+    const { formattedQuery, newCursorPos } = formatQuery(doc, {cursorPosition: view.state.selection.main.anchor});
     view.dispatch({
       changes: {
         from: 0,
         to: doc.length,
-        insert: formattedString,
+        insert: formattedQuery,
       },
       selection: { anchor: newCursorPos },
     });

package/src/e2e_tests/e2eUtils.ts

@@ -82,7 +82,7 @@ export class CypherEditorPage {
     await expect(this.page.locator('.cm-tooltip-hover').last()).toBeVisible({
       timeout: 10000,
     });
-    await expect(this.page.getByText(expectedMsg)).toBeVisible();
+    await this.checkHoverMessage(expectedMsg, type);
     /* Return the mouse to the beginning of the query and
        This is because if for example we have an overlay with a 
        first interaction that covers the element we want to perform
@@ -94,4 +94,20 @@ export class CypherEditorPage {
       this.page.locator('.cm-tooltip-hover').last(),
     ).not.toBeVisible();
   }
+
+  private async checkHoverMessage(
+    expectedMsg: string,
+    type: 'error' | 'warning',
+  ) {
+    const locator =
+      type === 'error'
+        ? 'li.cm-diagnostic.cm-diagnostic-error'
+        : 'li.cm-diagnostic.cm-diagnostic-warning';
+    const tooltips = await this.page.locator(locator).all();
+
+    const tooltipTexts = await Promise.all(
+      tooltips.map((t) => t.textContent()),
+    );
+    expect(tooltipTexts).toContain(expectedMsg);
+  }
 }

package/src/e2e_tests/performanceTest.spec.tsx

@@ -100,7 +100,7 @@ test('benchmarking & performance test session', async ({
 
   await editorPage.checkErrorMessage(
     'RETRN',
-    `Invalid input 'RETRN': expected a graph pattern, 'FOREACH', ',', 'ORDER BY', 'CALL', 'CREATE', 'LOAD CSV', 'DELETE', 'DETACH', 'FINISH', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REMOVE', 'RETURN', 'SET', 'SKIP', 'UNION', 'UNWIND', 'USE', 'USING', 'WHERE', 'WITH' or <EOF>`,
+    `Invalid input 'RETRN': expected a graph pattern, ',', 'ORDER BY', 'CALL', 'CREATE', 'LOAD CSV', 'DELETE', 'DETACH', 'FINISH', 'FOREACH', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REMOVE', 'RETURN', 'SET', 'SKIP', 'UNION', 'UNWIND', 'USE', 'USING', 'WHERE', 'WITH' or <EOF>`,
   );
 
   await editorPage

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -33,7 +33,7 @@ test('Can turn linting back on', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     'METCH',
-    `Invalid input 'METCH': expected 'FOREACH', 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
+    `Invalid input 'METCH': expected 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'FOREACH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
   );
 });
 
@@ -45,7 +45,7 @@ test('Syntactic errors are surfaced', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     'METCH',
-    `Invalid input 'METCH': expected 'FOREACH', 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
+    `Invalid input 'METCH': expected 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'FOREACH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
   );
 });
 
@@ -138,7 +138,7 @@ test('Semantic errors are correctly accumulated', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     '-1',
-    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+    "Invalid input. '-1' is not a valid value. Must be a positive integer.",
   );
 });
 
@@ -153,12 +153,12 @@ test('Multiline errors are correctly placed', async ({ page, mount }) => {
 
   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)',
+    '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",
+    "Invalid input. '-1' is not a valid value. Must be a positive integer.",
   );
 });
 
@@ -178,10 +178,28 @@ test('Validation errors are correctly overlapped', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     '-1',
-    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+    "Invalid input. '-1' is not a valid value. Must be a positive integer.",
   );
 });
 
+test('Syntax highlighting works as expected with multiple separate linting messages', async ( {
+  page,
+  mount
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `MATCH (n)--(m) CALL (n) {RETURN id(n) AS b} RETURN apoc.create.uuid(), a`;
+
+  await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
+  await expect(
+    editorPage.page.locator('.cm-deprecated-element').last(),
+  ).toBeVisible({ timeout: 10000 });
+  await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
+  await editorPage.checkWarningMessage('id', `The query used a deprecated function. ('id' has been replaced by 'elementId or an application-generated id')`);
+
+  await editorPage.checkWarningMessage('apoc.create.uuid', 'Function apoc.create.uuid is deprecated. Alternative: Neo4j randomUUID() function');
+  await editorPage.checkErrorMessage('a', 'Variable `a` not defined');
+})
+
 test('Strikethroughs are shown for deprecated functions', async ({
   page,
   mount,
@@ -194,6 +212,7 @@ test('Strikethroughs are shown for deprecated functions', async ({
     editorPage.page.locator('.cm-deprecated-element').last(),
   ).toBeVisible({ timeout: 10000 });
   await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
+  await editorPage.checkErrorMessage('id', `Insufficient parameters for function 'id'`);
 });
 
 test('Strikethroughs are shown for deprecated procedures', async ({
@@ -210,7 +229,7 @@ test('Strikethroughs are shown for deprecated procedures', async ({
 
   await editorPage.checkWarningMessage(
     'apoc.create.uuids',
-    'Procedure apoc.create.uuids is deprecated.',
+    "Procedure apoc.create.uuids is deprecated. Alternative: Neo4j's randomUUID() function can be used as a replacement, for example: `UNWIND range(0,$count) AS row RETURN row, randomUUID() AS uuid`",
   );
 });
 
@@ -231,13 +250,13 @@ test('Syntax validation depends on the Cypher version', async ({
 
   await editorPage.checkWarningMessage(
     'apoc.create.uuids',
-    'Procedure apoc.create.uuids is deprecated.',
+    "Procedure apoc.create.uuids is deprecated. Alternative: Neo4j's randomUUID() function can be used as a replacement, for example: `UNWIND range(0,$count) AS row RETURN row, randomUUID() AS uuid`",
   );
 
   await textField.fill('CYPHER 25 CALL apoc.create.uuids(5)');
 
   await editorPage.checkErrorMessage(
     'apoc.create.uuids',
-    'Procedure apoc.create.uuids is not present in the database.',
+    `Procedure apoc.create.uuids is not present in the database. Make sure you didn't misspell it or that it is available when you run this statement in your application`,
   );
 });

package/src/lang-cypher/createCypherTheme.ts

@@ -91,6 +91,7 @@ export const createCypherTheme = ({
     '& .cm-panels': {
       backgroundColor: settings.searchPanel.background,
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+      zIndex: 0,
     },
     '& .cm-completionLabel': {
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',