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

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -0,0 +1,252 @@
+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(
+    '-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(
+    '-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',
+    "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/editorActions.ts

@@ -0,0 +1,253 @@
+import { StateEffect, StateField, type Extension } from '@codemirror/state';
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+} from '@codemirror/view';
+import type { HostPortalCallbacks } from './hostCallbacks';
+
+/** Lifecycle callbacks for the editor action buttons. See {@link HostPortalCallbacks}. */
+export type EditorActionsCallbacks = HostPortalCallbacks;
+
+export type EditorActionsController = {
+  /** CodeMirror extension to register on the editor. */
+  extension: Extension;
+  /**
+   * Drive the action buttons from the host's state: pass callbacks to mount
+   * them, or `null` to unmount. Returns the effect for the host to dispatch.
+   *
+   * Visibility is purely a function of whether callbacks exist — there's no
+   * separate show/hide toggle.
+   */
+  set: (callbacks: EditorActionsCallbacks | null) => StateEffect<boolean>;
+};
+
+/**
+ * Renders a host-provided cluster of action buttons at the top-right corner
+ * of the editor.
+ *
+ * The cluster is split into two cooperating pieces so it can both reserve
+ * space *and* stay pinned — which a single element can't do (reserving needs
+ * to be in flow, pinning needs to be out of it):
+ *
+ *  - A **spacer**: an empty, floated inline widget at the very start of the
+ *    document. Being in flow, it makes the first line's text wrap around it —
+ *    and because it's a float, the browser handles arbitrary cluster heights.
+ *    It carries no content; it only reserves the footprint.
+ *  - An **overlay**: the real, host-rendered buttons in a container pinned
+ *    `absolute` on the editor element (which does not scroll). It never moves
+ *    when the document grows, when an inline panel opens above the first line,
+ *    or when the content scrolls — content simply scrolls behind it.
+ */
+
+const SPACER_BOTTOM_GAP = 2;
+const SPACER_LEFT_GAP = 4;
+
+export function createEditorActionsController(): EditorActionsController {
+  const setActiveEffect = StateEffect.define<boolean>();
+
+  let callbacksRef: EditorActionsCallbacks | null = null;
+
+  const activeField = StateField.define<boolean>({
+    create: () => false,
+    update(active, transaction) {
+      for (const effect of transaction.effects) {
+        if (effect.is(setActiveEffect)) {
+          active = effect.value;
+        }
+      }
+      return active;
+    },
+  });
+
+  class SpacerWidget extends WidgetType {
+    toDOM(): HTMLElement {
+      const spacer = document.createElement('div');
+      spacer.className = 'cm-editor-actions-spacer';
+      spacer.setAttribute('aria-hidden', 'true');
+      return spacer;
+    }
+
+    eq(): boolean {
+      return true;
+    }
+
+    ignoreEvent(): boolean {
+      return true;
+    }
+  }
+
+  const spacer = EditorView.decorations.compute(
+    ['doc', activeField],
+    (state) => {
+      if (!state.field(activeField)) {
+        return Decoration.none;
+      }
+      return Decoration.set([
+        Decoration.widget({
+          widget: new SpacerWidget(),
+          side: -1,
+        }).range(0),
+      ]);
+    },
+  );
+
+  const overlay = ViewPlugin.fromClass(
+    class {
+      private dom: HTMLElement | null = null;
+      private resizeObserver: ResizeObserver | null = null;
+      private mounted: EditorActionsCallbacks | null = null;
+
+      constructor(view: EditorView) {
+        if (view.state.field(activeField)) {
+          this.mount(view);
+        }
+      }
+
+      update(update: ViewUpdate): void {
+        const isActive = update.state.field(activeField);
+        if (isActive && !this.dom) {
+          this.mount(update.view);
+        } else if (!isActive && this.dom) {
+          this.unmount();
+        } else if (
+          this.dom &&
+          (update.geometryChanged ||
+            update.docChanged ||
+            update.viewportChanged)
+        ) {
+          this.align(update.view);
+        }
+      }
+
+      destroy(): void {
+        this.unmount();
+      }
+
+      private mount(view: EditorView): void {
+        const container = document.createElement('div');
+        container.className = 'cm-editor-actions';
+        view.dom.appendChild(container);
+        this.resizeObserver = new ResizeObserver(() => {
+          view.dom.style.setProperty(
+            '--cm-editor-actions-width',
+            `${container.offsetWidth}px`,
+          );
+          view.dom.style.setProperty(
+            '--cm-editor-actions-height',
+            `${container.offsetHeight}px`,
+          );
+          view.dom.style.setProperty(
+            '--cm-editor-actions-content-min-height',
+            `${container.offsetHeight + SPACER_BOTTOM_GAP}px`,
+          );
+          this.align(view);
+        });
+        this.resizeObserver.observe(container);
+        this.dom = container;
+        this.mounted = callbacksRef;
+        callbacksRef?.onMount(container);
+        this.align(view);
+      }
+
+      private align(view: EditorView): void {
+        view.requestMeasure<{ top: number; right: number } | null>({
+          read: () => {
+            if (!this.dom) {
+              return null;
+            }
+            const editorRect = view.dom.getBoundingClientRect();
+            const spacer = view.dom.querySelector('.cm-editor-actions-spacer');
+            let topClient: number;
+            let rightClient: number;
+            if (spacer) {
+              const rect = spacer.getBoundingClientRect();
+              topClient = rect.top;
+              rightClient = rect.right;
+            } else {
+              const rect = view.contentDOM.getBoundingClientRect();
+              const style = window.getComputedStyle(view.contentDOM);
+              topClient = rect.top + (parseFloat(style.paddingTop) || 0);
+              rightClient = rect.right - (parseFloat(style.paddingRight) || 0);
+            }
+            return {
+              top: topClient - editorRect.top + view.scrollDOM.scrollTop,
+              right: editorRect.right - rightClient - view.scrollDOM.scrollLeft,
+            };
+          },
+          write: (pos) => {
+            if (!pos || !this.dom) {
+              return;
+            }
+            view.dom.style.setProperty(
+              '--cm-editor-actions-top',
+              `${pos.top}px`,
+            );
+            view.dom.style.setProperty(
+              '--cm-editor-actions-right',
+              `${pos.right}px`,
+            );
+          },
+        });
+      }
+
+      private unmount(): void {
+        if (!this.dom) {
+          return;
+        }
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+        this.mounted?.onUnmount();
+        this.mounted = null;
+        const root = this.dom?.parentElement;
+        if (root) {
+          root.style.removeProperty('--cm-editor-actions-width');
+          root.style.removeProperty('--cm-editor-actions-height');
+          root.style.removeProperty('--cm-editor-actions-content-min-height');
+          root.style.removeProperty('--cm-editor-actions-top');
+          root.style.removeProperty('--cm-editor-actions-right');
+        }
+        this.dom?.remove();
+        this.dom = null;
+      }
+    },
+  );
+
+  const theme = EditorView.theme({
+    '.cm-content': {
+      minHeight: 'var(--cm-editor-actions-content-min-height, 0px)',
+    },
+    '.cm-editor-actions-spacer': {
+      float: 'right',
+      boxSizing: 'content-box',
+      width: 'var(--cm-editor-actions-width, 0px)',
+      height: 'var(--cm-editor-actions-height, 0px)',
+      paddingLeft: `${SPACER_LEFT_GAP}px`,
+      paddingBottom: `${SPACER_BOTTOM_GAP}px`,
+      userSelect: 'none',
+      WebkitUserSelect: 'none',
+      pointerEvents: 'none',
+    },
+    '.cm-placeholder': {
+      display: 'inline',
+    },
+    '.cm-editor-actions': {
+      position: 'absolute',
+      top: 'var(--cm-editor-actions-top, 0px)',
+      right: 'var(--cm-editor-actions-right, 0px)',
+      zIndex: '2',
+      userSelect: 'none',
+      WebkitUserSelect: 'none',
+    },
+  });
+
+  return {
+    extension: [activeField, spacer, overlay, theme],
+    set: (callbacks) => {
+      callbacksRef = callbacks;
+      return setActiveEffect.of(callbacks !== null);
+    },
+  };
+}

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/hostCallbacks.ts

@@ -0,0 +1,9 @@
+/**
+ * Lifecycle callbacks for host-rendered overlay content (inline panels, editor
+ * action buttons, …). The host renders into the provided DOM container (e.g.
+ * via React `createPortal`) and is expected to clean up on unmount.
+ */
+export type HostPortalCallbacks = {
+  onMount: (container: HTMLElement) => void;
+  onUnmount: () => void;
+};

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,6 @@
-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 type { InlinePanelProps } from './CypherEditor';
+export type { DiffProps } from './diffView';
+export { cypher } from './lang-cypher/langCypher';
 export { darkThemeConstants, lightThemeConstants } from './themes';