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

package/src/e2e_tests/performanceTest.spec.tsx

@@ -0,0 +1,158 @@
+import { testData } from '@neo4j-cypher/language-support';
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2eUtils';
+
+test.use({ viewport: { width: 1000, height: 500 } });
+declare global {
+  interface Window {
+    longtasks: number[];
+  }
+}
+
+test('benchmarking & performance test session', async ({ mount, page }) => {
+  const client = await page.context().newCDPSession(page);
+  if (process.env.BENCHMARKING === 'true') {
+    test.setTimeout(1000000);
+    await client.send('Performance.enable');
+    await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
+    await client.send('Overlay.setShowFPSCounter', { show: true });
+
+    await page.evaluate(() => {
+      window.longtasks = [];
+      const observer = new PerformanceObserver((list) => {
+        window.longtasks.push(...list.getEntries().map((e) => e.duration));
+      });
+
+      observer.observe({ entryTypes: ['longtask'] });
+    });
+  } else {
+    test.setTimeout(30 * 1000);
+  }
+  const editorPage = new CypherEditorPage(page);
+  const component = await mount(
+    <CypherEditor
+      prompt="neo4j>"
+      theme="dark"
+      lint
+      schema={testData.mockSchema}
+    />,
+  );
+
+  // pressSequentially is less efficient -> we want to test the performance of the editor
+  await editorPage.getEditor().pressSequentially(`
+   MATCH (n:Person) RETURN m;`);
+
+  await editorPage.checkErrorMessage('m', 'Variable `m` not defined');
+
+  // set and unset large query a few times
+  await component.update(
+    <CypherEditor value={testData.largeQuery} schema={testData.mockSchema} />,
+  );
+  await component.update(
+    <CypherEditor value="" schema={testData.mockSchema} />,
+  );
+
+  await component.update(
+    <CypherEditor value={testData.largeQuery} schema={testData.mockSchema} />,
+  );
+  await component.update(<CypherEditor value="" />);
+
+  await component.update(
+    <CypherEditor value={testData.largeQuery} schema={testData.mockSchema} />,
+  );
+  await component.update(
+    <CypherEditor value="" schema={testData.mockSchema} />,
+  );
+
+  await component.update(
+    <CypherEditor value={testData.largeQuery} schema={testData.mockSchema} />,
+  );
+  await component.update(
+    <CypherEditor value="" schema={testData.mockSchema} />,
+  );
+
+  await component.update(
+    <CypherEditor value={testData.largeQuery} schema={testData.mockSchema} />,
+  );
+
+  await editorPage.getEditor().pressSequentially(`
+ MATCH (n:P`);
+
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('Person'),
+  ).toBeVisible();
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('Person').click();
+
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('MATCH (n:Person');
+
+  await editorPage.getEditor().pressSequentially(') RETRN my');
+
+  await expect(component).toContainText('MATCH (n:Person) RETRN m');
+
+  await editorPage.checkErrorMessage(
+    'RETRN',
+    'Unexpected token. Did you mean RETURN?',
+  );
+
+  await editorPage
+    .getEditor()
+    .pressSequentially('veryveryveryverylongvariable');
+
+  if (process.env.BENCHMARKING === 'true') {
+    const longtasks = await page.evaluate(() => window.longtasks);
+    const sortedLongTasks = longtasks.sort((a, b) => a - b);
+    const medianLongTask =
+      sortedLongTasks[Math.floor(sortedLongTasks.length / 2)];
+    const averageLongTask =
+      sortedLongTasks.reduce((a, b) => a + b, 0) / sortedLongTasks.length;
+    const over500 = sortedLongTasks.filter((t) => t > 500).length;
+    const nintyninethPercentile =
+      sortedLongTasks[Math.floor(sortedLongTasks.length * 0.99)];
+    const longTaskCount = longtasks.length;
+    const totalLongTaskTime = longtasks.reduce((a, b) => a + b, 0);
+
+    const USER_ID = 1226722;
+    const API_KEY = process.env.GRAFANA_API_KEY;
+    if (!API_KEY) {
+      throw new Error('Missing grafana api key');
+    }
+
+    const metrics = {
+      medianLongTask,
+      averageLongTask,
+      over500,
+      nintyninethPercentile,
+      longTaskCount,
+      totalLongTaskTime,
+    };
+    const body = Object.entries(metrics)
+      .map(
+        ([key, value]) =>
+          `benchmark,bar_label=${key},source=playwright metric=${value}`,
+      )
+      .join('\n');
+
+    await fetch(
+      'https://influx-prod-39-prod-eu-north-0.grafana.net/api/v1/push/influx/write',
+      {
+        method: 'post',
+        body,
+        headers: {
+          Authorization: `Bearer ${USER_ID}:${API_KEY}`,
+          'Content-Type': 'text/plain',
+        },
+      },
+    ).then((res) => {
+      if (res.ok) {
+        // eslint-disable-next-line no-console
+        console.log('Metrics pushed to grafana successfully');
+      } else {
+        throw new Error(`Failed to push metrics to grafana: ${res.statusText}`);
+      }
+    });
+  }
+});

