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

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -0,0 +1,259 @@
+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 } });
+test('Prop lint set to false disables syntax validation', async ({
+  page,
+  mount,
+}) => {
+  const query = 'METCH (n) RETURN n';
+
+  await mount(<CypherEditor value={query} lint={false} />);
+
+  await expect(page.locator('.cm-lintRange-error').last()).not.toBeVisible({
+    timeout: 10000,
+  });
+});
+
+test('Can turn linting back on', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'METCH (n) RETURN n';
+
+  const component = await mount(<CypherEditor value={query} lint={false} />);
+
+  await expect(page.locator('.cm-lintRange-error').last()).not.toBeVisible({
+    timeout: 10000,
+  });
+
+  await component.update(<CypherEditor value={query} lint={true} />);
+
+  await editorPage.getEditor().fill('METCH (n) RETURN n');
+
+  await editorPage.checkErrorMessage(
+    'METCH',
+    `Invalid input 'METCH': expected 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'FOREACH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
+  );
+});
+
+test('Syntactic errors are surfaced', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'METCH (n) RETURN n';
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    'METCH',
+    `Invalid input 'METCH': expected 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'FOREACH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
+  );
+});
+
+test('Does not trigger syntax errors for backticked parameters in parameter creation', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const query = ':param x => "abc"';
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkNoNotificationMessage('error');
+});
+
+test('Errors for undefined labels are surfaced', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'MATCH (n: Person) RETURN n';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={{ labels: ['Movie'], relationshipTypes: [] }}
+    />,
+  );
+
+  await editorPage.checkWarningMessage(
+    'Person',
+    "Label Person is not present in the database. Make sure you didn't misspell it or that it is available when you run this statement in your application",
+  );
+});
+
+test('Errors for multiline undefined labels are highlighted correctly', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `MATCH (n:\`Foo
+    Bar\`) RETURN n`;
+  const expectedMsg = `Label \`Foo
+    Bar\` is not present in the database. Make sure you didn't misspell it or that it is available when you run this statement in your application`;
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={{ labels: ['Movie'], relationshipTypes: [] }}
+    />,
+  );
+
+  await editorPage.checkWarningMessage('`Foo', expectedMsg);
+  await editorPage.checkWarningMessage('Bar`', expectedMsg);
+});
+
+test('Semantic errors work in firefox', async ({
+  browserName,
+  page,
+  mount,
+}) => {
+  test.skip(browserName !== 'firefox');
+  const editorPage = new CypherEditorPage(page);
+  const query = 'MATCH (n:OperationalPoint)--(m:OperationalPoint) RETURN s,m,n';
+
+  await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
+
+  await editorPage.checkErrorMessage('s,m,n', 'Variable `s` not defined');
+});
+
+test('Semantic errors are surfaced when there are no syntactic errors', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'MATCH (n) RETURN m';
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage('m', 'Variable `m` not defined');
+});
+
+test('Semantic errors are correctly accumulated', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'CALL { MATCH (n) } IN TRANSACTIONS OF -1 ROWS';
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    'MATCH (n)',
+    '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(
+    '-1',
+    "Invalid input. '-1' is not a valid value. Must be a positive integer.",
+  );
+});
+
+test('Multiline errors are correctly placed', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `CALL { 
+    MATCH (n) 
+  } IN TRANSACTIONS 
+  OF -1 ROWS`;
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    'MATCH (n)',
+    '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(
+    '-1',
+    "Invalid input. '-1' is not a valid value. Must be a positive integer.",
+  );
+});
+
+test('Validation errors are correctly overlapped', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `CALL { MATCH (n)
+    RETURN n
+  } IN TRANSACTIONS 
+  OF -1 ROWS`;
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    '-1',
+    '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(
+    '-1',
+    "Invalid input. '-1' is not a valid value. Must be a positive integer.",
+  );
+});
+
+test('Syntax highlighting works as expected with multiple separate linting messages', async ( {
+  page,
+  mount
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `MATCH (n)--(m) CALL (n) {RETURN id(n) AS b} RETURN apoc.create.uuid(), a`;
+
+  await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
+  await expect(
+    editorPage.page.locator('.cm-deprecated-element').last(),
+  ).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.checkErrorMessage('a', 'Variable `a` not defined');
+})
+
+test('Strikethroughs are shown for deprecated functions', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `RETURN id(1)`;
+
+  await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
+  await expect(
+    editorPage.page.locator('.cm-deprecated-element').last(),
+  ).toBeVisible({ timeout: 10000 });
+  await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
+});
+
+test('Strikethroughs are shown for deprecated procedures', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `CALL apoc.create.uuids(5)`;
+
+  await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
+  await expect(
+    editorPage.page.locator('.cm-deprecated-element').last(),
+  ).toBeVisible({ timeout: 10000 });
+
+  await editorPage.checkWarningMessage(
+    'apoc.create.uuids',
+    "Procedure apoc.create.uuids is deprecated. Alternative: Neo4j's randomUUID() function can be used as a replacement, for example: `UNWIND range(0,$count) AS row RETURN row, randomUUID() AS uuid`",
+  );
+});
+
+test('Syntax validation depends on the Cypher version', async ({
+  page,
+  mount,
+}) => {
+  await mount(
+    <CypherEditor
+      schema={testData.mockSchema}
+    />,
+  );
+
+  const editorPage = new CypherEditorPage(page);
+  const textField = page.getByRole('textbox');
+  await textField.fill('CYPHER 5 CALL apoc.create.uuids(5)');
+
+  await editorPage.checkWarningMessage(
+    'apoc.create.uuids',
+    "Procedure apoc.create.uuids is deprecated. Alternative: Neo4j's randomUUID() function can be used as a replacement, for example: `UNWIND range(0,$count) AS row RETURN row, randomUUID() AS uuid`",
+  );
+
+  await textField.fill('CYPHER 25 CALL apoc.create.uuids(5)');
+
+  await editorPage.checkErrorMessage(
+    'apoc.create.uuids',
+    `Procedure apoc.create.uuids is not present in the database. Make sure you didn't misspell it or that it is available when you run this statement in your application`,
+  );
+});

