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

package/src/CypherEditor.tsx

@@ -9,6 +9,7 @@ import {
   KeyBinding,
   keymap,
   lineNumbers,
+  placeholder,
   ViewUpdate,
 } from '@codemirror/view';
 import type { DbSchema } from '@neo4j-cypher/language-support';
@@ -23,6 +24,7 @@ import { cleanupWorkers } from './lang-cypher/syntaxValidation';
 import { basicNeo4jSetup } from './neo4jSetup';
 import { getThemeExtension } from './themes';
 
+type DomEventHandlers = Parameters<typeof EditorView.domEventHandlers>[0];
 export interface CypherEditorProps {
   /**
    * The prompt to show on single line editors
@@ -42,7 +44,7 @@ export interface CypherEditorProps {
    */
   onExecute?: (cmd: string) => void;
   /**
-   * The editor history navigateable via up/down arrow keys. Order newest to oldest.
+   * The editor history navigable via up/down arrow keys. Order newest to oldest.
    * Add to this list with the `onExecute` callback for REPL style history.
    */
   history?: string[];
@@ -102,6 +104,37 @@ export interface CypherEditorProps {
    * @param {ViewUpdate} viewUpdate - the view update from codemirror
    */
   onChange?(value: string, viewUpdate: ViewUpdate): void;
+
+  /**
+   * Map of event handlers to add to the editor.
+   *
+   * Note that the props are compared by reference, meaning object defined inline
+   * will cause the editor to re-render (much like the style prop does in this example:
+   * <div style={{}} />
+   *
+   * Memoize the object if you want/need to avoid this.
+   *
+   * @example
+   * // listen to blur events
+   * <CypherEditor domEventHandlers={{blur: () => console.log("blur event fired")}} />
+   */
+  domEventHandlers?: DomEventHandlers;
+  /**
+   * Placeholder text to display when the editor is empty.
+   */
+  placeholder?: string;
+  /**
+   * Whether the editor should show line numbers.
+   *
+   * @default true
+   */
+  lineNumbers?: boolean;
+  /**
+   * Whether the editor is read-only.
+   *
+   * @default false
+   */
+  readonly?: boolean;
 }
 
 const executeKeybinding = (onExecute?: (cmd: string) => void) =>
@@ -125,6 +158,20 @@ const executeKeybinding = (onExecute?: (cmd: string) => void) =>
 
 const themeCompartment = new Compartment();
 const keyBindingCompartment = new Compartment();
+const lineNumbersCompartment = new Compartment();
+const readOnlyCompartment = new Compartment();
+const placeholderCompartment = new Compartment();
+const domEventHandlerCompartment = new Compartment();
+
+const formatLineNumber =
+  (prompt?: string) => (a: number, state: EditorState) => {
+    if (state.doc.lines === 1 && prompt !== undefined) {
+      return prompt;
+    }
+
+    return a.toString();
+  };
+
 type CypherEditorState = { cypherSupportEnabled: boolean };
 
 const ExternalEdit = Annotation.define<boolean>();
@@ -188,6 +235,7 @@ export class CypherEditor extends Component<
     extraKeybindings: [],
     history: [],
     theme: 'light',
+    lineNumbers: true,
   };
 
   private debouncedOnChange = this.props.onChange
@@ -249,15 +297,20 @@ export class CypherEditor extends Component<
         cypher(this.schemaRef.current),
         lineWrap ? EditorView.lineWrapping : [],
 
-        lineNumbers({
-          formatNumber: (a, state) => {
-            if (state.doc.lines === 1 && this.props.prompt !== undefined) {
-              return this.props.prompt;
-            }
-
-            return a.toString();
-          },
-        }),
+        lineNumbersCompartment.of(
+          this.props.lineNumbers
+            ? lineNumbers({ formatNumber: formatLineNumber(this.props.prompt) })
+            : [],
+        ),
+        readOnlyCompartment.of(EditorState.readOnly.of(this.props.readonly)),
+        placeholderCompartment.of(
+          this.props.placeholder ? placeholder(this.props.placeholder) : [],
+        ),
+        domEventHandlerCompartment.of(
+          this.props.domEventHandlers
+            ? EditorView.domEventHandlers(this.props.domEventHandlers)
+            : [],
+        ),
       ],
       doc: this.props.value,
     });
@@ -313,6 +366,35 @@ export class CypherEditor extends Component<
       });
     }
 