package/src/e2e_tests/{sanity-checks.spec.tsx → sanityChecks.spec.tsx}

@@ -22,7 +22,7 @@ test('the editors text can be externally controlled ', async ({ mount }) => {
   await expect(component).toContainText(newValue);
 });
 
-test('the editors can report changes to the text ', async ({ mount, page }) => {
+test('the editor can report changes to the text ', async ({ mount, page }) => {
   const intitialValue = 'MATCH (n) ';
 
   let editorValueCopy = intitialValue;
@@ -36,11 +36,16 @@ test('the editors can report changes to the text ', async ({ mount, page }) => {
 
   await textField.fill('RETURN 12');
 
-  expect(editorValueCopy).toBe('RETURN 12');
+  // editor update is debounced, retry wait for debounced
+  await expect(() => {
+    expect(editorValueCopy).toBe('RETURN 12');
+  }).toPass({ intervals: [300, 300, 1000] });
 
   await page.keyboard.type('34');
 
-  expect(editorValueCopy).toBe('RETURN 1234');
+  await expect(() => {
+    expect(editorValueCopy).toBe('RETURN 12');
+  }).toPass({ intervals: [300, 300, 1000] });
 });
 
 test('can complete RETURN', async ({ page, mount }) => {

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -0,0 +1,312 @@
+import { testData } from '@neo4j-cypher/language-support';
+import { expect, test } from '@playwright/experimental-ct-react';
+import { Locator } from 'playwright/test';
+import { CypherEditor } from '../CypherEditor';
+
+test.use({ viewport: { width: 1000, height: 500 } });
+
+type TooltipExpectations = {
+  includes?: string[];
+  excludes?: string[];
+};
+
+function testTooltip(tooltip: Locator, expectations: TooltipExpectations) {
+  const includes = expectations.includes ?? [];
+  const excludes = expectations.excludes ?? [];
+
+  const included = Promise.all(
+    includes.map((text) => {
+      return expect(tooltip).toContainText(text, {
+        timeout: 2000,
+      });
+    }),
+  );
+
+  const excluded = Promise.all(
+    excludes.map((text) => {
+      return expect(tooltip).not.toContainText(text, {
+        timeout: 2000,
+      });
+    }),
+  );
+
+  return Promise.all([included, excluded]);
+}
+
+test('Signature help works for functions', async ({ page, mount }) => {
+  const query = 'RETURN abs(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  await expect(page.locator('.cm-tooltip-signature-help').last()).toBeVisible({
+    timeout: 2000,
+  });
+});
+
+test('Signature help works for procedures', async ({ page, mount }) => {
+  const query = 'CALL apoc.import.csv(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  await expect(page.locator('.cm-tooltip-signature-help').last()).toBeVisible({
+    timeout: 2000,
+  });
+});
+
+test('Signature help shows the description for the first argument', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+
+  await testTooltip(tooltip, {
+    includes: [
+      'nodes :: LIST<MAP>',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help shows the description for the first argument when the cursor is at that position', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv()';
+
+  await mount(
+    <CypherEditor value={query} schema={testData.mockSchema} offset={21} />,
+  );
+
+  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+
+  await testTooltip(tooltip, {
+    includes: [
+      'nodes :: LIST<MAP>',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help shows the description for the second argument', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes,';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+
+  await testTooltip(tooltip, {
+    includes: [
+      'rels :: LIST<MAP>',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help shows the description for the second argument when the cursor is at that position', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes,)';
+
+  await mount(
+    <CypherEditor value={query} schema={testData.mockSchema} offset={27} />,
+  );
+
+  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+
+  await testTooltip(tooltip, {
+    includes: [
+      'rels :: LIST<MAP>',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help shows the description for the second argument when the cursor is at that position, even after whitespaces', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes,  )';
+
+  await mount(
+    <CypherEditor value={query} schema={testData.mockSchema} offset={28} />,
+  );
+
+  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+
+  await testTooltip(tooltip, {
+    includes: [
+      'rels :: LIST<MAP>',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help shows description for arguments with a space following a separator', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes, ';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+
+  await testTooltip(tooltip, {
+    includes: [
+      'rels :: LIST<MAP>',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help shows the description for the third argument', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes, rels,';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+
+  await testTooltip(tooltip, {
+    includes: [
+      'config :: MAP',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help works on multiline queries', async ({ page, mount }) => {
+  const query = `CALL apoc.import.csv(
+    nodes, 
+    rels,  
+    `;
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+
+  await testTooltip(tooltip, {
+    includes: [
+      'config :: MAP',
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+  });
+});
+
+test('Signature help only shows the description past the last argument', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes, rels, config,';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  const tooltip = page.locator('.cm-tooltip-signature-help').last();
+
+  await testTooltip(tooltip, {
+    includes: [
+      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+    ],
+    excludes: ['config :: MAP'],
+  });
+});
+
+test('Signature help does not show any help when method finished', async ({
+  page,
+  mount,
+}) => {
+  const query = 'CALL apoc.import.csv(nodes, rels, config)';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  await expect(
+    page.locator('.cm-tooltip-signature-help').last(),
+  ).not.toBeVisible({
+    timeout: 2000,
+  });
+});
+
+test('Signature help does not blow up on empty query', async ({
+  page,
+  mount,
+}) => {
+  const query = '';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={testData.mockSchema}
+      autofocus={true}
+    />,
+  );
+
+  await expect(
+    page.locator('.cm-tooltip-signature-help').last(),
+  ).not.toBeVisible({
+    timeout: 2000,
+  });
+});

package/src/e2e_tests/{syntax-highlighting.spec.tsx → syntaxHighlighting.spec.tsx}

@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
 import { darkThemeConstants, lightThemeConstants } from '../themes';
-import { CypherEditorPage } from './e2e-utils';
+import { CypherEditorPage } from './e2eUtils';
 
 test.use({ viewport: { width: 500, height: 500 } });
 

package/src/e2e_tests/{syntax-validation.spec.tsx → syntaxValidation.spec.tsx}

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
-import { CypherEditorPage } from './e2e-utils';
+import { CypherEditorPage } from './e2eUtils';
 
 test.use({ viewport: { width: 1000, height: 500 } });
 test('Prop lint set to false disables syntax validation', async ({
@@ -16,7 +16,7 @@ test('Prop lint set to false disables syntax validation', async ({
   });
 });
 
-test.skip('Can turn linting back on', async ({ page, mount }) => {
+test('Can turn linting back on', async ({ page, mount }) => {
   const editorPage = new CypherEditorPage(page);
   const query = 'METCH (n) RETURN n';
 
@@ -26,7 +26,7 @@ test.skip('Can turn linting back on', async ({ page, mount }) => {
     timeout: 2000,
   });
 
-  await component.update(<CypherEditor value={query} lint />);
+  await component.update(<CypherEditor value={query} lint={true} />);
 
   await editorPage.getEditor().fill('METCH (n) RETURN n');
 

package/src/icons.ts

@@ -23,6 +23,7 @@ export type CompletionItemIcons =
   | 'Struct'
   | 'Event'
   | 'Operator'
+  | 'Console'
   | 'TypeParameter';
 
 export function getIconForType(iconTypeString = 'Text', isDarkTheme = false) {
@@ -51,6 +52,7 @@ export function getIconForType(iconTypeString = 'Text', isDarkTheme = false) {
     Struct: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.00024 2L1.00024 3V6L2.00024 7H14.0002L15.0002 6V3L14.0002 2H2.00024ZM2.00024 3H3.00024H13.0002H14.0002V4V5V6H13.0002H3.00024H2.00024V5V4V3ZM1.00024 10L2.00024 9H5.00024L6.00024 10V13L5.00024 14H2.00024L1.00024 13V10ZM3.00024 10H2.00024V11V12V13H3.00024H4.00024H5.00024V12V11V10H4.00024H3.00024ZM10.0002 10L11.0002 9H14.0002L15.0002 10V13L14.0002 14H11.0002L10.0002 13V10ZM12.0002 10H11.0002V11V12V13H12.0002H13.0002H14.0002V12V11V10H13.0002H12.0002Z" fill="#424242"/> </svg>`,
     Event: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.41379 1.55996L8.31177 1H11.6059L12.4243 2.57465L10.2358 6H12.0176L12.7365 7.69512L5.61967 15L4.01699 13.837L6.11967 10H4.89822L4.00024 8.55996L7.41379 1.55996ZM7.78058 9L4.90078 14.3049L12.0176 7H8.31177L11.6059 2H8.31177L4.89822 9H7.78058Z" fill="#D67E00"/> </svg>`,
     Operator: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.87313 1.10023C3.20793 1.23579 3.4757 1.498 3.61826 1.82988C3.69056 1.99959 3.72699 2.18242 3.72526 2.36688C3.72642 2.54999 3.69 2.7314 3.61826 2.89988C3.51324 3.14567 3.33807 3.35503 3.11466 3.50177C2.89126 3.64851 2.62955 3.72612 2.36226 3.72488C2.17948 3.72592 1.99842 3.68951 1.83026 3.61788C1.58322 3.51406 1.37252 3.33932 1.22478 3.11575C1.07704 2.89219 0.99891 2.62984 1.00026 2.36188C0.999374 2.17921 1.03543 1.99825 1.10626 1.82988C1.24362 1.50314 1.50353 1.24323 1.83026 1.10588C2.16357 0.966692 2.53834 0.964661 2.87313 1.10023ZM2.57526 2.86488C2.70564 2.80913 2.80951 2.70526 2.86526 2.57488C2.89314 2.50838 2.90742 2.43698 2.90726 2.36488C2.90838 2.2654 2.88239 2.1675 2.8321 2.08167C2.7818 1.99584 2.70909 1.92531 2.62176 1.87767C2.53443 1.83002 2.43577 1.80705 2.33638 1.81121C2.23698 1.81537 2.1406 1.8465 2.05755 1.90128C1.97451 1.95606 1.90794 2.03241 1.865 2.12215C1.82205 2.21188 1.80434 2.31161 1.81376 2.41065C1.82319 2.50968 1.85939 2.60428 1.9185 2.6843C1.9776 2.76433 2.05738 2.82675 2.14926 2.86488C2.28574 2.92089 2.43878 2.92089 2.57526 2.86488ZM6.43019 1.1095L1.10992 6.42977L1.79581 7.11567L7.11608 1.7954L6.43019 1.1095ZM11.5002 8.99999H12.5002V11.5H15.0002V12.5H12.5002V15H11.5002V12.5H9.00024V11.5H11.5002V8.99999ZM5.76801 9.52509L6.47512 10.2322L4.70735 12L6.47512 13.7677L5.76801 14.4748L4.00024 12.7071L2.23248 14.4748L1.52537 13.7677L3.29314 12L1.52537 10.2322L2.23248 9.52509L4.00024 11.2929L5.76801 9.52509ZM7.11826 5.32988C7.01466 5.08268 6.83997 4.87183 6.61636 4.72406C6.39275 4.57629 6.13028 4.49826 5.86226 4.49988C5.6796 4.49899 5.49864 4.53505 5.33026 4.60588C5.00353 4.74323 4.74362 5.00314 4.60626 5.32988C4.53612 5.49478 4.49922 5.67191 4.49766 5.8511C4.4961 6.0303 4.52992 6.20804 4.59718 6.37414C4.66443 6.54024 4.76381 6.69143 4.88961 6.81906C5.0154 6.94669 5.16515 7.04823 5.33026 7.11788C5.49892 7.18848 5.67993 7.22484 5.86276 7.22484C6.0456 7.22484 6.22661 7.18848 6.39526 7.11788C6.64225 7.01388 6.85295 6.83913 7.00082 6.61563C7.1487 6.39213 7.22713 6.12987 7.22626 5.86188C7.22679 5.67905 7.19005 5.49803 7.11826 5.32988ZM6.36526 6.07488C6.3379 6.13937 6.29854 6.19808 6.24926 6.24788C6.19932 6.29724 6.14066 6.33691 6.07626 6.36488C6.00878 6.39297 5.93635 6.40725 5.86326 6.40688C5.79015 6.40744 5.71769 6.39315 5.65026 6.36488C5.58565 6.33729 5.52693 6.29757 5.47726 6.24788C5.42715 6.19856 5.38738 6.13975 5.36026 6.07488C5.30425 5.9384 5.30425 5.78536 5.36026 5.64888C5.41561 5.51846 5.51965 5.41477 5.65026 5.35988C5.71761 5.33126 5.79008 5.31663 5.86326 5.31688C5.93642 5.31685 6.00884 5.33147 6.07626 5.35988C6.14062 5.38749 6.19928 5.42682 6.24926 5.47588C6.2981 5.52603 6.33741 5.58465 6.36526 5.64888C6.39364 5.7163 6.40827 5.78872 6.40827 5.86188C6.40827 5.93503 6.39364 6.00745 6.36526 6.07488ZM14.0002 3H10.0002V4H14.0002V3Z" fill="#424242"/> </svg>`,
+    Console: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.00024 1H15.0002V15H1.00024V1ZM2.00024 14H14.0002V2H2.00024V14ZM4.00032 5.70709L4.70743 4.99999L8.24296 8.53552L7.53585 9.24263L7.53583 9.2426L4.70735 12.0711L4.00024 11.364L6.82872 8.53549L4.00032 5.70709Z" fill="#424242"/> </svg>`,
     TypeParameter: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0003 6H10.0003V5.5C10.0003 5.22386 9.7764 5 9.50026 5H8.47926V10.5C8.47926 10.7761 8.70312 11 8.97926 11H9.47926V12H6.47926V11H6.97926C7.2554 11 7.47926 10.7761 7.47926 10.5V5H6.50026C6.22412 5 6.00026 5.22386 6.00026 5.5V6H5.00026V4H11.0003V6ZM13.9145 8.0481L12.4522 6.58581L13.1593 5.87871L14.9751 7.69454V8.40165L13.2074 10.1694L12.5003 9.46231L13.9145 8.0481ZM3.54835 9.4623L2.08605 8.00002L3.50026 6.58581L2.79316 5.8787L1.02539 7.64647V8.35357L2.84124 10.1694L3.54835 9.4623Z" fill="#424242"/> </svg>`,
   };
 
@@ -79,6 +81,7 @@ export function getIconForType(iconTypeString = 'Text', isDarkTheme = false) {
     Struct: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2 2L1 3V6L2 7H14L15 6V3L14 2H2ZM2 3H3H13H14V4V5V6H13H3H2V5V4V3ZM1 10L2 9H5L6 10V13L5 14H2L1 13V10ZM3 10H2V11V12V13H3H4H5V12V11V10H4H3ZM10 10L11 9H14L15 10V13L14 14H11L10 13V10ZM12 10H11V11V12V13H12H13H14V12V11V10H13H12Z" fill="#C5C5C5"/> </svg>`,
     Event: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.41354 1.55996L8.31152 1H11.6056L12.424 2.57465L10.2356 6H12.0174L12.7363 7.69512L5.61943 15L4.01675 13.837L6.11943 10H4.89798L4 8.55996L7.41354 1.55996ZM7.78033 9L4.90054 14.3049L12.0174 7H8.31152L11.6056 2H8.31152L4.89798 9H7.78033Z" fill="#EE9D28"/> </svg>`,
     Operator: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.87289 1.10023C3.20768 1.23579 3.47545 1.498 3.61802 1.82988C3.69032 1.99959 3.72675 2.18242 3.72502 2.36688C3.72617 2.54999 3.68975 2.7314 3.61802 2.89988C3.51299 3.14567 3.33782 3.35503 3.11442 3.50177C2.89102 3.64851 2.6293 3.72612 2.36202 3.72488C2.17924 3.72592 1.99818 3.68951 1.83002 3.61788C1.58298 3.51406 1.37227 3.33932 1.22453 3.11575C1.0768 2.89219 0.998666 2.62984 1.00002 2.36188C0.99913 2.17921 1.03519 1.99825 1.10602 1.82988C1.24337 1.50314 1.50328 1.24323 1.83002 1.10588C2.16332 0.966692 2.53809 0.964661 2.87289 1.10023ZM2.57502 2.86488C2.7054 2.80913 2.80927 2.70526 2.86502 2.57488C2.8929 2.50838 2.90718 2.43698 2.90702 2.36488C2.90813 2.2654 2.88215 2.1675 2.83185 2.08167C2.78156 1.99584 2.70884 1.92531 2.62151 1.87767C2.53418 1.83002 2.43553 1.80705 2.33614 1.81121C2.23674 1.81537 2.14035 1.8465 2.05731 1.90128C1.97426 1.95606 1.9077 2.03241 1.86475 2.12215C1.8218 2.21188 1.80409 2.31161 1.81352 2.41065C1.82294 2.50968 1.85915 2.60428 1.91825 2.6843C1.97736 2.76433 2.05713 2.82675 2.14902 2.86488C2.28549 2.92089 2.43854 2.92089 2.57502 2.86488ZM6.42995 1.1095L1.10967 6.42977L1.79557 7.11567L7.11584 1.7954L6.42995 1.1095ZM11.5 8.99999H12.5V11.5H15V12.5H12.5V15H11.5V12.5H9V11.5H11.5V8.99999ZM5.76777 9.52509L6.47487 10.2322L4.70711 12L6.47487 13.7677L5.76777 14.4748L4 12.7071L2.23223 14.4748L1.52513 13.7677L3.29289 12L1.52513 10.2322L2.23223 9.52509L4 11.2929L5.76777 9.52509ZM7.11802 5.32988C7.01442 5.08268 6.83973 4.87183 6.61612 4.72406C6.3925 4.57629 6.13004 4.49826 5.86202 4.49988C5.67935 4.49899 5.49839 4.53505 5.33002 4.60588C5.00328 4.74323 4.74337 5.00314 4.60602 5.32988C4.53588 5.49478 4.49897 5.67191 4.49741 5.8511C4.49586 6.0303 4.52967 6.20804 4.59693 6.37414C4.66419 6.54024 4.76356 6.69143 4.88936 6.81906C5.01516 6.94669 5.1649 7.04823 5.33002 7.11788C5.49867 7.18848 5.67968 7.22484 5.86252 7.22484C6.04535 7.22484 6.22636 7.18848 6.39502 7.11788C6.64201 7.01388 6.8527 6.83913 7.00058 6.61563C7.14845 6.39213 7.22689 6.12987 7.22602 5.86188C7.22655 5.67905 7.1898 5.49803 7.11802 5.32988ZM6.36502 6.07488C6.33766 6.13937 6.29829 6.19808 6.24902 6.24788C6.19908 6.29724 6.14042 6.33691 6.07602 6.36488C6.00854 6.39297 5.93611 6.40725 5.86302 6.40688C5.78991 6.40744 5.71744 6.39315 5.65002 6.36488C5.58541 6.33729 5.52668 6.29757 5.47702 6.24788C5.42691 6.19856 5.38713 6.13975 5.36002 6.07488C5.30401 5.9384 5.30401 5.78536 5.36002 5.64888C5.41536 5.51846 5.51941 5.41477 5.65002 5.35988C5.71737 5.33126 5.78984 5.31663 5.86302 5.31688C5.93618 5.31685 6.0086 5.33147 6.07602 5.35988C6.14037 5.38749 6.19904 5.42682 6.24902 5.47588C6.29786 5.52603 6.33717 5.58465 6.36502 5.64888C6.3934 5.7163 6.40802 5.78872 6.40802 5.86188C6.40802 5.93503 6.3934 6.00745 6.36502 6.07488ZM14 3H10V4H14V3Z" fill="#C5C5C5"/> </svg>`,
+    Console: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M1 1H15V15H1V1ZM2 14H14V2H2V14ZM4.00008 5.70709L4.70718 4.99999L8.24272 8.53552L7.53561 9.24263L7.53558 9.2426L4.70711 12.0711L4 11.364L6.82848 8.53549L4.00008 5.70709Z" fill="#C5C5C5"/> </svg>`,
     TypeParameter: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 6H10V5.5C10 5.22386 9.77616 5 9.50001 5H8.47902V10.5C8.47902 10.7761 8.70288 11 8.97902 11H9.47902V12H6.47902V11H6.97902C7.25516 11 7.47902 10.7761 7.47902 10.5V5H6.50001C6.22387 5 6.00001 5.22386 6.00001 5.5V6H5.00001V4H11V6ZM13.9142 8.0481L12.4519 6.58581L13.159 5.87871L14.9749 7.69454V8.40165L13.2071 10.1694L12.5 9.46231L13.9142 8.0481ZM3.5481 9.4623L2.08581 8.00002L3.50002 6.58581L2.79291 5.8787L1.02515 7.64647V8.35357L2.841 10.1694L3.5481 9.4623Z" fill="#C5C5C5"/> </svg>`,
   };
   const iconType = iconTypeString as CompletionItemIcons;

package/src/index.ts

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

package/src/lang-cypher/autocomplete.ts

@@ -2,7 +2,7 @@ import { CompletionSource } from '@codemirror/autocomplete';
 import { autocomplete } from '@neo4j-cypher/language-support';
 import { CompletionItemKind } from 'vscode-languageserver-types';
 import { CompletionItemIcons } from '../icons';
-import type { CypherConfig } from './lang-cypher';
+import type { CypherConfig } from './langCypher';
 
 const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
   const map: Record<CompletionItemKind, CompletionItemIcons> = {
@@ -28,7 +28,8 @@ const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
     [CompletionItemKind.EnumMember]: 'EnumMember',
     [CompletionItemKind.Constant]: 'Constant',
     [CompletionItemKind.Struct]: 'Struct',
-    [CompletionItemKind.Event]: 'Event',
+    // we're missuing the enum here as there is no `Console` kind in the predefined list
+    [CompletionItemKind.Event]: 'Console',
     [CompletionItemKind.Operator]: 'Operator',
     [CompletionItemKind.TypeParameter]: 'TypeParameter',
   };
@@ -49,6 +50,10 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
     const shouldTriggerCompletion =
       inWord || context.explicit || triggerCharacters.includes(lastCharacter);
 
+    if (config.useLightVersion && !context.explicit) {
+      return null;
+    }
+
     if (!shouldTriggerCompletion) {
       return null;
     }

package/src/lang-cypher/constants.ts

@@ -31,8 +31,30 @@ export const cypherTokenTypeToNode = (facet: Facet<unknown>) => ({
   none: NodeType.define({ id: 19, name: 'none' }),
   separator: NodeType.define({ id: 20, name: 'separator' }),
   punctuation: NodeType.define({ id: 21, name: 'punctuation' }),
+  consoleCommand: NodeType.define({ id: 22, name: 'consoleCommand' }),
+  // also include prism token types
+  'class-name': NodeType.define({ id: 23, name: 'label' }),
+  // this is escaped variables
+  identifier: NodeType.define({ id: 24, name: 'variable' }),
+  string: NodeType.define({ id: 25, name: 'stringLiteral' }),
+  relationship: NodeType.define({ id: 26, name: 'label' }),
+  boolean: NodeType.define({ id: 27, name: 'booleanLiteral' }),
+  number: NodeType.define({ id: 28, name: 'numberLiteral' }),
 });
 
+export type PrismSpecificTokenType =
+  | 'class-name'
+  | 'identifier'
+  | 'string'
+  | 'relationship'
+  | 'boolean'
+  | 'number';
+
+export type CodemirrorParseTokenType =
+  | CypherTokenType
+  | PrismSpecificTokenType
+  | 'topNode';
+
 export type HighlightedCypherTokenTypes = Exclude<CypherTokenType, 'none'>;
 export const tokenTypeToStyleTag: Record<HighlightedCypherTokenTypes, Tag> = {
   comment: tags.comment,
@@ -55,6 +77,7 @@ export const tokenTypeToStyleTag: Record<HighlightedCypherTokenTypes, Tag> = {
   bracket: tags.bracket,
   punctuation: tags.punctuation,
   separator: tags.separator,
+  consoleCommand: tags.macroName,
 };
 
 export const parserAdapterNodeSet = (nodes: Record<string, NodeType>) =>

package/src/lang-cypher/{create-cypher-theme.ts → createCypherTheme.ts}

@@ -15,7 +15,7 @@ import {
   replaceAllSvg,
   replaceSvg,
   upArrowSvg,
-} from './theme-icons';
+} from './themeIcons';
 
 export interface ThemeOptions {
   dark: boolean;
@@ -80,6 +80,9 @@ export const createCypherTheme = ({
     '& .cm-selectionMatch': {
       backgroundColor: settings.textMatchingSelection,
     },
+    '& .cm-bold': {
+      fontWeight: 'bold',
+    },
     '& .cm-panels': {
       backgroundColor: settings.searchPanel.background,
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
@@ -198,6 +201,7 @@ export const createCypherTheme = ({
     ([token, color]: [HighlightedCypherTokenTypes, string]): TagStyle => ({
       tag: tokenTypeToStyleTag[token],
       color,
+      class: token === 'consoleCommand' ? 'cm-bold' : undefined,
     }),
   );
   const highlightStyle = HighlightStyle.define(styles);