@neo4j-cypher/react-codemirror 2.0.0-next.32 → 2.0.0-next.34

package/package.json

@@ -1,6 +1,22 @@
 {
   "name": "@neo4j-cypher/react-codemirror",
+  "version": "2.0.0-next.34",
+  "keywords": [
+    "codemirror",
+    "codemirror 6",
+    "cypher",
+    "editor",
+    "neo4j",
+    "react"
+  ],
+  "bugs": {
+    "url": "https://github.com/neo4j/cypher-language-support/issues"
+  },
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/neo4j/cypher-language-support.git"
+  },
   "files": [
     "dist",
     "src",
@@ -9,30 +25,10 @@
     "LICENSE.md",
     "CHANGELOG.md"
   ],
-  "keywords": [
-    "neo4j",
-    "cypher",
-    "react",
-    "editor",
-    "codemirror",
-    "codemirror 6"
-  ],
-  "version": "2.0.0-next.32",
-  "main": "./dist/src/index.js",
-  "types": "./dist/src/index.d.ts",
   "type": "module",
   "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/neo4j/cypher-language-support.git"
-  },
-  "bugs": {
-    "url": "https://github.com/neo4j/cypher-language-support/issues"
-  },
-  "engineStrict": true,
-  "engines": {
-    "node": ">=24.11.1"
-  },
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
   "dependencies": {
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.8.1",
@@ -51,13 +47,13 @@
     "style-mod": "^4.1.2",
     "vscode-languageserver-types": "^3.17.3",
     "workerpool": "^9.3.3",
-    "@neo4j-cypher/language-support": "2.0.0-next.29",
-    "@neo4j-cypher/lint-worker": "1.10.1-next.6"
+    "@neo4j-cypher/language-support": "2.0.0-next.31",
+    "@neo4j-cypher/lint-worker": "1.10.1-next.8"
   },
   "devDependencies": {
     "@neo4j-ndl/base": "^3.2.10",
-    "@playwright/experimental-ct-react": "^1.54.2",
-    "@playwright/test": "^1.54.2",
+    "@playwright/experimental-ct-react": "^1.55.1",
+    "@playwright/test": "^1.55.1",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -65,7 +61,7 @@
     "copyfiles": "^2.4.1",
     "jsdom": "^24.1.1",
     "lodash": "^4.17.21",
-    "playwright": "^1.54.2",
+    "playwright": "^1.55.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite": "^4.5.10"
@@ -73,6 +69,10 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
+  "engines": {
+    "node": ">=24.11.1"
+  },
+  "engineStrict": true,
   "scripts": {
     "dev": "tsc --watch",
     "build": "pnpm copy-lint-worker && tsc --declaration --outDir dist/",

package/src/CypherEditor.test.tsx

@@ -124,27 +124,24 @@ test.fails('new props.value should cancel onChange', async () => {
 });
 
 // value updates from outside onExecute are overwritten by pending updates
-test.fails(
-  'new props.value set to same value should cancel onChange',
-  async () => {
-    // 1. value is set initially
-    value = 'same value';
-    rerender();
+test.fails('new props.value set to same value should cancel onChange', async () => {
+  // 1. value is set initially
+  value = 'same value';
+  rerender();
 
-    // 2. value is updated internally
-    ref.current.setValueAndFocus('update');
+  // 2. value is updated internally
+  ref.current.setValueAndFocus('update');
 
-    // 3. editor is rerendered with a new value while a value update is still pending
-    value = 'same value';
-    rerender();
+  // 3. editor is rerendered with a new value while a value update is still pending
+  value = 'same value';
+  rerender();
 
-    await debounce();
+  await debounce();
 
-    // expect(onChange).not.toHaveBeenCalled();
-    expect(getEditorValue()).toBe('same value');
-    expect(value).toBe('same value');
-  },
-);
+  // expect(onChange).not.toHaveBeenCalled();
+  expect(getEditorValue()).toBe('same value');
+  expect(value).toBe('same value');
+});
 
 test('rerender should not cancel onChange', async () => {
   // 1. value is updated internally
@@ -200,5 +197,7 @@ test('rerender with prior external update should not cancel onChange', async ()
 });
 
 test('setValueAndFocus should handle CRLF newline characters', () => {
-  expect(() => ref.current.setValueAndFocus('new value\r\nnew line')).not.toThrow();
-});
+  expect(() =>
+    ref.current.setValueAndFocus('new value\r\nnew line'),
+  ).not.toThrow();
+});

package/src/CypherEditor.tsx

@@ -13,7 +13,11 @@ import {
   placeholder,
   ViewUpdate,
 } from '@codemirror/view';
-import { formatQuery, type DbSchema } from '@neo4j-cypher/language-support';
+import {
+  formatQuery,
+  CypherLanguageService,
+  type DbSchema,
+} from '@neo4j-cypher/language-support';
 import debounce from 'lodash.debounce';
 import { Component, createRef } from 'react';
 import { DEBOUNCE_TIME } from './constants';
@@ -26,6 +30,8 @@ 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 workerpool from 'workerpool';
 
 type DomEventHandlers = Parameters<typeof EditorView.domEventHandlers>[0];
 export interface CypherEditorProps {
@@ -190,7 +196,7 @@ const format = (view: EditorView): void => {
       },
       selection: { anchor: newCursorPos },
     });