+    if (
+      prevProps.lineNumbers !== this.props.lineNumbers ||
+      prevProps.prompt !== this.props.prompt
+    ) {
+      this.editorView.current.dispatch({
+        effects: lineNumbersCompartment.reconfigure(
+          this.props.lineNumbers
+            ? lineNumbers({ formatNumber: formatLineNumber(this.props.prompt) })
+            : [],
+        ),
+      });
+    }
+
+    if (prevProps.readonly !== this.props.readonly) {
+      this.editorView.current.dispatch({
+        effects: readOnlyCompartment.reconfigure(
+          EditorState.readOnly.of(this.props.readonly),
+        ),
+      });
+    }
+
+    if (prevProps.placeholder !== this.props.placeholder) {
+      this.editorView.current.dispatch({
+        effects: placeholderCompartment.reconfigure(
+          this.props.placeholder ? placeholder(this.props.placeholder) : [],
+        ),
+      });
+    }
+
     if (
       prevProps.extraKeybindings !== this.props.extraKeybindings ||
       prevProps.onExecute !== this.props.onExecute
@@ -327,6 +409,16 @@ export class CypherEditor extends Component<
       });
     }
 
+    if (prevProps.domEventHandlers !== this.props.domEventHandlers) {
+      this.editorView.current.dispatch({
+        effects: domEventHandlerCompartment.reconfigure(
+          this.props.domEventHandlers
+            ? EditorView.domEventHandlers(this.props.domEventHandlers)
+            : [],
+        ),
+      });
+    }
+
     // This component rerenders on every keystroke and comparing the
     // full lists of editor strings on every render could be expensive.
     const didChangeHistoryEstimate =

package/src/e2e_tests/configuration.spec.tsx

@@ -0,0 +1,97 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+
+test.use({ viewport: { width: 500, height: 500 } });
+
+test('prompt shows up', async ({ mount, page }) => {
+  const component = await mount(<CypherEditor prompt="neo4j>" />);
+
+  await expect(component).toContainText('neo4j>');
+
+  await component.update(<CypherEditor prompt="test>" />);
+  await expect(component).toContainText('test>');
+
+  const textField = page.getByRole('textbox');
+  await textField.press('a');
+
+  await expect(textField).toHaveText('a');
+});
+
+test('line numbers can be turned on/off', async ({ mount }) => {
+  const component = await mount(<CypherEditor lineNumbers />);
+
+  await expect(component).toContainText('1');
+
+  await component.update(<CypherEditor lineNumbers={false} />);
+  await expect(component).not.toContainText('1');
+});
+
+test('can configure readonly', async ({ mount, page }) => {
+  const component = await mount(<CypherEditor readonly />);
+
+  const textField = page.getByRole('textbox');
+  await textField.press('a');
+  await expect(textField).not.toHaveText('a');
+
+  await component.update(<CypherEditor readonly={false} />);
+  await textField.press('b');
+  await expect(textField).toHaveText('b');
+});
+
+test('can set placeholder ', async ({ mount, page }) => {
+  const component = await mount(<CypherEditor placeholder="bulbasaur" />);
+
+  const textField = page.getByRole('textbox');
+  await expect(textField).toHaveText('bulbasaur');
+
+  await component.update(<CypherEditor placeholder="venusaur" />);
+  await expect(textField).not.toHaveText('bulbasaur');
+  await expect(textField).toHaveText('venusaur');
+
+  await textField.fill('abc');
+  await expect(textField).not.toHaveText('venusaur');
+  await expect(textField).toHaveText('abc');
+});
+
+test('can set/unset onFocus/onBlur', async ({ mount, page }) => {
+  const component = await mount(<CypherEditor />);
+
+  let focusFireCount = 0;
+  let blurFireCount = 0;
+
+  const focus = () => {
+    focusFireCount += 1;
+  };
+  const blur = () => {
+    blurFireCount += 1;
+  };
+
+  await component.update(<CypherEditor domEventHandlers={{ blur, focus }} />);
+
+  const textField = page.getByRole('textbox');
+  await textField.click();
+  await expect(textField).toBeFocused();
+
+  // this is to give the events time to fire
+  await expect(() => {
+    expect(focusFireCount).toBe(1);
+    expect(blurFireCount).toBe(0);
+  }).toPass();
+
+  await textField.blur();
+
+  await expect(() => {
+    expect(focusFireCount).toBe(1);
+    expect(blurFireCount).toBe(1);
+  }).toPass();
+
+  await component.update(<CypherEditor />);
+  await textField.click();
+  await expect(textField).toBeFocused();
+  await textField.blur();
+
+  await expect(() => {
+    expect(focusFireCount).toBe(1);
+    expect(blurFireCount).toBe(1);
+  }).toPass();
+});

