@neo4j-cypher/react-codemirror 2.0.0-next.11 → 2.0.0-next.13

package/package.json

@@ -17,7 +17,7 @@
     "codemirror",
     "codemirror 6"
   ],
-  "version": "2.0.0-next.11",
+  "version": "2.0.0-next.13",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -51,7 +51,7 @@
     "@codemirror/view": "^6.29.1",
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.1.3",
-    "@neo4j-cypher/language-support": "2.0.0-next.8",
+    "@neo4j-cypher/language-support": "2.0.0-next.10",
     "@types/prismjs": "^1.26.3",
     "@types/workerpool": "^6.4.7",
     "ayu": "^8.0.1",

package/src/CypherEditor.tsx

@@ -161,9 +161,19 @@ export interface CypherEditorProps {
   readonly?: boolean;
 
   /**
-   * String value to assign to the aria-label attribute of the editor
+   * String value to assign to the aria-label attribute of the editor.
    */
   ariaLabel?: string;
+
+  /**
+   * Whether keybindings for inserting indents with the Tab key should be disabled.
+   *
+   * true will not create keybindings for inserting indents.
+   * false will create keybindings for inserting indents.
+   *
+   * @default false
+   */
+  moveFocusOnTab?: boolean;
 }
 
 const executeKeybinding = (
@@ -310,6 +320,7 @@ export class CypherEditor extends Component<
     theme: 'light',
     lineNumbers: true,
     newLineOnEnter: false,
+    moveFocusOnTab: false,
   };
 
   private debouncedOnChange = this.props.onChange
@@ -383,7 +394,7 @@ export class CypherEditor extends Component<
           ]),
         ),
         historyNavigation(this.props),
-        basicNeo4jSetup(),
+        basicNeo4jSetup(this.props),
         themeCompartment.of(themeExtension),
         changeListener,
         cypher(this.schemaRef.current),

package/src/e2e_tests/autoCompletion.spec.tsx