-  } catch (error) {
+  } catch {
     // Formatting failed, likely because of a syntax error
   }
 };
@@ -275,11 +281,72 @@ const formatLineNumber =
 type CypherEditorState = { cypherSupportEnabled: boolean };
 
 const ExternalEdit = Annotation.define<boolean>();
+const WorkerURL = new URL('./lang-cypher/lintWorker.mjs', import.meta.url)
+  .pathname;
+
+class CodemirrorSymbolFetcher {
+  constructor(languageService: CypherLanguageService) {
+    this.languageService = languageService;
+  }
+  private languageService: CypherLanguageService;
+  private processing = false;
+  private nextJob: {
+    query: string;
+    schema: DbSchema;
+  };
+  private symbolTablePool = workerpool.pool(WorkerURL, {
+    minWorkers: 1,
+    workerOpts: { type: 'module' },
+    workerTerminateTimeout: 2000,
+  });
+
+  public queueSymbolJob(query: string, schema: DbSchema) {
+    this.nextJob = { query, schema };
+    if (!this.processing) {
+      void this.processJobQueue();
+    }
+  }
+
+  public terminate() {
+    this.nextJob = undefined;
+    void this.symbolTablePool.terminate();
+  }
+
+  private async processJobQueue() {
+    this.processing = true;
+    while (this.nextJob) {
+      try {
+        const proxyWorker =
+          (await this.symbolTablePool.proxy()) as unknown as LintWorker;
+        const query = this.nextJob.query;
+        const dbSchema = this.nextJob.schema;
+        this.nextJob = undefined;
+
+        const result = await proxyWorker.lintCypherQuery(query, dbSchema);
+
+        if (result.symbolTables) {
+          this.languageService.setSymbolsInfo({
+            query,
+            symbolTables: result.symbolTables,
+          });
+        }
+      } catch (err) {
+        //eslint-disable-next-line
+        console.log('Symbol table calculation failed ' + String(err));
+      }
+    }
+    this.processing = false;
+  }
+}
 
 export class CypherEditor extends Component<
   CypherEditorProps,
   CypherEditorState
 > {
+  /**
+   * The symbol fetcher object used to fetch the current symbol table on document changes
+   */
+  symbolFetcher: CodemirrorSymbolFetcher;
   /**
    * The codemirror editor container.
    */
@@ -379,6 +446,7 @@ export class CypherEditor extends Component<
     } = this.props;
 
     this.schemaRef.current = {
+      languageService: new CypherLanguageService(),
       schema,
       lint,
       showSignatureTooltipBelow,
@@ -394,6 +462,10 @@ export class CypherEditor extends Component<
       },
     };
 