package/src/{history-navigation.ts → 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/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 * as LanguageSupport 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

@@ -1,8 +1,19 @@
-import { CompletionSource } from '@codemirror/autocomplete';
-import { autocomplete } from '@neo4j-cypher/language-support';
-import { CompletionItemKind } from 'vscode-languageserver-types';
+import {
+  Completion,
+  CompletionSource,
+  snippet,
+} from '@codemirror/autocomplete';
+import {
+  autocomplete,
+  shouldAutoCompleteYield,
+} from '@neo4j-cypher/language-support';
+import {
+  CompletionItemKind,
+  CompletionItemTag,
+} from 'vscode-languageserver-types';
 import { CompletionItemIcons } from '../icons';
-import type { CypherConfig } from './lang-cypher';
+import type { CypherConfig } from './langCypher';
+import { getDocString } from './utils';
 
 const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
   const map: Record<CompletionItemKind, CompletionItemIcons> = {
@@ -28,7 +39,8 @@ const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
     [CompletionItemKind.EnumMember]: 'EnumMember',
     [CompletionItemKind.Constant]: 'Constant',
     [CompletionItemKind.Struct]: 'Struct',
-    [CompletionItemKind.Event]: 'Event',
+    // 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',
   };
@@ -36,30 +48,99 @@ const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
   return map[c];
 };
 
+export const completionStyles: (
+  completion: Completion & { deprecated?: boolean },
+) => string = (completion) => {
+  if (completion.deprecated) {
+    return 'cm-deprecated-element';
+  } else {
+    return null;
+  }
+};
+
 export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
   (config) => (context) => {
-    const textUntilCursor = context.state.doc.toString().slice(0, context.pos);
-
-    const triggerCharacters = ['.', ':', '{', '$'];
-    const lastCharacter = textUntilCursor.slice(-1);
-
+    const documentText = context.state.doc.toString();
+    const offset = context.pos;
+    const triggerCharacters = ['.', ':', '{', '$', ')'];
+    const lastCharacter = documentText.at(offset - 1);
+    const yieldTriggered = shouldAutoCompleteYield(documentText, offset);
     const lastWord = context.matchBefore(/\w*/);
     const inWord = lastWord.from !== lastWord.to;
-
     const shouldTriggerCompletion =
-      inWord || context.explicit || triggerCharacters.includes(lastCharacter);
+      inWord ||
+      context.explicit ||
+      triggerCharacters.includes(lastCharacter) ||
+      yieldTriggered;
+
+    if (config.useLightVersion && !context.explicit) {
+      return null;
+    }
 
     if (!shouldTriggerCompletion) {
       return null;
     }
 
-    const options = autocomplete(textUntilCursor, config.schema ?? {});
+    const options = autocomplete(
+      documentText,
+      config.schema ?? {},
+      offset,
+      context.explicit,
+    );
 
     return {
-      from: context.matchBefore(/(\w|\$)*$/).from,
-      options: options.map((o) => ({
-        label: o.label,
-        type: completionKindToCodemirrorIcon(o.kind),
-      })),
+      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.insertText ? o.insertText : o.label,
+          displayLabel: 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,
+        };
+      }),
     };
   };

package/src/lang-cypher/constants.ts

@@ -31,8 +31,32 @@ 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' }),
+  setting: NodeType.define({ id: 29, name: 'setting' }),
+  settingValue: NodeType.define({ id: 30, name: 'settingValue' }),
 });
 
+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 +79,9 @@ export const tokenTypeToStyleTag: Record<HighlightedCypherTokenTypes, Tag> = {
   bracket: tags.bracket,
   punctuation: tags.punctuation,
   separator: tags.separator,
+  consoleCommand: tags.macroName,
+  setting: tags.attributeName,
+  settingValue: tags.attributeValue,
 };
 
 export const parserAdapterNodeSet = (nodes: Record<string, NodeType>) =>

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