@@ -1,3 +1,4 @@
+/* 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';
@@ -113,6 +114,27 @@ test('can complete labels', async ({ mount, page }) => {
   await expect(component).toContainText('MATCH (n :Pokemon');
 });
 
+test('can complete properties with backticks', async ({ mount, page }) => {
+  const component = await mount(
+    <CypherEditor
+      schema={{
+        propertyKeys: ['foo bar'],
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('MATCH (n) RETURN n.foo');
+  await textField.press('Escape');
+  await textField.press('Control+ ');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('foo bar').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('MATCH (n) RETURN n.`foo bar`');
+});
+
 test('can update dbschema', async ({ mount, page }) => {
   const component = await mount(
     <CypherEditor
@@ -380,19 +402,6 @@ test('shows deprecated function as strikethrough on auto-completion', async ({
   await expect(page.locator('.cm-deprecated-completion')).toBeVisible();
 });
 
-test('does not signature help information on auto-completion if flag not enabled explicitly', async ({
-  page,
-  mount,
-}) => {
-  await mount(<CypherEditor schema={testData.mockSchema} />);
-
-  const textField = page.getByRole('textbox');
-  await textField.fill('CALL apoc.periodic.');
-
-  await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
-  await expect(page.locator('.cm-completionInfo')).not.toBeVisible();
-});
-
 test('does not signature help information on auto-completion if docs and signature are empty', async ({
   page,
   mount,

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -1,3 +1,4 @@
+/* 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';
@@ -10,6 +11,8 @@ type TooltipExpectations = {
   excludes?: string[];
 };
 
+const importCsvProc = testData.mockSchema.procedures['apoc.import.csv'];
+
 function testTooltip(tooltip: Locator, expectations: TooltipExpectations) {
   const includes = expectations.includes ?? [];
   const excludes = expectations.excludes ?? [];
@@ -83,8 +86,9 @@ test('Signature help shows the description for the first argument', async ({
 
   await testTooltip(tooltip, {
     includes: [
-      'nodes :: LIST<MAP>',
-      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+      testData.mockSchema.procedures['apoc.import.csv'].argumentDescription[0]
+        .description,
+      testData.mockSchema.procedures['apoc.import.csv'].description,
     ],
   });
 });
@@ -103,8 +107,8 @@ test('Signature help shows the description for the first argument when the curso
 
   await testTooltip(tooltip, {
     includes: [
-      'nodes :: LIST<MAP>',
-      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+      importCsvProc.argumentDescription[0].description,
+      importCsvProc.description,
     ],
   });
 });
@@ -127,8 +131,8 @@ test('Signature help shows the description for the second argument', async ({
 
   await testTooltip(tooltip, {
     includes: [
-      'rels :: LIST<MAP>',
-      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+      importCsvProc.argumentDescription[1].description,
+      importCsvProc.description,
     ],
   });
 });
@@ -147,8 +151,8 @@ test('Signature help shows the description for the second argument when the curs
 
   await testTooltip(tooltip, {
     includes: [
-      'rels :: LIST<MAP>',
-      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+      importCsvProc.argumentDescription[1].description,
+      importCsvProc.description,
     ],
   });
 });

package/src/index.ts

@@ -1,7 +1,4 @@
-export {
-  CypherParser,
-  _internalFeatureFlags,
-} from '@neo4j-cypher/language-support';
+export * as LanguageSupport from '@neo4j-cypher/language-support';
 export { CypherEditor } from './CypherEditor';
 export { cypher } from './lang-cypher/langCypher';
 export { darkThemeConstants, lightThemeConstants } from './themes';

package/src/lang-cypher/autocomplete.ts

@@ -77,73 +77,56 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
     }
 
     const options = autocomplete(
-      documentText,
+      // TODO This is a temporary hack because completions are not working well
+      documentText.slice(0, context.pos),
       config.schema ?? {},
       context.pos,
       context.explicit,
     );
 
-    if (config.featureFlags?.signatureInfoOnAutoCompletions) {
-      return {
-        from: context.matchBefore(/(\w|\$)*$/).from,
-        options: options.map((o) => {
-          let maybeInfo = {};
-          let emptyInfo = true;
-          const newDiv = document.createElement('div');
+    return {
+      from: context.matchBefore(/(\w|\$)*$/).from,
+      options: options.map((o) => {
+        let maybeInfo = {};
+        let emptyInfo = true;
+        const newDiv = document.createElement('div');
 
-          if (o.signature) {
-            const header = document.createElement('p');
-            header.setAttribute('class', 'cm-completionInfo-signature');
-            header.textContent = o.signature;
-            if (header.textContent.length > 0) {
-              emptyInfo = false;
-              newDiv.appendChild(header);
-            }
+        if (o.signature) {
+          const header = document.createElement('p');
+          header.setAttribute('class', 'cm-completionInfo-signature');
+          header.textContent = o.signature;
+          if (header.textContent.length > 0) {
+            emptyInfo = false;
+            newDiv.appendChild(header);
           }
+        }
 
-          if (o.documentation) {
-            const paragraph = document.createElement('p');
-            paragraph.textContent = getDocString(o.documentation);
-            if (paragraph.textContent.length > 0) {
-              emptyInfo = false;
-              newDiv.appendChild(paragraph);
-            }
+        if (o.documentation) {
+          const paragraph = document.createElement('p');
+          paragraph.textContent = getDocString(o.documentation);
+          if (paragraph.textContent.length > 0) {
+            emptyInfo = false;
+            newDiv.appendChild(paragraph);
           }
+        }
 
-          if (!emptyInfo) {
-            maybeInfo = {
-              info: () => Promise.resolve(newDiv),
-            };
-          }
-          const deprecated =
-            o.tags?.find((tag) => tag === CompletionItemTag.Deprecated) ??
-            false;
-          // The negative boost moves the deprecation down the list
-          // so we offer the user the completions that are
-          // deprecated the last
-          const maybeDeprecated = deprecated
-            ? { boost: -99, deprecated: true }
-            : {};
-
-          return {
-            label: o.label,
-            type: completionKindToCodemirrorIcon(o.kind),
-            apply:
-              o.kind === CompletionItemKind.Snippet
-                ? // codemirror requires an empty snippet space to be able to tab out of the completion
-                  snippet((o.insertText ?? o.label) + '${}')
-                : undefined,
-            detail: o.detail,
-            ...maybeDeprecated,
-            ...maybeInfo,
+        if (!emptyInfo) {
+          maybeInfo = {
+            info: () => Promise.resolve(newDiv),
           };
-        }),
-      };
-    } else {
-      return {
-        from: context.matchBefore(/(\w|\$)*$/).from,
-        options: options.map((o) => ({
-          label: o.label,
+        }
+        const deprecated =
+          o.tags?.find((tag) => tag === CompletionItemTag.Deprecated) ?? false;
+        // The negative boost moves the deprecation down the list
+        // so we offer the user the completions that are
+        // deprecated the last
+        const maybeDeprecated = deprecated
+          ? { boost: -99, deprecated: true }
+          : {};
+
+        return {
+          label: o.insertText ? o.insertText : o.label,
+          displayLabel: o.label,
           type: completionKindToCodemirrorIcon(o.kind),
           apply:
             o.kind === CompletionItemKind.Snippet
@@ -151,7 +134,9 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
                 snippet((o.insertText ?? o.label) + '${}')
               : undefined,
           detail: o.detail,
-        })),
-      };
-    }
+          ...maybeDeprecated,
+          ...maybeInfo,
+        };
+      }),
+    };
   };

package/src/lang-cypher/createCypherTheme.ts

@@ -121,6 +121,9 @@ export const createCypherTheme = ({
     '& .cm-signature-help-panel-name': {
       padding: '5px',
     },
+    '& .cm-signature-help-panel-arg-description': {
+      padding: '5px',
+    },
     '& .cm-signature-help-panel-description': {
       padding: '5px',
     },

package/src/lang-cypher/langCypher.ts

@@ -22,7 +22,6 @@ export type CypherConfig = {
   lint?: boolean;
   showSignatureTooltipBelow?: boolean;
   featureFlags?: {
-    signatureInfoOnAutoCompletions?: boolean;
     consoleCommands?: boolean;
   };
   schema?: DbSchema;

package/src/lang-cypher/signatureHelp.ts

@@ -1,7 +1,10 @@
 import { EditorState, StateField } from '@codemirror/state';
 import { showTooltip, Tooltip } from '@codemirror/view';
 import { signatureHelp } from '@neo4j-cypher/language-support';
-import { SignatureInformation } from 'vscode-languageserver-types';
+import {
+  MarkupContent,
+  SignatureInformation,
+} from 'vscode-languageserver-types';
 import { CypherConfig } from './langCypher';
 import { getDocString } from './utils';
 
@@ -38,24 +41,32 @@ const createSignatureHelpElement =
 
     const signatureLabel = document.createElement('div');
     signatureLabel.className = 'cm-signature-help-panel-name';
-    signatureLabel.appendChild(document.createTextNode(`${signature.label}(`));
+    const methodName = signature.label.slice(0, signature.label.indexOf('('));
+    const returnType = signature.label.slice(signature.label.indexOf(')') + 1);
+    signatureLabel.appendChild(document.createTextNode(`${methodName}(`));
+    let currentParamDescription: string | undefined = undefined;
 
     parameters.forEach((param, index) => {
-      if (typeof param.documentation === 'string') {
+      if (typeof param.label === 'string') {
         const span = document.createElement('span');
-        span.appendChild(document.createTextNode(param.documentation));
+        span.appendChild(document.createTextNode(param.label));
         if (index !== parameters.length - 1) {
           span.appendChild(document.createTextNode(', '));
         }
 
         if (index === activeParameter) {
           span.className = 'cm-signature-help-panel-current-argument';
+          const paramDoc = param.documentation;
+          currentParamDescription = MarkupContent.is(paramDoc)
+            ? paramDoc.value
+            : paramDoc;
         }
         signatureLabel.appendChild(span);
       }
     });
 
     signatureLabel.appendChild(document.createTextNode(')'));
+    signatureLabel.appendChild(document.createTextNode(returnType));
 
     contents.appendChild(signatureLabel);
 
@@ -64,11 +75,18 @@ const createSignatureHelpElement =
 
     contents.appendChild(separator);
 
-    const description = document.createElement('div');
-    description.className = 'cm-signature-help-panel-description';
-    description.appendChild(document.createTextNode(doc));
-
-    contents.appendChild(description);
+    if (currentParamDescription !== undefined) {
+      const argDescription = document.createElement('div');
+      argDescription.className = 'cm-signature-help-panel-arg-description';
+      argDescription.appendChild(
+        document.createTextNode(currentParamDescription),
+      );
+      contents.appendChild(argDescription);
+    }
+    const methodDescription = document.createElement('div');
+    methodDescription.className = 'cm-signature-help-panel-description';
+    methodDescription.appendChild(document.createTextNode(doc));
+    contents.appendChild(methodDescription);
 
     return { dom };
   };

package/src/lang-cypher/syntaxValidation.ts

@@ -54,9 +54,9 @@ export const semanticAnalysisLinter: (config: CypherConfig) => Extension = (
     const parse = parserWrapper.parse(query);
     const statements = parse.statementsParsing;
 
-    const anySyntacticError =
-      statements.filter((statement) => statement.diagnostics.length !== 0)
-        .length > 0;
+    const anySyntacticError = statements.some(
+      (statement) => statement.syntaxErrors.length !== 0,
+    );
 
     if (anySyntacticError) {
       return [];

package/src/neo4jSetup.tsx

@@ -61,7 +61,13 @@ const insertTab: StateCommand = (cmd) => {
   return true;
 };
 
-export const basicNeo4jSetup = (): Extension[] => {
+type SetupProps = {
+  moveFocusOnTab?: boolean;
+};
+
+export const basicNeo4jSetup = ({
+  moveFocusOnTab = false,
+}: SetupProps): Extension[] => {
   const keymaps: KeyBinding[] = [
     closeBracketsKeymap,
     defaultKeymap,
@@ -70,23 +76,28 @@ export const basicNeo4jSetup = (): Extension[] => {
     foldKeymap,
     completionKeymap,
     lintKeymap,
-    {
-      key: 'Tab',
-      preventDefault: true,
-      run: acceptCompletion,
-    },
-    {
-      key: 'Tab',
-      preventDefault: true,
-      run: insertTab,
-    },
-    {
-      key: 'Shift-Tab',
-      preventDefault: true,
-      run: indentLess,
-    },
   ].flat();
 
+  if (!moveFocusOnTab) {
+    keymaps.push(
+      {
+        key: 'Tab',
+        preventDefault: true,
+        run: acceptCompletion,
+      },
+      {
+        key: 'Tab',
+        preventDefault: true,
+        run: insertTab,
+      },
+      {
+        key: 'Shift-Tab',
+        preventDefault: true,
+        run: indentLess,
+      },
+    );
+  }
+
   const extensions: Extension[] = [];
 
   extensions.push(highlightSpecialChars());