+    this.symbolFetcher = new CodemirrorSymbolFetcher(
+      this.schemaRef.current.languageService,
+    );
+
     const themeExtension = getThemeExtension(
       theme,
       overrideThemeBackgroundColor,
@@ -402,6 +474,12 @@ export class CypherEditor extends Component<
     const changeListener = this.debouncedOnChange
       ? [
           EditorView.updateListener.of((upt: ViewUpdate) => {
+            if (upt.docChanged) {
+              this.symbolFetcher.queueSymbolJob(
+                upt.state.doc.toString(),
+                this.schemaRef.current.schema,
+              );
+            }
             const wasUserEdit = !upt.transactions.some((tr) =>
               tr.annotation(ExternalEdit),
             );
@@ -452,6 +530,12 @@ export class CypherEditor extends Component<
               'aria-label': this.props.ariaLabel,
             })
           : [],
+        !this.props.moveFocusOnTab
+          ? EditorView.contentAttributes.of({
+              'aria-description':
+                'Press Escape to leave the editor and continue tabbing through the page',
+            })
+          : [],
       ],
       doc: this.props.value,
     });
@@ -592,6 +676,7 @@ export class CypherEditor extends Component<
 
   componentWillUnmount(): void {
     this.editorView.current?.destroy();
+    this.symbolFetcher?.terminate();
     cleanupWorkers();
   }
 

package/src/e2e_tests/autoCompletion.spec.tsx

