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

package/src/e2e_tests/historyNavigation.spec.tsx

@@ -2,8 +2,6 @@ import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
 import { CypherEditorPage } from './e2eUtils';
 
-test.use({ viewport: { width: 500, height: 500 } });
-
 test('respects preloaded history', async ({ page, mount }) => {
   const editorPage = new CypherEditorPage(page);
 
@@ -27,13 +25,75 @@ test('respects preloaded history', async ({ page, mount }) => {
   await editorPage.getEditor().press('ArrowUp');
   await expect(page.getByText('second')).toBeVisible();
 
+  // First arrow down is to get to end of line
+  await editorPage.getEditor().press('ArrowDown');
   await editorPage.getEditor().press('ArrowDown');
   await expect(page.getByText('first')).toBeVisible();
   await editorPage.getEditor().press('ArrowDown');
   await expect(page.getByText(initialValue)).toBeVisible();
 });
 
-test('can execute queries and see them in history', async ({ page, mount }) => {
+test('can add new lines without onExecute', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const editorComponent = await mount(<CypherEditor />);
+
+  // Ctrl-Enter does nothing when onExecute is false
+  await editorPage.getEditor().press('Control+Enter');
+  await expect(editorComponent).toHaveText('1\n', {
+    useInnerText: true,
+  });
+
+  // Enter adds new lines
+  await editorPage.getEditor().fill('Brock');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  await expect(editorComponent).toHaveText('1\n2\n3\nBrock', {
+    useInnerText: true,
+  });
+
+  // Shift-Enter adds new lines
+  await editorPage.getEditor().press('Shift+Enter');
+  await editorPage.getEditor().press('Shift+Enter');
+  await expect(editorComponent).toHaveText('1\n2\n3\n4\n5\nBrock', {
+    useInnerText: true,
+  });
+});
+
+test('can add new lines with newLineOnEnter and without onExecute', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const editorComponent = await mount(<CypherEditor newLineOnEnter />);
+
+  // Ctrl-Enter does nothing when onExecute is false
+  await editorPage.getEditor().press('Control+Enter');
+  await expect(editorComponent).toHaveText('1\n', {
+    useInnerText: true,
+  });
+
+  // Enter adds new lines
+  await editorPage.getEditor().fill('Brock');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  await expect(editorComponent).toHaveText('1\n2\n3\nBrock', {
+    useInnerText: true,
+  });
+
+  // Shift-Enter adds new lines
+  await editorPage.getEditor().press('Shift+Enter');
+  await editorPage.getEditor().press('Shift+Enter');
+  await expect(editorComponent).toHaveText('1\n2\n3\n4\n5\nBrock', {
+    useInnerText: true,
+  });
+});
+
+test('can execute queries and see them in history with newLineOnEnter', async ({
+  page,
+  mount,
+}) => {
   const editorPage = new CypherEditorPage(page);
 
   const initialValue = `MATCH (n)
@@ -49,6 +109,7 @@ RETURN n;`;
       value={initialValue}
       history={history}
       onExecute={onExecute}
+      newLineOnEnter
     />,
   );
 
@@ -63,12 +124,12 @@ RETURN n;`;
   await editorPage.getEditor().press('Meta+Enter');
   expect(history.length).toBe(1);
 
-  // Ensure only enter doesn't execute query
+  // Ensure cmd+enter is required in multiline
   await editorPage.getEditor().fill('multiline');
   await editorPage.getEditor().press('Enter');
   await editorPage.getEditor().press('Enter');
   await editorPage.getEditor().press('Enter');
-  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Shift+Enter');
   await page.keyboard.type('entry');
   expect(history.length).toBe(1);
 
@@ -102,10 +163,15 @@ RETURN n;`;
   await expect(page.getByText('multiline')).toBeVisible();
 
   // arrow movements don't matter until bottom is hit
+  await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowDown');
   await editorPage.getEditor().press('ArrowUp');
   await editorPage.getEditor().press('ArrowUp');
   await editorPage.getEditor().press('ArrowDown');
   await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowDown');
+  await editorPage.getEditor().press('ArrowDown');
 
   // editor still multiline
   await expect(page.getByText('multiline')).toBeVisible();
@@ -115,6 +181,59 @@ RETURN n;`;
   await expect(page.getByText('draft')).toBeVisible();
 });
 
+test('can execute queries without newLineOnEnter', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const initialValue = 'Brock';
+
+  const history: string[] = [];
+  const onExecute = (cmd: string) => {
+    history.unshift(cmd);
+  };
+
+  const editorComponent = await mount(
+    <CypherEditor value={initialValue} onExecute={onExecute} />,
+  );
+
+  // Cmd/Control still executes initial query
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  expect(history.length).toBe(1);
+
+  // Ensure query execution doesn't fire if the query is only whitespace
+  await editorPage.getEditor().fill('     ');
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  await editorPage.getEditor().press('Enter');
+  expect(history.length).toBe(1);
+
+  // Ensure enter executes query when in single line
+  await editorPage.getEditor().fill('Misty');
+  await editorPage.getEditor().press('Enter');
+  expect(history.length).toBe(2);
+  expect(history).toEqual(['Misty', 'Brock']);
+
+  // Ensure cmd+enter is required in multiline
+  await editorPage.getEditor().fill('multiline');
+  await editorPage.getEditor().press('Shift+Enter');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('A');
+
+  // line numbers and the text
+  await expect(editorComponent).toHaveText('1\n2\n3\nmultiline\nA', {
+    useInnerText: true,
+  });
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  await editorPage.getEditor().press('Enter');
+  expect(history.length).toBe(2);
+
+  await editorPage.getEditor().press('Control+Enter');
+  await editorPage.getEditor().press('Meta+Enter');
+  expect(history.length).toBe(3);
+});
+
 test('can navigate with cmd+up as well', async ({ page, mount }) => {
   const editorPage = new CypherEditorPage(page);
   const isMac = process.platform === 'darwin';
@@ -127,11 +246,11 @@ test('can navigate with cmd+up as well', async ({ page, mount }) => {
     <CypherEditor
       value={initialValue}
       history={[
+        'first',
         `one
 multiline
 entry
 .`,
-        'second',
       ]}
       onExecute={() => {
         /* needed to turn on history movements */
@@ -139,24 +258,24 @@ entry
     />,
   );
 
+  await editorPage.getEditor().press(metaUp);
+  await expect(page.getByText('first')).toBeVisible();
+
+  // move in history
   await editorPage.getEditor().press(metaUp);
   await expect(page.getByText('multiline')).toBeVisible();
 
-  // Single meta up moves all the way to top of editor on mac
+  // Single meta down moves all the way to top of editor on mac
   if (isMac) {
-    await editorPage.getEditor().press(metaUp);
+    await editorPage.getEditor().press(metaDown);
   } else {
-    await editorPage.getEditor().press('ArrowUp');
-    await editorPage.getEditor().press('ArrowUp');
-    await editorPage.getEditor().press('ArrowUp');
-    await editorPage.getEditor().press('ArrowUp');
+    await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
   }
-  // move in history
-  await editorPage.getEditor().press(metaUp);
-  await expect(page.getByText('second')).toBeVisible();
-
   await editorPage.getEditor().press(metaDown);
-  await expect(page.getByText('multiline')).toBeVisible();
+  await expect(page.getByText('first')).toBeVisible();
 });
 
 test('test onExecute', async ({ page, mount }) => {

package/src/e2e_tests/sanityChecks.spec.tsx

@@ -1,8 +1,6 @@
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
 
-test.use({ viewport: { width: 500, height: 500 } });
-
 test('can mount the editor with text', async ({ mount }) => {
   const component = await mount(<CypherEditor value="MATCH (n) RETURN n;" />);
 

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -307,3 +307,74 @@ test('Signature help does not blow up on empty query', async ({
     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-signature-help-panel.cm-tooltip-above'),
+  ).toBeVisible({
+    timeout: 2000,
+  });
+});

package/src/e2e_tests/snippets.spec.tsx

@@ -1,8 +1,6 @@
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
 
-test.use({ viewport: { width: 500, height: 500 } });
-
 test('can complete pattern snippet', async ({ page, mount }) => {
   await mount(<CypherEditor />);
   const textField = page.getByRole('textbox');

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/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 {
@@ -108,7 +109,7 @@ export const createCypherTheme = ({
     },
     '& .cm-signature-help-panel-contents': {
       overflow: 'auto',
-      maxHeight: '100%',
+      maxHeight: '250px',
     },
     '& .cm-signature-help-panel-current-argument': {
       color: settings.autoCompletionPanel.matchingTextColor,
@@ -123,7 +124,12 @@ export const createCypherTheme = ({
     '& .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]': {
@@ -230,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),

package/src/lang-cypher/signatureHelp.ts

@@ -3,6 +3,7 @@ import { showTooltip, Tooltip } from '@codemirror/view';
 import { signatureHelp } from '@neo4j-cypher/language-support';
 import { SignatureInformation } from 'vscode-languageserver-types';
 import { CypherConfig } from './langCypher';
+import { getDocString } from './utils';
 
 function getTriggerCharacter(query: string, caretPosition: number) {
   let i = caretPosition - 1;
@@ -27,7 +28,7 @@ const createSignatureHelpElement =
   }) =>
   () => {
     const parameters = signature.parameters;
-    const doc = signature.documentation.toString();
+    const doc = getDocString(signature.documentation);
     const dom = document.createElement('div');
     dom.className = 'cm-signature-help-panel';
 
@@ -100,12 +101,13 @@ function getSignatureHelpTooltip(
         signatures[activeSignature].documentation !== undefined
       ) {
         const signature = signatures[activeSignature];
+        const showSignatureTooltipBelow =
+          config.showSignatureTooltipBelow ?? true;
 
         result = [
           {
             pos: caretPosition,
-            above: true,
-            strictSide: true,
+            above: !showSignatureTooltipBelow,
             arrow: true,
             create: createSignatureHelpElement({ signature, activeParameter }),
           },

package/src/lang-cypher/utils.ts

@@ -0,0 +1,9 @@
+import { MarkupContent } from 'vscode-languageserver-types';
+
+export function getDocString(result: string | MarkupContent): string {
+  if (MarkupContent.is(result)) {
+    result.value;
+  } else {
+    return result;
+  }
+}