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

package/package.json

@@ -1,6 +1,22 @@
 {
   "name": "@neo4j-cypher/react-codemirror",
+  "version": "2.0.0-next.33",
+  "keywords": [
+    "codemirror",
+    "codemirror 6",
+    "cypher",
+    "editor",
+    "neo4j",
+    "react"
+  ],
+  "bugs": {
+    "url": "https://github.com/neo4j/cypher-language-support/issues"
+  },
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/neo4j/cypher-language-support.git"
+  },
   "files": [
     "dist",
     "src",
@@ -9,30 +25,10 @@
     "LICENSE.md",
     "CHANGELOG.md"
   ],
-  "keywords": [
-    "neo4j",
-    "cypher",
-    "react",
-    "editor",
-    "codemirror",
-    "codemirror 6"
-  ],
-  "version": "2.0.0-next.31",
-  "main": "./dist/src/index.js",
-  "types": "./dist/src/index.d.ts",
   "type": "module",
   "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/neo4j/cypher-language-support.git"
-  },
-  "bugs": {
-    "url": "https://github.com/neo4j/cypher-language-support/issues"
-  },
-  "engineStrict": true,
-  "engines": {
-    "node": ">=24.11.1"
-  },
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
   "dependencies": {
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.8.1",
@@ -51,8 +47,8 @@
     "style-mod": "^4.1.2",
     "vscode-languageserver-types": "^3.17.3",
     "workerpool": "^9.3.3",
-    "@neo4j-cypher/language-support": "2.0.0-next.28",
-    "@neo4j-cypher/lint-worker": "1.10.1-next.5"
+    "@neo4j-cypher/language-support": "2.0.0-next.30",
+    "@neo4j-cypher/lint-worker": "1.10.1-next.7"
   },
   "devDependencies": {
     "@neo4j-ndl/base": "^3.2.10",
@@ -73,6 +69,10 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
+  "engines": {
+    "node": ">=24.11.1"
+  },
+  "engineStrict": true,
   "scripts": {
     "dev": "tsc --watch",
     "build": "pnpm copy-lint-worker && tsc --declaration --outDir dist/",

package/src/CypherEditor.test.tsx

@@ -124,27 +124,24 @@ test.fails('new props.value should cancel onChange', async () => {
 });
 
 // value updates from outside onExecute are overwritten by pending updates
-test.fails(
-  'new props.value set to same value should cancel onChange',
-  async () => {
-    // 1. value is set initially
-    value = 'same value';
-    rerender();
+test.fails('new props.value set to same value should cancel onChange', async () => {
+  // 1. value is set initially
+  value = 'same value';
+  rerender();
 
-    // 2. value is updated internally
-    ref.current.setValueAndFocus('update');
+  // 2. value is updated internally
+  ref.current.setValueAndFocus('update');
 
-    // 3. editor is rerendered with a new value while a value update is still pending
-    value = 'same value';
-    rerender();
+  // 3. editor is rerendered with a new value while a value update is still pending
+  value = 'same value';
+  rerender();
 
-    await debounce();
+  await debounce();
 
-    // expect(onChange).not.toHaveBeenCalled();
-    expect(getEditorValue()).toBe('same value');
-    expect(value).toBe('same value');
-  },
-);
+  // expect(onChange).not.toHaveBeenCalled();
+  expect(getEditorValue()).toBe('same value');
+  expect(value).toBe('same value');
+});
 
 test('rerender should not cancel onChange', async () => {
   // 1. value is updated internally
@@ -200,5 +197,7 @@ test('rerender with prior external update should not cancel onChange', async ()
 });
 
 test('setValueAndFocus should handle CRLF newline characters', () => {
-  expect(() => ref.current.setValueAndFocus('new value\r\nnew line')).not.toThrow();
-});
+  expect(() =>
+    ref.current.setValueAndFocus('new value\r\nnew line'),
+  ).not.toThrow();
+});

package/src/CypherEditor.tsx

@@ -190,7 +190,7 @@ const format = (view: EditorView): void => {
       },
       selection: { anchor: newCursorPos },
     });
-  } catch (error) {
+  } catch {
     // Formatting failed, likely because of a syntax error
   }
 };

package/src/e2e_tests/autoCompletion.spec.tsx