@@ -1,5 +1,9 @@
 import { tags } from '@lezer/highlight';
-import { applySyntaxColouring } from '@neo4j-cypher/language-support';
+import {
+  applySyntaxColouring,
+  CypherTokenType,
+} from '@neo4j-cypher/language-support';
+import { expect, test } from 'vitest';
 import { tokenTypeToStyleTag } from './constants';
 
 const cypherQueryWithAllTokenTypes = `MATCH (variable :Label)-[:REL_TYPE]->() 
@@ -54,7 +58,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/{create-cypher-theme.ts → 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 {
@@ -15,7 +16,7 @@ import {
   replaceAllSvg,
   replaceSvg,
   upArrowSvg,
-} from './theme-icons';
+} from './themeIcons';
 
 export interface ThemeOptions {
   dark: boolean;
@@ -53,6 +54,9 @@ export const createCypherTheme = ({
       color: settings.foreground,
       fontVariantLigatures: 'none',
     },
+    '& .cm-snippetField': {
+      backgroundColor: settings.autoCompletionPanel.selectedColor,
+    },
     '&.cm-focused': {
       outline: 'none',
     },
@@ -61,8 +65,9 @@ export const createCypherTheme = ({
       color: settings.gutterForeground,
       border: 'none',
     },
-    '&.cm-editor .cm-scroller': {
+    '&.cm-editor': {
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+      height: '100%',
     },
     '.cm-content': {
       caretColor: settings.cursor,
@@ -80,9 +85,13 @@ 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',
+      zIndex: 0,
     },
     '& .cm-completionLabel': {
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
@@ -93,7 +102,40 @@ export const createCypherTheme = ({
       color: settings.autoCompletionPanel.matchingTextColor,
       textDecoration: 'none',
     },
+    '& .cm-signature-help-panel': {
+      backgroundColor: settings.autoCompletionPanel.backgroundColor,
+      maxWidth: '700px',
+      maxHeight: '250px',
+      fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+    },
+    '& .cm-signature-help-panel-contents': {
+      overflow: 'auto',
+      maxHeight: '250px',
+    },
+    '& .cm-signature-help-panel-current-argument': {
+      color: settings.autoCompletionPanel.matchingTextColor,
+      fontWeight: 'bold',
+    },
+    '& .cm-signature-help-panel-separator': {
+      borderBottom: '1px solid #ccc',
+    },
+    '& .cm-signature-help-panel-name': {
+      padding: '5px',
+    },
+    '& .cm-signature-help-panel-arg-description': {
+      padding: '5px',
+    },
+    '& .cm-signature-help-panel-description': {
+      padding: '5px',
+    },
+    '.cm-completionInfo-signature': {
+      color: 'darkgrey',
+    },
+    '.cm-deprecated-element': {
+      'text-decoration': 'line-through',
+    },
     '.cm-tooltip-autocomplete': {
+      maxWidth: '430px',
       '& > ul > li[aria-selected]': {
         backgroundColor: settings.autoCompletionPanel.selectedColor,
         color: settings.foreground,
@@ -198,6 +240,7 @@ export const createCypherTheme = ({
     ([token, color]: [HighlightedCypherTokenTypes, string]): TagStyle => ({
       tag: tokenTypeToStyleTag[token],
       color,
+      class: token === CypherTokenType.consoleCommand ? 'cm-bold' : undefined,
     }),
   );
   const highlightStyle = HighlightStyle.define(styles);

package/src/lang-cypher/langCypher.ts

@@ -0,0 +1,42 @@
+import { autocompletion } from '@codemirror/autocomplete';
+import {
+  defineLanguageFacet,
+  Language,
+  LanguageSupport,
+} from '@codemirror/language';
+import { type DbSchema } from '@neo4j-cypher/language-support';
+import { completionStyles, cypherAutocomplete } from './autocomplete';
+import { ParserAdapter } from './parser-adapter';
+import { signatureHelpTooltip } from './signatureHelp';
+import { cypherLinter } from './syntaxValidation';
+
+const facet = defineLanguageFacet({
+  commentTokens: { block: { open: '/*', close: '*/' }, line: '//' },
+  closeBrackets: { brackets: ['(', '[', '{', "'", '"', '`'] },
+});
+
+export type CypherConfig = {
+  lint?: boolean;
+  showSignatureTooltipBelow?: boolean;
+  featureFlags?: {
+    consoleCommands?: boolean;
+  };
+  schema?: DbSchema;
+  useLightVersion: boolean;
+  setUseLightVersion?: (useLightVersion: boolean) => void;
+};
+
+export function cypher(config: CypherConfig) {
+  const parserAdapter = new ParserAdapter(facet, config);
+
+  const cypherLanguage = new Language(facet, parserAdapter, [], 'cypher');
+
+  return new LanguageSupport(cypherLanguage, [
+    autocompletion({
+      override: [cypherAutocomplete(config)],
+      optionClass: completionStyles,
+    }),
+    cypherLinter(config),
+    signatureHelpTooltip(config),
+  ]);
+}