@neo4j-cypher/react-codemirror 2.0.0-next.7 → 2.0.0-next.9

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -44,7 +44,7 @@ test('Signature help works for functions', async ({ page, mount }) => {
     />,
   );
 
-  await expect(page.locator('.cm-tooltip-signature-help').last()).toBeVisible({
+  await expect(page.locator('.cm-signature-help-panel')).toBeVisible({
     timeout: 2000,
   });
 });
@@ -60,7 +60,7 @@ test('Signature help works for procedures', async ({ page, mount }) => {
     />,
   );
 
-  await expect(page.locator('.cm-tooltip-signature-help').last()).toBeVisible({
+  await expect(page.locator('.cm-signature-help-panel')).toBeVisible({
     timeout: 2000,
   });
 });
@@ -79,7 +79,7 @@ test('Signature help shows the description for the first argument', async ({
     />,
   );
 
-  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+  const tooltip = page.locator('.cm-signature-help-panel');
 
   await testTooltip(tooltip, {
     includes: [
@@ -99,7 +99,7 @@ test('Signature help shows the description for the first argument when the curso
     <CypherEditor value={query} schema={testData.mockSchema} offset={21} />,
   );
 
-  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+  const tooltip = page.locator('.cm-signature-help-panel');
 
   await testTooltip(tooltip, {
     includes: [
@@ -123,7 +123,7 @@ test('Signature help shows the description for the second argument', async ({
     />,
   );
 
-  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+  const tooltip = page.locator('.cm-signature-help-panel');
 
   await testTooltip(tooltip, {
     includes: [
@@ -143,7 +143,7 @@ test('Signature help shows the description for the second argument when the curs
     <CypherEditor value={query} schema={testData.mockSchema} offset={27} />,
   );
 
-  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+  const tooltip = page.locator('.cm-signature-help-panel');
 
   await testTooltip(tooltip, {
     includes: [
@@ -163,7 +163,7 @@ test('Signature help shows the description for the second argument when the curs
     <CypherEditor value={query} schema={testData.mockSchema} offset={28} />,
   );
 
-  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+  const tooltip = page.locator('.cm-signature-help-panel');
 
   await testTooltip(tooltip, {
     includes: [
@@ -187,7 +187,7 @@ test('Signature help shows description for arguments with a space following a se
     />,
   );
 
-  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+  const tooltip = page.locator('.cm-signature-help-panel');
 
   await testTooltip(tooltip, {
     includes: [
@@ -211,7 +211,7 @@ test('Signature help shows the description for the third argument', async ({
     />,
   );
 
-  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+  const tooltip = page.locator('.cm-signature-help-panel');
 
   await testTooltip(tooltip, {
     includes: [
@@ -235,7 +235,7 @@ test('Signature help works on multiline queries', async ({ page, mount }) => {
     />,
   );
 
-  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+  const tooltip = page.locator('.cm-signature-help-panel');
 
   await testTooltip(tooltip, {
     includes: [
@@ -258,14 +258,15 @@ test('Signature help only shows the description past the last argument', async (
       autofocus={true}
     />,
   );
+  1;
 
-  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+  const tooltip = page.locator('.cm-signature-help-panel');
 
   await testTooltip(tooltip, {
     includes: [
-      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+      'apoc.import.csv(nodes :: LIST<MAP>, rels :: LIST<MAP>, config :: MAP)',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file.',
     ],
-    excludes: ['config :: MAP'],
   });
 });
 
@@ -283,9 +284,7 @@ test('Signature help does not show any help when method finished', async ({
     />,
   );
 
-  await expect(
-    page.locator('.cm-tooltip-signature-help').last(),
-  ).not.toBeVisible({
+  await expect(page.locator('.cm-signature-help-panel')).not.toBeVisible({
     timeout: 2000,
   });
 });
@@ -304,9 +303,78 @@ test('Signature help does not blow up on empty query', async ({
     />,
   );
 
+  await expect(page.locator('.cm-signature-help-panel')).not.toBeVisible({
+    timeout: 2000,
+  });
+});
+
+test('Signature help is shown below the text by default', async ({
+  page,
+  mount,
+}) => {
+  // We need to introduce new lines to make sure there's
+  // enough space to show the tooltip above
+  const query = '\n\n\n\n\n\n\nRETURN abs(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  await expect(
+    page.locator('.cm-signature-help-panel.cm-tooltip-below'),
+  ).toBeVisible({
+    timeout: 2000,
+  });
+});
+
+test('Setting showSignatureTooltipBelow to true shows the signature help above the text', async ({
+  page,
+  mount,
+}) => {
+  // We need to introduce new lines to make sure there's
+  // enough space to show the tooltip above
+  const query = '\n\n\n\n\n\n\nRETURN abs(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      showSignatureTooltipBelow={true}
+      autofocus={true}
+    />,
+  );
+
+  await expect(
+    page.locator('.cm-signature-help-panel.cm-tooltip-below'),
+  ).toBeVisible({
+    timeout: 2000,
+  });
+});
+
+test('Setting showSignatureTooltipBelow to false shows the signature help above the text', async ({
+  page,
+  mount,
+}) => {
+  // We need to introduce new lines to make sure there's
+  // enough space to show the tooltip above
+  const query = '\n\n\n\n\n\n\nRETURN abs(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      showSignatureTooltipBelow={false}
+      autofocus={true}
+    />,
+  );
+
   await expect(
-    page.locator('.cm-tooltip-signature-help').last(),
-  ).not.toBeVisible({
+    page.locator('.cm-signature-help-panel.cm-tooltip-above'),
+  ).toBeVisible({
     timeout: 2000,
   });
 });

package/src/e2e_tests/snippets.spec.tsx

@@ -0,0 +1,92 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+
+test('can complete pattern snippet', async ({ page, mount }) => {
+  await mount(<CypherEditor />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('MATCH ()-[]->()');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('-[]->()').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await textField.press('Tab');
+  await textField.press('Tab');
+
+  await expect(textField).toHaveText('MATCH ()-[]->()-[ ]->( )');
+});
+
+test('can navigate snippet', async ({ page, mount }) => {
+  await mount(<CypherEditor />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('CREATE INDEX abc FOR ()');
+
+  await page
+    .locator('.cm-tooltip-autocomplete')
+    .getByText('-[]-()', { exact: true })
+    .click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+  await expect(page.locator('.cm-snippetField')).toHaveCount(2);
+
+  await textField.press('Tab');
+  await textField.press('Shift+Tab');
+
+  await expect(textField).toHaveText('CREATE INDEX abc FOR ()-[ ]-( )');
+
+  await textField.press('a');
+  await expect(textField).toHaveText('CREATE INDEX abc FOR ()-[a]-( )');
+
+  await textField.press('Escape');
+  await textField.press('Escape');
+  await expect(page.locator('.cm-snippetField')).toHaveCount(0);
+  await textField.press('Tab');
+  await expect(textField).toHaveText('CREATE INDEX abc FOR ()-[a  ]-( )');
+});
+
+test('can accept completion inside pattern snippet', async ({
+  page,
+  mount,
+}) => {
+  await mount(<CypherEditor schema={{ labels: ['City'] }} />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('MATCH ()-[]->()');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('-[]->()').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  // move to node
+  await textField.press('Tab');
+
+  // get & accept completion
+  await textField.press(':');
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('City'),
+  ).toBeVisible();
+
+  await textField.press('Tab');
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  // tab out of the snippet
+  await textField.press('Tab');
+
+  await expect(textField).toHaveText('MATCH ()-[]->()-[ ]->(:City)');
+});
+
+test('does not automatically open completion panel for expressions after snippet trigger char', async ({
+  page,
+  mount,
+}) => {
+  await mount(<CypherEditor />);
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('RETURN (1)');
+
+  // expect the panel to not show up
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  // unless manually triggered
+  await textField.press('Control+ ');
+  await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+});

package/src/e2e_tests/syntaxHighlighting.spec.tsx

@@ -3,8 +3,6 @@ import { CypherEditor } from '../CypherEditor';
 import { darkThemeConstants, lightThemeConstants } from '../themes';
 import { CypherEditorPage } from './e2eUtils';
 
-test.use({ viewport: { width: 500, height: 500 } });
-
 test('light theme highlighting', async ({ page, mount }) => {
   const editorPage = new CypherEditorPage(page);
   const query = `

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -106,7 +106,7 @@ test('Semantic errors are correctly accumulated', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     'MATCH (n)',
-    'Query cannot conclude with MATCH (must be a RETURN 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(
@@ -126,7 +126,7 @@ test('Multiline errors are correctly placed', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     'MATCH (n)',
-    'Query cannot conclude with MATCH (must be a RETURN 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(
@@ -146,7 +146,7 @@ test('Validation errors are correctly overlapped', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     '-1',
-    'Query cannot conclude with CALL (must be a RETURN clause, an update clause, a unit subquery call, or a procedure call with no YIELD)',
+    'Query cannot conclude with CALL (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(

package/src/historyNavigation.ts

@@ -97,7 +97,7 @@ function navigateHistory(view: EditorView, direction: HistoryNavigation) {
   view.dispatch(
     view.state.update({
       effects: moveInHistory.of(direction),
-      selection: { anchor: view.state.doc.length },
+      selection: { anchor: direction === 'BACK' ? 0 : view.state.doc.length },
     }),
   );
 

package/src/index.ts

@@ -1,4 +1,7 @@
-export { CypherParser } from '@neo4j-cypher/language-support';
+export {
+  CypherParser,
+  _internalFeatureFlags,
+} 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

@@ -1,8 +1,16 @@
-import { CompletionSource, snippet } from '@codemirror/autocomplete';
+import {
+  Completion,
+  CompletionSource,
+  snippet,
+} from '@codemirror/autocomplete';
 import { autocomplete } from '@neo4j-cypher/language-support';
-import { CompletionItemKind } from 'vscode-languageserver-types';
+import {
+  CompletionItemKind,
+  CompletionItemTag,
+} from 'vscode-languageserver-types';
 import { CompletionItemIcons } from '../icons';
 import type { CypherConfig } from './langCypher';
+import { getDocString } from './utils';
 
 const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
   const map: Record<CompletionItemKind, CompletionItemIcons> = {
@@ -37,12 +45,22 @@ const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
   return map[c];
 };
 
+export const completionStyles: (
+  completion: Completion & { deprecated?: boolean },
+) => string = (completion) => {
+  if (completion.deprecated) {
+    return 'cm-deprecated-completion';
+  } else {
+    return null;
+  }
+};
+
 export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
   (config) => (context) => {
-    const textUntilCursor = context.state.doc.toString().slice(0, context.pos);
+    const documentText = context.state.doc.toString();
 
     const triggerCharacters = ['.', ':', '{', '$', ')'];
-    const lastCharacter = textUntilCursor.slice(-1);
+    const lastCharacter = documentText.at(context.pos - 1);
 
     const lastWord = context.matchBefore(/\w*/);
     const inWord = lastWord.from !== lastWord.to;
@@ -59,23 +77,81 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
     }
 
     const options = autocomplete(
-      textUntilCursor,
+      documentText,
       config.schema ?? {},
-      undefined,
+      context.pos,
       context.explicit,
     );
 
-    return {
-      from: context.matchBefore(/(\w|\$)*$/).from,
-      options: options.map((o) => ({
-        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,
-      })),
-    };
+    if (config.featureFlags?.signatureInfoOnAutoCompletions) {
+      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.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,
+          };
+        }),
+      };
+    } else {
+      return {
+        from: context.matchBefore(/(\w|\$)*$/).from,
+        options: options.map((o) => ({
+          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,
+        })),
+      };
+    }
   };

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

@@ -1,5 +1,8 @@
 import { tags } from '@lezer/highlight';
-import { applySyntaxColouring } from '@neo4j-cypher/language-support';
+import {
+  applySyntaxColouring,
+  CypherTokenType,
+} from '@neo4j-cypher/language-support';
 import { tokenTypeToStyleTag } from './constants';
 
 const cypherQueryWithAllTokenTypes = `MATCH (variable :Label)-[:REL_TYPE]->() 
@@ -54,7 +57,7 @@ test('correctly parses all cypher token types to style tags', () => {
   ]);
 
   const styleTags = tokenTypes.map((tokenType) => {
-    if (tokenType === 'none') return undefined;
+    if (tokenType === CypherTokenType.none) return undefined;
     return tokenTypeToStyleTag[tokenType];
   });
   const correctTags = [

package/src/lang-cypher/createCypherTheme.ts

@@ -5,6 +5,7 @@ import {
 } from '@codemirror/language';
 import { 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 {
@@ -64,8 +65,9 @@ export const createCypherTheme = ({
       color: settings.gutterForeground,
       border: 'none',
     },
-    '&.cm-editor .cm-scroller': {
+    '&.cm-editor': {
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+      height: '100%',
     },
     '.cm-content': {
       caretColor: settings.cursor,
@@ -99,7 +101,37 @@ export const createCypherTheme = ({
       color: settings.autoCompletionPanel.matchingTextColor,
       textDecoration: 'none',
     },
+    '& .cm-signature-help-panel': {
+      backgroundColor: settings.autoCompletionPanel.backgroundColor,
+      maxWidth: '700px',
+      maxHeight: '250px',
+      fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+    },
+    '& .cm-signature-help-panel-contents': {
+      overflow: 'auto',
+      maxHeight: '250px',
+    },
+    '& .cm-signature-help-panel-current-argument': {
+      color: settings.autoCompletionPanel.matchingTextColor,
+      fontWeight: 'bold',
+    },
+    '& .cm-signature-help-panel-separator': {
+      borderBottom: '1px solid #ccc',
+    },
+    '& .cm-signature-help-panel-name': {
+      padding: '5px',
+    },
+    '& .cm-signature-help-panel-description': {
+      padding: '5px',
+    },
+    '.cm-completionInfo-signature': {
+      color: 'darkgrey',
+    },
+    '.cm-deprecated-completion': {
+      'text-decoration': 'line-through',
+    },
     '.cm-tooltip-autocomplete': {
+      maxWidth: '430px',
       '& > ul > li[aria-selected]': {
         backgroundColor: settings.autoCompletionPanel.selectedColor,
         color: settings.foreground,
@@ -204,7 +236,7 @@ export const createCypherTheme = ({
     ([token, color]: [HighlightedCypherTokenTypes, string]): TagStyle => ({
       tag: tokenTypeToStyleTag[token],
       color,
-      class: token === 'consoleCommand' ? 'cm-bold' : undefined,
+      class: token === CypherTokenType.consoleCommand ? 'cm-bold' : undefined,
     }),
   );
   const highlightStyle = HighlightStyle.define(styles);

package/src/lang-cypher/langCypher.ts

@@ -1,13 +1,14 @@
+import { autocompletion } from '@codemirror/autocomplete';
 import {
   defineLanguageFacet,
   Language,
   LanguageSupport,
 } from '@codemirror/language';
 import {
-  setConsoleCommandsEnabled,
+  _internalFeatureFlags,
   type DbSchema,
 } from '@neo4j-cypher/language-support';
-import { cypherAutocomplete } from './autocomplete';
+import { completionStyles, cypherAutocomplete } from './autocomplete';
 import { ParserAdapter } from './parser-adapter';
 import { signatureHelpTooltip } from './signatureHelp';
 import { cypherLinter, semanticAnalysisLinter } from './syntaxValidation';
@@ -19,20 +20,31 @@ const facet = defineLanguageFacet({
 
 export type CypherConfig = {
   lint?: boolean;
+  showSignatureTooltipBelow?: boolean;
+  featureFlags?: {
+    signatureInfoOnAutoCompletions?: boolean;
+    consoleCommands?: boolean;
+  };
   schema?: DbSchema;
   useLightVersion: boolean;
   setUseLightVersion?: (useLightVersion: boolean) => void;
 };
 
 export function cypher(config: CypherConfig) {
-  setConsoleCommandsEnabled(true);
+  const featureFlags = config.featureFlags;
+  // We allow to override the consoleCommands feature flag
+  if (featureFlags.consoleCommands !== undefined) {
+    _internalFeatureFlags.consoleCommands = featureFlags.consoleCommands;
+  }
+
   const parserAdapter = new ParserAdapter(facet, config);
 
   const cypherLanguage = new Language(facet, parserAdapter, [], 'cypher');
 
   return new LanguageSupport(cypherLanguage, [
-    cypherLanguage.data.of({
-      autocomplete: cypherAutocomplete(config),
+    autocompletion({
+      override: [cypherAutocomplete(config)],
+      optionClass: completionStyles,
     }),
     cypherLinter(config),
     semanticAnalysisLinter(config),