@@ -33,7 +33,10 @@ RETURN n;`}
   await textField.press('Control+ ');
 
   await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
-  await page.locator('.cm-tooltip-autocomplete').getByText('WHERE', {exact: true}).click();
+  await page
+    .locator('.cm-tooltip-autocomplete')
+    .getByText('WHERE', { exact: true })
+    .click();
 
   await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
 
@@ -544,13 +547,16 @@ test('completions depend on the Cypher version', async ({ page, mount }) => {
   ).toBeVisible();
 });
 
-test('does not complete properties for non node / relationship variables', async ({ page, mount }) => {
+test('does not complete properties for non node / relationship variables', async ({
+  page,
+  mount,
+}) => {
   await mount(
     <CypherEditor
-    schema={{
-        propertyKeys: ["nodeProperty"]
+      schema={{
+        propertyKeys: ['nodeProperty'],
       }}
-    />
+    />,
   );
 
   const textField = page.getByRole('textbox');
@@ -562,10 +568,10 @@ test('does not complete properties for non node / relationship variables', async
 
   await textField.fill('WITH 1 AS x RETURN x.');
   // This could be flaky if the semantic analysis takes too long
-  await page.waitForTimeout(500)
+  await page.waitForTimeout(500);
   await textField.press('Escape');
   await textField.press('Control+ ');
   await expect(
-    page.locator('.cm-tooltip-autocomplete').getByText('nodeProperty')
+    page.locator('.cm-tooltip-autocomplete').getByText('nodeProperty'),
   ).not.toBeVisible();
 });

package/src/e2e_tests/debounce.spec.tsx

@@ -28,47 +28,43 @@ test.fail(
 );
 
 // TODO Fix this test
-test.fixme(
-  'onExecute updates should override debounce updates',
-  async ({ mount, page }) => {
-    const editorPage = new CypherEditorPage(page);
-    let value = '';
-
-    const onExecute = () => {
-      value = '';
-      void component.update(
-        <CypherEditor
-          value={value}
-          onChange={onChange}
-          onExecute={onExecute}
-        />,
-      );
-    };
-
-    const onChange = (val: string) => {
-      value = val;
-      void component.update(
-        <CypherEditor value={val} onChange={onChange} onExecute={onExecute} />,
-      );
-    };
+test.fixme('onExecute updates should override debounce updates', async ({
+  mount,
+  page,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  let value = '';
 
-    const component = await mount(
+  const onExecute = () => {
+    value = '';
+    void component.update(
       <CypherEditor value={value} onChange={onChange} onExecute={onExecute} />,
     );
+  };
 
-    await editorPage.getEditor().pressSequentially('RETURN 1');
-    await editorPage.getEditor().press('Enter');
-    await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
-    await expect(component).not.toContainText('RETURN 1');
+  const onChange = (val: string) => {
+    value = val;
+    void component.update(
+      <CypherEditor value={val} onChange={onChange} onExecute={onExecute} />,
+    );
+  };
 
-    await editorPage.getEditor().pressSequentially('RETURN 1');
-    await editorPage.getEditor().pressSequentially('');
-    await editorPage.getEditor().pressSequentially('RETURN 1');
-    await editorPage.getEditor().press('Enter');
-    await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
-    await expect(component).not.toContainText('RETURN 1');
-  },
-);
+  const component = await mount(
+    <CypherEditor value={value} onChange={onChange} onExecute={onExecute} />,
+  );
+
+  await editorPage.getEditor().pressSequentially('RETURN 1');
+  await editorPage.getEditor().press('Enter');
+  await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
+  await expect(component).not.toContainText('RETURN 1');
+
+  await editorPage.getEditor().pressSequentially('RETURN 1');
+  await editorPage.getEditor().pressSequentially('');
+  await editorPage.getEditor().pressSequentially('RETURN 1');
+  await editorPage.getEditor().press('Enter');
+  await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
+  await expect(component).not.toContainText('RETURN 1');
+});
 
 test('onExecute should fire after debounced updates', async ({
   mount,

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -263,7 +263,6 @@ test('Signature help only shows the description past the last argument', async (
       autofocus={true}
     />,
   );
-  1;
 
   const tooltip = page.locator('.cm-signature-help-panel');
 

package/src/e2e_tests/snippets.spec.tsx

@@ -1,79 +1,6 @@
 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', { delay: 300 });
-  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
-
-  // tab out of the snippet
-  await textField.press('Tab', { delay: 300 });
-
-  await expect(textField).toHaveText('MATCH ()-[]->()-[ ]->(:City)');
-});
-
 test('does not automatically open completion panel for expressions after snippet trigger char', async ({
   page,
   mount,

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -182,9 +182,9 @@ test('Validation errors are correctly overlapped', async ({ page, mount }) => {
   );
 });
 
-test('Syntax highlighting works as expected with multiple separate linting messages', async ( {
+test('Syntax highlighting works as expected with multiple separate linting messages', async ({
   page,
-  mount
+  mount,
 }) => {
   const editorPage = new CypherEditorPage(page);
   const query = `MATCH (n)--(m) CALL (n) {RETURN id(n) AS b} RETURN apoc.create.uuid(), a`;
@@ -192,12 +192,20 @@ test('Syntax highlighting works as expected with multiple separate linting messa
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
   await expect(
     editorPage.page.locator('.cm-deprecated-element').last(),
-  ).toBeVisible({ timeout: 10000 });
+  ).toBeVisible({
+    timeout: 10000,
+  });
   await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
-  await editorPage.checkWarningMessage('id', `The query used a deprecated function. ('id' has been replaced by 'elementId or consider using an application-generated id')`);
-  await editorPage.checkWarningMessage('apoc.create.uuid', 'Function apoc.create.uuid is deprecated. Alternative: Neo4j randomUUID() function');
+  await editorPage.checkWarningMessage(
+    'id',
+    `The query used a deprecated function. ('id' has been replaced by 'elementId or consider using an application-generated id')`,
+  );
+  await editorPage.checkWarningMessage(
+    'apoc.create.uuid',
+    'Function apoc.create.uuid is deprecated. Alternative: Neo4j randomUUID() function',
+  );
   await editorPage.checkErrorMessage('a', 'Variable `a` not defined');
-})
+});
 
 test('Strikethroughs are shown for deprecated functions', async ({
   page,
@@ -209,7 +217,9 @@ test('Strikethroughs are shown for deprecated functions', async ({
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
   await expect(
     editorPage.page.locator('.cm-deprecated-element').last(),
-  ).toBeVisible({ timeout: 10000 });
+  ).toBeVisible({
+    timeout: 10000,
+  });
   await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
 });
 
@@ -223,7 +233,9 @@ test('Strikethroughs are shown for deprecated procedures', async ({
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
   await expect(
     editorPage.page.locator('.cm-deprecated-element').last(),
-  ).toBeVisible({ timeout: 10000 });
+  ).toBeVisible({
+    timeout: 10000,
+  });
 
   await editorPage.checkWarningMessage(
     'apoc.create.uuids',
@@ -235,11 +247,7 @@ test('Syntax validation depends on the Cypher version', async ({
   page,
   mount,
 }) => {
-  await mount(
-    <CypherEditor
-      schema={testData.mockSchema}
-    />,
-  );
+  await mount(<CypherEditor schema={testData.mockSchema} />);
 
   const editorPage = new CypherEditorPage(page);
   const textField = page.getByRole('textbox');

package/src/lang-cypher/autocomplete.ts

@@ -62,7 +62,7 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
   (config) => (context) => {
     const documentText = context.state.doc.toString();
     const offset = context.pos;
-    const triggerCharacters = ['.', ':', '{', '$', ')'];
+    const triggerCharacters = ['.', ':', '{', '$', ')', ']', '-', '<'];
     const lastCharacter = documentText.at(offset - 1);
     const yieldTriggered = shouldAutoCompleteYield(documentText, offset);
     const lastWord = context.matchBefore(/\w*/);

package/src/lang-cypher/createCypherTheme.ts

@@ -160,24 +160,16 @@ export const createCypherTheme = ({
         border: 'none',
         verticalAlign: 'middle',
         '&[name=next]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            downArrowSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(downArrowSvg)}")`,
         },
         '&[name=prev]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            upArrowSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(upArrowSvg)}")`,
         },
         '&[name=replace]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            replaceSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(replaceSvg)}")`,
         },
         '&[name=replaceAll]::before': {
-          content: `url("data:image/svg+xml;base64,${window.btoa(
-            replaceAllSvg,
-          )}")`,
+          content: `url("data:image/svg+xml;base64,${window.btoa(replaceAllSvg)}")`,
         },
         width: '20px',
         height: '20px',
@@ -209,19 +201,13 @@ export const createCypherTheme = ({
           borderRadius: '4px',
 
           '&[name=case]::before': {
-            content: `url("data:image/svg+xml;base64,${window.btoa(
-              caseSensitiveSvg,
-            )}")`,
+            content: `url("data:image/svg+xml;base64,${window.btoa(caseSensitiveSvg)}")`,
           },
           '&[name=re]::before': {
-            content: `url("data:image/svg+xml;base64,${window.btoa(
-              regexSvg,
-            )}")`,
+            content: `url("data:image/svg+xml;base64,${window.btoa(regexSvg)}")`,
           },
           '&[name=word]::before': {
-            content: `url("data:image/svg+xml;base64,${window.btoa(
-              byWordSvg,
-            )}")`,
+            content: `url("data:image/svg+xml;base64,${window.btoa(byWordSvg)}")`,
           },
           '&:hover': {
             backgroundColor: settings.searchPanel.buttonHoverBackground,