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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-cypher/react-codemirror",
-  "version": "2.0.0-next.33",
+  "version": "2.0.0-next.34",
   "keywords": [
     "codemirror",
     "codemirror 6",
@@ -47,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.30",
-    "@neo4j-cypher/lint-worker": "1.10.1-next.7"
+    "@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",
@@ -61,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"

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 {
@@ -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/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,
@@ -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/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?: {