package/src/e2e_tests/e2eUtils.ts

@@ -65,11 +65,21 @@ export class CypherEditorPage {
     expectedMsg: string,
   ) {
     await expect(this.page.locator('.cm-lintRange-' + type).last()).toBeVisible(
-      { timeout: 2000 },
+      { timeout: 3000 },
     );
 
     await this.page.getByText(queryChunk, { exact: true }).hover();
     await expect(this.page.locator('.cm-tooltip-hover').last()).toBeVisible();
     await expect(this.page.getByText(expectedMsg)).toBeVisible();
+    /* Return the mouse to the beginning of the query and
+       This is because if for example we have an overlay with a 
+       first interaction that covers the element we want to perform
+       the second interaction on, we won't be able to see that second element
+    */
+    await this.page.mouse.move(0, 0);
+    // Make the sure the tooltip closed
+    await expect(
+      this.page.locator('.cm-tooltip-hover').last(),
+    ).not.toBeVisible();
   }
 }

package/src/e2e_tests/sanityChecks.spec.tsx

@@ -76,17 +76,3 @@ test('can complete CALL/CREATE', async ({ page, mount }) => {
 
   await expect(textField).toHaveText('CALL');
 });
-
-test('prompt shows up', async ({ mount, page }) => {
-  const component = await mount(<CypherEditor prompt="neo4j>" />);
-
-  await expect(component).toContainText('neo4j>');
-
-  await component.update(<CypherEditor prompt="test>" />);
-  await expect(component).toContainText('test>');
-
-  const textField = page.getByRole('textbox');
-  await textField.press('a');
-
-  await expect(textField).toHaveText('a');
-});

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,7 @@ test('Signature help does not blow up on empty query', async ({
     />,
   );
 
-  await expect(
-    page.locator('.cm-tooltip-signature-help').last(),
-  ).not.toBeVisible({
+  await expect(page.locator('.cm-signature-help-panel')).not.toBeVisible({
     timeout: 2000,
   });
 });

package/src/e2e_tests/snippets.spec.tsx

@@ -0,0 +1,94 @@
+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');
+
+  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/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/lang-cypher/autocomplete.ts

@@ -1,4 +1,4 @@
-import { CompletionSource } from '@codemirror/autocomplete';
+import { CompletionSource, snippet } from '@codemirror/autocomplete';
 import { autocomplete } from '@neo4j-cypher/language-support';
 import { CompletionItemKind } from 'vscode-languageserver-types';
 import { CompletionItemIcons } from '../icons';
@@ -28,7 +28,7 @@ const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
     [CompletionItemKind.EnumMember]: 'EnumMember',
     [CompletionItemKind.Constant]: 'Constant',
     [CompletionItemKind.Struct]: 'Struct',
-    // we're missuing the enum here as there is no `Console` kind in the predefined list
+    // we're miss-using the enum here as there is no `Console` kind in the predefined list
     [CompletionItemKind.Event]: 'Console',
     [CompletionItemKind.Operator]: 'Operator',
     [CompletionItemKind.TypeParameter]: 'TypeParameter',
@@ -41,7 +41,7 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
   (config) => (context) => {
     const textUntilCursor = context.state.doc.toString().slice(0, context.pos);
 
-    const triggerCharacters = ['.', ':', '{', '$'];
+    const triggerCharacters = ['.', ':', '{', '$', ')'];
     const lastCharacter = textUntilCursor.slice(-1);
 
     const lastWord = context.matchBefore(/\w*/);
@@ -58,13 +58,24 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
       return null;
     }
 
-    const options = autocomplete(textUntilCursor, config.schema ?? {});
+    const options = autocomplete(
+      textUntilCursor,
+      config.schema ?? {},
+      undefined,
+      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,
       })),
     };
   };

package/src/lang-cypher/createCypherTheme.ts

@@ -53,6 +53,9 @@ export const createCypherTheme = ({
       color: settings.foreground,
       fontVariantLigatures: 'none',
     },
+    '& .cm-snippetField': {
+      backgroundColor: settings.autoCompletionPanel.selectedColor,
+    },
     '&.cm-focused': {
       outline: 'none',
     },
@@ -61,8 +64,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,
@@ -96,7 +100,32 @@ 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: '100%',
+    },
+    '& .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-tooltip-autocomplete': {
+      maxWidth: '430px',
       '& > ul > li[aria-selected]': {
         backgroundColor: settings.autoCompletionPanel.selectedColor,
         color: settings.foreground,