@@ -33,7 +33,10 @@ RETURN n;`}
   await textField.press('Control+ ');
 
   await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
-  await page.locator('.cm-tooltip-autocomplete').getByText('WHERE', {exact: true}).click();
+  await page
+    .locator('.cm-tooltip-autocomplete')
+    .getByText('WHERE', { exact: true })
+    .click();
 
   await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
 
@@ -544,13 +547,16 @@ test('completions depend on the Cypher version', async ({ page, mount }) => {
   ).toBeVisible();
 });
 
-test('does not complete properties for non node / relationship variables', async ({ page, mount }) => {
+test('does not complete properties for non node / relationship variables', async ({
+  page,
+  mount,
+}) => {
   await mount(
     <CypherEditor
-    schema={{
-        propertyKeys: ["nodeProperty"]
+      schema={{
+        propertyKeys: ['nodeProperty'],
       }}
-    />
+    />,
   );
 
   const textField = page.getByRole('textbox');
@@ -562,10 +568,10 @@ test('does not complete properties for non node / relationship variables', async
 
   await textField.fill('WITH 1 AS x RETURN x.');
   // This could be flaky if the semantic analysis takes too long
-  await page.waitForTimeout(500)
+  await page.waitForTimeout(500);
   await textField.press('Escape');
   await textField.press('Control+ ');
   await expect(
-    page.locator('.cm-tooltip-autocomplete').getByText('nodeProperty')
+    page.locator('.cm-tooltip-autocomplete').getByText('nodeProperty'),
   ).not.toBeVisible();
 });

package/src/e2e_tests/debounce.spec.tsx

@@ -28,47 +28,43 @@ test.fail(
 );
 
 // TODO Fix this test
-test.fixme(
-  'onExecute updates should override debounce updates',
-  async ({ mount, page }) => {
-    const editorPage = new CypherEditorPage(page);
-    let value = '';
-
-    const onExecute = () => {
-      value = '';
-      void component.update(
-        <CypherEditor
-          value={value}
-          onChange={onChange}
-          onExecute={onExecute}
-        />,
-      );
-    };
-
-    const onChange = (val: string) => {
-      value = val;
-      void component.update(
-        <CypherEditor value={val} onChange={onChange} onExecute={onExecute} />,
-      );
-    };
+test.fixme('onExecute updates should override debounce updates', async ({
+  mount,
+  page,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  let value = '';
 
-    const component = await mount(
+  const onExecute = () => {
+    value = '';
+    void component.update(
       <CypherEditor value={value} onChange={onChange} onExecute={onExecute} />,
     );
+  };
 
-    await editorPage.getEditor().pressSequentially('RETURN 1');
-    await editorPage.getEditor().press('Enter');
-    await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
-    await expect(component).not.toContainText('RETURN 1');
+  const onChange = (val: string) => {
+    value = val;
+    void component.update(
+      <CypherEditor value={val} onChange={onChange} onExecute={onExecute} />,
+    );
+  };
 
-    await editorPage.getEditor().pressSequentially('RETURN 1');
-    await editorPage.getEditor().pressSequentially('');
-    await editorPage.getEditor().pressSequentially('RETURN 1');
-    await editorPage.getEditor().press('Enter');
-    await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
-    await expect(component).not.toContainText('RETURN 1');
-  },
-);
+  const component = await mount(
+    <CypherEditor value={value} onChange={onChange} onExecute={onExecute} />,
+  );
+
+  await editorPage.getEditor().pressSequentially('RETURN 1');
+  await editorPage.getEditor().press('Enter');
+  await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
+  await expect(component).not.toContainText('RETURN 1');
+
+  await editorPage.getEditor().pressSequentially('RETURN 1');
+  await editorPage.getEditor().pressSequentially('');
+  await editorPage.getEditor().pressSequentially('RETURN 1');
+  await editorPage.getEditor().press('Enter');
+  await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
+  await expect(component).not.toContainText('RETURN 1');
+});
 
 test('onExecute should fire after debounced updates', async ({
   mount,

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -263,7 +263,6 @@ test('Signature help only shows the description past the last argument', async (
       autofocus={true}
     />,
   );
-  1;
 
   const tooltip = page.locator('.cm-signature-help-panel');
 

package/src/e2e_tests/snippets.spec.tsx

@@ -1,7 +1,6 @@
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
 
-
 test('does not automatically open completion panel for expressions after snippet trigger char', async ({
   page,
   mount,

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -182,9 +182,9 @@ test('Validation errors are correctly overlapped', async ({ page, mount }) => {
   );
 });
 
-test('Syntax highlighting works as expected with multiple separate linting messages', async ( {
+test('Syntax highlighting works as expected with multiple separate linting messages', async ({
   page,
-  mount
+  mount,
 }) => {
   const editorPage = new CypherEditorPage(page);
   const query = `MATCH (n)--(m) CALL (n) {RETURN id(n) AS b} RETURN apoc.create.uuid(), a`;
@@ -192,12 +192,20 @@ test('Syntax highlighting works as expected with multiple separate linting messa
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
   await expect(
     editorPage.page.locator('.cm-deprecated-element').last(),
-  ).toBeVisible({ timeout: 10000 });
+  ).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 consider using an application-generated id')`);
-  await editorPage.checkWarningMessage('apoc.create.uuid', 'Function apoc.create.uuid is deprecated. Alternative: Neo4j randomUUID() function');
+  await editorPage.checkWarningMessage(
+    'id',
+    `The query used a deprecated function. ('id' has been replaced by 'elementId or consider using 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,
@@ -209,7 +217,9 @@ test('Strikethroughs are shown for deprecated functions', async ({
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
   await expect(
     editorPage.page.locator('.cm-deprecated-element').last(),
-  ).toBeVisible({ timeout: 10000 });
+  ).toBeVisible({
+    timeout: 10000,
+  });
   await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
 });
 
@@ -223,7 +233,9 @@ test('Strikethroughs are shown for deprecated procedures', async ({
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
   await expect(
     editorPage.page.locator('.cm-deprecated-element').last(),
-  ).toBeVisible({ timeout: 10000 });
+  ).toBeVisible({
+    timeout: 10000,
+  });
 
   await editorPage.checkWarningMessage(
     'apoc.create.uuids',
@@ -235,11 +247,7 @@ test('Syntax validation depends on the Cypher version', async ({
   page,
   mount,
 }) => {
-  await mount(
-    <CypherEditor
-      schema={testData.mockSchema}
-    />,
-  );
+  await mount(<CypherEditor schema={testData.mockSchema} />);
 
   const editorPage = new CypherEditorPage(page);
   const textField = page.getByRole('textbox');

package/src/lang-cypher/autocomplete.ts

@@ -3,10 +3,7 @@ import {
   CompletionSource,
   snippet,
 } from '@codemirror/autocomplete';
-import {
-  autocomplete,
-  shouldAutoCompleteYield,
-} from '@neo4j-cypher/language-support';
+import { shouldAutoCompleteYield } from '@neo4j-cypher/language-support';
 import {
   CompletionItemKind,
   CompletionItemTag,
@@ -62,7 +59,7 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
   (config) => (context) => {
     const documentText = context.state.doc.toString();
     const offset = context.pos;
-    const triggerCharacters = ['.', ':', '{', '$', ')', ']'];
+    const triggerCharacters = ['.', ':', '{', '$', ')', ']', '-', '<'];
     const lastCharacter = documentText.at(offset - 1);
     const yieldTriggered = shouldAutoCompleteYield(documentText, offset);
     const lastWord = context.matchBefore(/\w*/);
@@ -81,11 +78,13 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
       return null;
     }
 
-    const options = autocomplete(
+    const options = config.languageService.autocomplete(
       documentText,
       config.schema ?? {},
-      offset,
-      context.explicit,
+      {
+        caretPosition: offset,
+        manual: context.explicit,
+      },
     );
 
     return {

package/src/lang-cypher/contants.test.ts

@@ -1,6 +1,6 @@
 import { tags } from '@lezer/highlight';
 import {
-  applySyntaxColouring,
+  highlightSyntax,
   CypherTokenType,
 } from '@neo4j-cypher/language-support';
 import { expect, test } from 'vitest';
@@ -14,7 +14,7 @@ WHERE variable.property = "String"
 RETURN variable;`;
 
 test('correctly parses all cypher token types to style tags', () => {
-  const tokens = applySyntaxColouring(cypherQueryWithAllTokenTypes);
+  const tokens = highlightSyntax(cypherQueryWithAllTokenTypes);
   const tokenTypes = tokens.map((token) => token.tokenType);
   expect(tokenTypes).toEqual([
     'keyword',

package/src/lang-cypher/createCypherTheme.ts

@@ -160,24 +160,16 @@ export const createCypherTheme = ({
         border: 'none',
         verticalAlign: 'middle',
         '&[name=next]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            downArrowSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(downArrowSvg)}")`,
         },
         '&[name=prev]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            upArrowSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(upArrowSvg)}")`,
         },
         '&[name=replace]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            replaceSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(replaceSvg)}")`,
         },
         '&[name=replaceAll]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            replaceAllSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(replaceAllSvg)}")`,
         },
         width: '20px',
         height: '20px',
@@ -209,19 +201,13 @@ export const createCypherTheme = ({
           borderRadius: '4px',
 
           '&[name=case]::before': {
-            content: `url("data:image/svg+xml;base64,${window.btoa(
-              caseSensitiveSvg,
-            )}")`,
+            content: `url("data:image/svg+xml;base64,${window.btoa(caseSensitiveSvg)}")`,
           },
           '&[name=re]::before': {
-            content: `url("data:image/svg+xml;base64,${window.btoa(
-              regexSvg,
-            )}")`,
+            content: `url("data:image/svg+xml;base64,${window.btoa(regexSvg)}")`,
           },
           '&[name=word]::before': {
-            content: `url("data:image/svg+xml;base64,${window.btoa(
-              byWordSvg,
-            )}")`,
+            content: `url("data:image/svg+xml;base64,${window.btoa(byWordSvg)}")`,
           },
           '&:hover': {
             backgroundColor: settings.searchPanel.buttonHoverBackground,

package/src/lang-cypher/langCypher.ts

@@ -4,7 +4,10 @@ import {
   Language,
   LanguageSupport,
 } from '@codemirror/language';
-import { type DbSchema } from '@neo4j-cypher/language-support';
+import {
+  CypherLanguageService,
+  type DbSchema,
+} from '@neo4j-cypher/language-support';
 import { completionStyles, cypherAutocomplete } from './autocomplete';
 import { ParserAdapter } from './parser-adapter';
 import { signatureHelpTooltip } from './signatureHelp';
@@ -16,6 +19,7 @@ const facet = defineLanguageFacet({
 });
 
 export type CypherConfig = {
+  languageService: CypherLanguageService;
   lint?: boolean;
   showSignatureTooltipBelow?: boolean;
   featureFlags?: {