@neo4j-cypher/react-codemirror - npm Package Compare versions

Comparing version 2.0.0-canary-dbe560f to 2.0.0-canary-dcbe67d

CHANGELOG.md

 # @neo4j-cypher/react-codemirror
 
+## 2.0.0-next.11
+
+### Patch Changes
+
+- Updated dependencies [05663bd]
+  - @neo4j-cypher/language-support@2.0.0-next.8
+
+## 2.0.0-next.10
+
+### Patch Changes
+
+- bb7e9d3: Simplify detection and handling of value prop updates
+
+## 2.0.0-next.9
+
+### Patch Changes
+
+- fbd5f7e: allow signature help panel to render below editor when there's not enough space above it
+- 09dfae2: Add an ariaLabel prop to CypherEditor
+- 7154e94: Fix bug causing debouncing to override value
+- 62c152f: execute single line query on enter by default
+- cbfc75e: Fix a bug causing debounced value updates to get cancelled erroneously
+- 04ae35e: Set initial latestDispatchedValue and flush debounced changes onExecute
+  Add tests for debounce behaviour
+- Updated dependencies [3661e9d]
+- Updated dependencies [b76af58]
+- Updated dependencies [21699b7]
+- Updated dependencies [6afc0e3]
+- Updated dependencies [39b924d]
+  - @neo4j-cypher/language-support@2.0.0-next.7
+
 ## 2.0.0-next.8
@@ -4,0 +35,0 @@

dist/CypherEditor.d.ts

 import { EditorState, Extension } from '@codemirror/state';
 import { EditorView, KeyBinding, ViewUpdate } from '@codemirror/view';
-import type { DbSchema } from '@neo4j-cypher/language-support';
+import { type DbSchema } from '@neo4j-cypher/language-support';
 import { Component } from 'react';
@@ -25,2 +25,9 @@ type DomEventHandlers = Parameters<typeof EditorView.domEventHandlers>[0];
     /**
+     * If true, pressing enter will add a new line to the editor and cmd/ctrl + enter will execute the query.
+     * Otherwise pressing enter on a single line will execute the query.
+     *
+     * @default false
+     */
+    newLineOnEnter?: boolean;
+    /**
      * The editor history navigable via up/down arrow keys. Order newest to oldest.
@@ -60,2 +67,17 @@ * Add to this list with the `onExecute` callback for REPL style history.
     /**
+     * Whether the signature help tooltip should be shown below the text.
+     * If false, it will be shown above.
+     *
+     * @default true
+     */
+    showSignatureTooltipBelow?: boolean;
+    /**
+     * Internal feature flags for the editor. Don't use in production
+     *
+     */
+    featureFlags?: {
+        consoleCommands?: boolean;
+        signatureInfoOnAutoCompletions?: boolean;
+    };
+    /**
      * The schema to use for autocompletion and linting.
@@ -117,2 +139,15 @@ *
     readonly?: boolean;
+    /**
+     * String value to assign to the aria-label attribute of the editor.
+     */
+    ariaLabel?: string;
+    /**
+     * Whether keybindings for inserting indents with the Tab key should be disabled.
+     *
+     * true will not create keybindings for inserting indents.
+     * false will create keybindings for inserting indents.
+     *
+     * @default false
+     */
+    moveFocusOnTab?: boolean;
 }
@@ -119,0 +154,0 @@ type CypherEditorState = {

dist/CypherEditor.js

 import { jsx as _jsx } from "react/jsx-runtime";
+import { insertNewline } from '@codemirror/commands';
 import { Annotation, Compartment, EditorState, } from '@codemirror/state';
@@ -6,2 +7,3 @@ import { EditorView, keymap, lineNumbers, placeholder, } from '@codemirror/view';
 import { Component, createRef } from 'react';
+import { DEBOUNCE_TIME } from './constants';
 import { replaceHistory, replMode as historyNavigation, } from './historyNavigation';
@@ -12,6 +14,20 @@ import { cypher } from './lang-cypher/langCypher';
 import { getThemeExtension } from './themes';
-const executeKeybinding = (onExecute) => onExecute
-    ? [
-        {
+const executeKeybinding = (onExecute, newLineOnEnter, flush) => {
+    const keybindings = {
+        'Shift-Enter': {
+            key: 'Shift-Enter',
+            run: insertNewline,
+        },
+        'Ctrl-Enter': {
             key: 'Ctrl-Enter',
+            run: () => true,
+        },
+        Enter: {
+            key: 'Enter',
+            run: insertNewline,
+        },
+    };
+    if (onExecute) {
+        keybindings['Ctrl-Enter'] = {
+            key: 'Ctrl-Enter',
             mac: 'Mod-Enter',
@@ -22,2 +38,3 @@ preventDefault: true,
                 if (doc.trim() !== '') {
+                    flush?.();
                     onExecute(doc);
@@ -27,5 +44,25 @@ }
             },
-        },
-    ]
-    : [];
+        };
+        if (!newLineOnEnter) {
+            keybindings['Enter'] = {
+                key: 'Enter',
+                preventDefault: true,
+                run: (view) => {
+                    const doc = view.state.doc.toString();
+                    if (doc.includes('\n')) {
+                        // Returning false means the event will mark the event
+                        // as not handled and the default behavior will be executed
+                        return false;
+                    }
+                    if (doc.trim() !== '') {
+                        flush?.();
+                        onExecute(doc);
+                    }
+                    return true;
+                },
+            };
+        }
+    }
+    return Object.values(keybindings);
+};
 const themeCompartment = new Compartment();
@@ -93,2 +130,3 @@ const keyBindingCompartment = new Compartment();
         lineWrap: false,
+        showSignatureTooltipBelow: true,
         extraKeybindings: [],
@@ -98,11 +136,20 @@ history: [],
         lineNumbers: true,
+        newLineOnEnter: false,
+        moveFocusOnTab: false,
     };
     debouncedOnChange = this.props.onChange
-        ? debounce(this.props.onChange, 200)
+        ? debounce(((value, viewUpdate) => {
+            this.props.onChange(value, viewUpdate);
+        }), DEBOUNCE_TIME)
         : undefined;
     componentDidMount() {
-        const { theme, extraKeybindings, lineWrap, overrideThemeBackgroundColor, schema, lint, onExecute, } = this.props;
+        const { theme, extraKeybindings, lineWrap, overrideThemeBackgroundColor, schema, lint, showSignatureTooltipBelow, featureFlags, onExecute, newLineOnEnter, } = this.props;
         this.schemaRef.current = {
             schema,
             lint,
+            showSignatureTooltipBelow,
+            featureFlags: {
+                consoleCommands: true,
+                ...featureFlags,
+            },
             useLightVersion: false,
@@ -130,5 +177,8 @@ setUseLightVersion: (newVal) => {
             extensions: [
-                keyBindingCompartment.of(keymap.of([...executeKeybinding(onExecute), ...extraKeybindings])),
+                keyBindingCompartment.of(keymap.of([
+                    ...executeKeybinding(onExecute, newLineOnEnter, () => this.debouncedOnChange?.flush()),
+                    ...extraKeybindings,
+                ])),
                 historyNavigation(this.props),
-                basicNeo4jSetup(),
+                basicNeo4jSetup(this.props),
                 themeCompartment.of(themeExtension),
@@ -146,2 +196,7 @@ changeListener,
                     : []),
+                this.props.ariaLabel
+                    ? EditorView.contentAttributes.of({
+                        'aria-label': this.props.ariaLabel,
+                    })
+                    : [],
             ],
@@ -170,3 +225,6 @@ doc: this.props.value,
         const currentCmValue = this.editorView.current.state?.doc.toString() ?? '';
-        if (this.props.value !== undefined && currentCmValue !== this.props.value) {
+        if (this.props.value !== undefined && // If the component becomes uncontolled, we just leave the value as is
+            this.props.value !== prevProps.value && // The value prop has changed, we need to update the editor
+            this.props.value !== currentCmValue // No need to dispatch an update if the value is the same
+        ) {
             this.editorView.current.dispatch({
@@ -212,3 +270,3 @@ changes: {
                 effects: keyBindingCompartment.reconfigure(keymap.of([
-                    ...executeKeybinding(this.props.onExecute),
+                    ...executeKeybinding(this.props.onExecute, this.props.newLineOnEnter, () => this.debouncedOnChange?.flush()),
                     ...this.props.extraKeybindings,
@@ -241,2 +299,3 @@ ])),
         this.schemaRef.current.lint = this.props.lint;
+        this.schemaRef.current.featureFlags = this.props.featureFlags;
     }
@@ -243,0 +302,0 @@ componentWillUnmount() {

dist/e2e_tests/autoCompletion.spec.js

@@ -5,3 +5,2 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CypherEditor } from '../CypherEditor';
-test.use({ viewport: { width: 500, height: 500 } });
 test('hello world end 2 end test', async ({ mount }) => {
@@ -43,2 +42,20 @@ const component = await mount(_jsx(CypherEditor, { value: "hello world" }));
 });
+test('get completions when typing in controlled component', async ({ mount, page, }) => {
+    let value = '';
+    const onChange = (val) => {
+        value = val;
+        void component.update(_jsx(CypherEditor, { value: val, onChange: onChange }));
+    };
+    const component = await mount(_jsx(CypherEditor, { value: value, onChange: onChange }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('RETU');
+    await page.waitForTimeout(500); // wait for debounce
+    await expect(page.locator('.cm-tooltip-autocomplete').getByText('RETURN')).toBeVisible();
+    // We need to wait for the editor to realise there is a completion open
+    // so that it does not just indent with tab key
+    await page.waitForTimeout(500);
+    await textField.press('Tab');
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    await expect(component).toContainText('RETURN');
+});
 test('can complete labels', async ({ mount, page }) => {
@@ -135,2 +152,119 @@ const component = await mount(_jsx(CypherEditor, { schema: {
 });
+async function getInfoTooltip(page, methodName) {
+    const infoTooltip = page.locator('.cm-completionInfo');
+    const firstOption = page.locator('li[aria-selected="true"]');
+    let selectedOption = firstOption;
+    while (!(await infoTooltip.textContent()).includes(methodName)) {
+        await page.keyboard.press('ArrowDown');
+        const currentSelected = page.locator('li[aria-selected="true"]');
+        expect(currentSelected).not.toBe(selectedOption);
+        expect(currentSelected).not.toBe(firstOption);
+        selectedOption = currentSelected;
+    }
+    return infoTooltip;
+}
+test('shows signature help information on auto-completion for procedures', async ({ page, mount, }) => {
+    await mount(_jsx(CypherEditor, { schema: testData.mockSchema, featureFlags: {
+            signatureInfoOnAutoCompletions: true,
+        } }));
+    const procName = 'apoc.periodic.iterate';
+    const procedure = testData.mockSchema.procedures[procName];
+    const textField = page.getByRole('textbox');
+    await textField.fill('CALL apoc.periodic.');
+    await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+    const infoTooltip = await getInfoTooltip(page, procName);
+    await expect(infoTooltip).toContainText(procedure.signature);
+    await expect(infoTooltip).toContainText(procedure.description);
+});
+test('shows signature help information on auto-completion for functions', async ({ page, mount, }) => {
+    await mount(_jsx(CypherEditor, { schema: testData.mockSchema, featureFlags: {
+            signatureInfoOnAutoCompletions: true,
+        } }));
+    const fnName = 'apoc.coll.combinations';
+    const fn = testData.mockSchema.functions[fnName];
+    const textField = page.getByRole('textbox');
+    await textField.fill('RETURN apoc.coll.');
+    await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+    const infoTooltip = await getInfoTooltip(page, fnName);
+    await expect(infoTooltip).toContainText(fn.signature);
+    await expect(infoTooltip).toContainText(fn.description);
+});
+test('shows deprecated procedures as strikethrough on auto-completion', async ({ page, mount, }) => {
+    const procName = 'apoc.trigger.resume';
+    await mount(_jsx(CypherEditor, { schema: {
+            procedures: { [procName]: testData.mockSchema.procedures[procName] },
+        }, featureFlags: {
+            signatureInfoOnAutoCompletions: true,
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('CALL apoc.trigger.');
+    // We need to assert on the element having the right class
+    // and trusting the CSS is making this truly strikethrough
+    await expect(page.locator('.cm-deprecated-completion')).toBeVisible();
+});
+test('shows deprecated function as strikethrough on auto-completion', async ({ page, mount, }) => {
+    const fnName = 'apoc.create.uuid';
+    await mount(_jsx(CypherEditor, { schema: {
+            functions: { [fnName]: testData.mockSchema.functions[fnName] },
+        }, featureFlags: {
+            signatureInfoOnAutoCompletions: true,
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('RETURN apoc.create.');
+    // We need to assert on the element having the right class
+    // and trusting the CSS is making this truly strikethrough
+    await expect(page.locator('.cm-deprecated-completion')).toBeVisible();
+});
+test('does not signature help information on auto-completion if flag not enabled explicitly', async ({ page, mount, }) => {
+    await mount(_jsx(CypherEditor, { schema: testData.mockSchema }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('CALL apoc.periodic.');
+    await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+    await expect(page.locator('.cm-completionInfo')).not.toBeVisible();
+});
+test('does not signature help information on auto-completion if docs and signature are empty', async ({ page, mount, }) => {
+    await mount(_jsx(CypherEditor, { schema: testData.mockSchema, featureFlags: {
+            signatureInfoOnAutoCompletions: true,
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('C');
+    await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+    await expect(page.locator('.cm-completionInfo')).not.toBeVisible();
+});
+test('shows signature help information on auto-completion if description is not empty, signature is', async ({ page, mount, }) => {
+    await mount(_jsx(CypherEditor, { schema: {
+            procedures: {
+                'db.ping': {
+                    ...testData.emptyProcedure,
+                    description: 'foo',
+                    signature: '',
+                    name: 'db.ping',
+                },
+            },
+        }, featureFlags: {
+            signatureInfoOnAutoCompletions: true,
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('CALL db.');
+    await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+    await expect(page.locator('.cm-completionInfo')).toBeVisible();
+});
+test('shows signature help information on auto-completion if signature is not empty, description is', async ({ page, mount, }) => {
+    await mount(_jsx(CypherEditor, { schema: {
+            procedures: {
+                'db.ping': {
+                    ...testData.emptyProcedure,
+                    description: '',
+                    signature: 'foo',
+                    name: 'db.ping',
+                },
+            },
+        }, featureFlags: {
+            signatureInfoOnAutoCompletions: true,
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('CALL db.');
+    await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+    await expect(page.locator('.cm-completionInfo')).toBeVisible();
+});
 //# sourceMappingURL=autoCompletion.spec.js.map

dist/e2e_tests/configuration.spec.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
-test.use({ viewport: { width: 500, height: 500 } });
 test('prompt shows up', async ({ mount, page }) => {
@@ -73,2 +72,13 @@ const component = await mount(_jsx(CypherEditor, { prompt: "neo4j>" }));
 });
+test('aria-label is not set by default', async ({ mount, page }) => {
+    await mount(_jsx(CypherEditor, {}));
+    const textField = page.getByRole('textbox');
+    expect(await textField.getAttribute('aria-label')).toBeNull();
+});
+test('can set aria-label', async ({ mount, page }) => {
+    const ariaLabel = 'Cypher Editor';
+    await mount(_jsx(CypherEditor, { ariaLabel: ariaLabel }));
+    const textField = page.getByRole('textbox');
+    expect(await textField.getAttribute('aria-label')).toEqual(ariaLabel);
+});
 //# sourceMappingURL=configuration.spec.js.map

dist/e2e_tests/extraKeybindings.spec.js

@@ -5,3 +5,2 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CypherEditorPage } from './e2eUtils';
-test.use({ viewport: { width: 500, height: 500 } });
 test('can add extra keybinding statically', async ({ mount, page }) => {
@@ -8,0 +7,0 @@ const editorPage = new CypherEditorPage(page);

dist/e2e_tests/historyNavigation.spec.js

@@ -5,3 +5,2 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CypherEditorPage } from './e2eUtils';
-test.use({ viewport: { width: 500, height: 500 } });
 test('respects preloaded history', async ({ page, mount }) => {
@@ -19,3 +18,5 @@ const editorPage = new CypherEditorPage(page);
     await expect(page.getByText('second')).toBeVisible();
+    // First arrow down is to get to end of line
     await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
     await expect(page.getByText('first')).toBeVisible();
@@ -25,4 +26,48 @@ await editorPage.getEditor().press('ArrowDown');
 });
-test('can execute queries and see them in history', async ({ page, mount }) => {
+test('can add new lines without onExecute', async ({ page, mount }) => {
     const editorPage = new CypherEditorPage(page);
+    const editorComponent = await mount(_jsx(CypherEditor, {}));
+    // Ctrl-Enter does nothing when onExecute is false
+    await editorPage.getEditor().press('Control+Enter');
+    await expect(editorComponent).toHaveText('1\n', {
+        useInnerText: true,
+    });
+    // Enter adds new lines
+    await editorPage.getEditor().fill('Brock');
+    await editorPage.getEditor().press('Enter');
+    await editorPage.getEditor().press('Enter');
+    await expect(editorComponent).toHaveText('1\n2\n3\nBrock', {
+        useInnerText: true,
+    });
+    // Shift-Enter adds new lines
+    await editorPage.getEditor().press('Shift+Enter');
+    await editorPage.getEditor().press('Shift+Enter');
+    await expect(editorComponent).toHaveText('1\n2\n3\n4\n5\nBrock', {
+        useInnerText: true,
+    });
+});
+test('can add new lines with newLineOnEnter and without onExecute', async ({ page, mount, }) => {
+    const editorPage = new CypherEditorPage(page);
+    const editorComponent = await mount(_jsx(CypherEditor, { newLineOnEnter: true }));
+    // Ctrl-Enter does nothing when onExecute is false
+    await editorPage.getEditor().press('Control+Enter');
+    await expect(editorComponent).toHaveText('1\n', {
+        useInnerText: true,
+    });
+    // Enter adds new lines
+    await editorPage.getEditor().fill('Brock');
+    await editorPage.getEditor().press('Enter');
+    await editorPage.getEditor().press('Enter');
+    await expect(editorComponent).toHaveText('1\n2\n3\nBrock', {
+        useInnerText: true,
+    });
+    // Shift-Enter adds new lines
+    await editorPage.getEditor().press('Shift+Enter');
+    await editorPage.getEditor().press('Shift+Enter');
+    await expect(editorComponent).toHaveText('1\n2\n3\n4\n5\nBrock', {
+        useInnerText: true,
+    });
+});
+test('can execute queries and see them in history with newLineOnEnter', async ({ page, mount, }) => {
+    const editorPage = new CypherEditorPage(page);
     const initialValue = `MATCH (n)
@@ -34,3 +79,3 @@ RETURN n;`;
     };
-    const editor = await mount(_jsx(CypherEditor, { value: initialValue, history: history, onExecute: onExecute }));
+    const editor = await mount(_jsx(CypherEditor, { value: initialValue, history: history, onExecute: onExecute, newLineOnEnter: true }));
     // Execute initial query
@@ -45,3 +90,3 @@ await editorPage.getEditor().press('Control+Enter');
     expect(history.length).toBe(1);
-    // Ensure only enter doesn't execute query
+    // Ensure cmd+enter is required in multiline
     await editorPage.getEditor().fill('multiline');
@@ -51,3 +96,3 @@ await editorPage.getEditor().press('Enter');
     await editorPage.getEditor().press('Enter');
-    await editorPage.getEditor().press('Enter');
+    await editorPage.getEditor().press('Shift+Enter');
     await page.keyboard.type('entry');
@@ -74,2 +119,4 @@ expect(history.length).toBe(1);
     // arrow movements don't matter until bottom is hit
+    await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
     await editorPage.getEditor().press('ArrowUp');
@@ -79,2 +126,5 @@ await editorPage.getEditor().press('ArrowUp');
     await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
     // editor still multiline
@@ -86,2 +136,43 @@ await expect(page.getByText('multiline')).toBeVisible();
 });
+test('can execute queries without newLineOnEnter', async ({ page, mount }) => {
+    const editorPage = new CypherEditorPage(page);
+    const initialValue = 'Brock';
+    const history = [];
+    const onExecute = (cmd) => {
+        history.unshift(cmd);
+    };
+    const editorComponent = await mount(_jsx(CypherEditor, { value: initialValue, onExecute: onExecute }));
+    // Cmd/Control still executes initial query
+    await editorPage.getEditor().press('Control+Enter');
+    await editorPage.getEditor().press('Meta+Enter');
+    expect(history.length).toBe(1);
+    // Ensure query execution doesn't fire if the query is only whitespace
+    await editorPage.getEditor().fill('     ');
+    await editorPage.getEditor().press('Control+Enter');
+    await editorPage.getEditor().press('Meta+Enter');
+    await editorPage.getEditor().press('Enter');
+    expect(history.length).toBe(1);
+    // Ensure enter executes query when in single line
+    await editorPage.getEditor().fill('Misty');
+    await editorPage.getEditor().press('Enter');
+    expect(history.length).toBe(2);
+    expect(history).toEqual(['Misty', 'Brock']);
+    // Ensure cmd+enter is required in multiline
+    await editorPage.getEditor().fill('multiline');
+    await editorPage.getEditor().press('Shift+Enter');
+    await editorPage.getEditor().press('Enter');
+    await editorPage.getEditor().press('A');
+    // line numbers and the text
+    await expect(editorComponent).toHaveText('1\n2\n3\nmultiline\nA', {
+        useInnerText: true,
+    });
+    await editorPage.getEditor().press('Enter');
+    await editorPage.getEditor().press('Enter');
+    await editorPage.getEditor().press('Enter');
+    await editorPage.getEditor().press('Enter');
+    expect(history.length).toBe(2);
+    await editorPage.getEditor().press('Control+Enter');
+    await editorPage.getEditor().press('Meta+Enter');
+    expect(history.length).toBe(3);
+});
 test('can navigate with cmd+up as well', async ({ page, mount }) => {
@@ -94,2 +185,3 @@ const editorPage = new CypherEditorPage(page);
     await mount(_jsx(CypherEditor, { value: initialValue, history: [
+            'first',
             `one
@@ -99,3 +191,2 @@ multiline
 .`,
-            'second',
         ], onExecute: () => {
@@ -105,18 +196,18 @@ /* needed to turn on history movements */
     await editorPage.getEditor().press(metaUp);
+    await expect(page.getByText('first')).toBeVisible();
+    // move in history
+    await editorPage.getEditor().press(metaUp);
     await expect(page.getByText('multiline')).toBeVisible();
-    // Single meta up moves all the way to top of editor on mac
+    // Single meta down moves all the way to top of editor on mac
     if (isMac) {
-        await editorPage.getEditor().press(metaUp);
+        await editorPage.getEditor().press(metaDown);
     }
     else {
-        await editorPage.getEditor().press('ArrowUp');
-        await editorPage.getEditor().press('ArrowUp');
-        await editorPage.getEditor().press('ArrowUp');
-        await editorPage.getEditor().press('ArrowUp');
+        await editorPage.getEditor().press('ArrowDown');
+        await editorPage.getEditor().press('ArrowDown');
+        await editorPage.getEditor().press('ArrowDown');
+        await editorPage.getEditor().press('ArrowDown');
     }
-    // move in history
-    await editorPage.getEditor().press(metaUp);
-    await expect(page.getByText('second')).toBeVisible();
     await editorPage.getEditor().press(metaDown);
-    await expect(page.getByText('multiline')).toBeVisible();
+    await expect(page.getByText('first')).toBeVisible();
 });
@@ -123,0 +214,0 @@ test('test onExecute', async ({ page, mount }) => {

dist/e2e_tests/sanityChecks.spec.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
-test.use({ viewport: { width: 500, height: 500 } });
 test('can mount the editor with text', async ({ mount }) => {
@@ -25,3 +24,5 @@ const component = await mount(_jsx(CypherEditor, { value: "MATCH (n) RETURN n;" }));
     const textField = page.getByRole('textbox');
+    await textField.fill('');
     await textField.fill('RETURN 12');
+    await expect(textField).toHaveText('RETURN 12');
     // editor update is debounced, retry wait for debounced
@@ -31,6 +32,2 @@ await expect(() => {
     }).toPass({ intervals: [300, 300, 1000] });
-    await page.keyboard.type('34');
-    await expect(() => {
-        expect(editorValueCopy).toBe('RETURN 12');
-    }).toPass({ intervals: [300, 300, 1000] });
 });
@@ -37,0 +34,0 @@ test('can complete RETURN', async ({ page, mount }) => {

dist/e2e_tests/signatureHelp.spec.js

@@ -152,2 +152,29 @@ import { jsx as _jsx } from "react/jsx-runtime";
 });
+test('Signature help is shown below the text by default', async ({ page, mount, }) => {
+    // We need to introduce new lines to make sure there's
+    // enough space to show the tooltip above
+    const query = '\n\n\n\n\n\n\nRETURN abs(';
+    await mount(_jsx(CypherEditor, { value: query, schema: testData.mockSchema, autofocus: true }));
+    await expect(page.locator('.cm-signature-help-panel.cm-tooltip-below')).toBeVisible({
+        timeout: 2000,
+    });
+});
+test('Setting showSignatureTooltipBelow to true shows the signature help above the text', async ({ page, mount, }) => {
+    // We need to introduce new lines to make sure there's
+    // enough space to show the tooltip above
+    const query = '\n\n\n\n\n\n\nRETURN abs(';
+    await mount(_jsx(CypherEditor, { value: query, schema: testData.mockSchema, showSignatureTooltipBelow: true, autofocus: true }));
+    await expect(page.locator('.cm-signature-help-panel.cm-tooltip-below')).toBeVisible({
+        timeout: 2000,
+    });
+});
+test('Setting showSignatureTooltipBelow to false shows the signature help above the text', async ({ page, mount, }) => {
+    // We need to introduce new lines to make sure there's
+    // enough space to show the tooltip above
+    const query = '\n\n\n\n\n\n\nRETURN abs(';
+    await mount(_jsx(CypherEditor, { value: query, schema: testData.mockSchema, showSignatureTooltipBelow: false, autofocus: true }));
+    await expect(page.locator('.cm-signature-help-panel.cm-tooltip-above')).toBeVisible({
+        timeout: 2000,
+    });
+});
 //# sourceMappingURL=signatureHelp.spec.js.map

dist/e2e_tests/snippets.spec.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
-test.use({ viewport: { width: 500, height: 500 } });
 test('can complete pattern snippet', async ({ page, mount }) => {
@@ -6,0 +5,0 @@ await mount(_jsx(CypherEditor, {}));

dist/e2e_tests/syntaxHighlighting.spec.js

@@ -6,3 +6,2 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CypherEditorPage } from './e2eUtils';
-test.use({ viewport: { width: 500, height: 500 } });
 test('light theme highlighting', async ({ page, mount }) => {
@@ -9,0 +8,0 @@ const editorPage = new CypherEditorPage(page);

dist/historyNavigation.js

@@ -84,3 +84,3 @@ import { StateEffect } from '@codemirror/state';
         effects: moveInHistory.of(direction),
-        selection: { anchor: view.state.doc.length },
+        selection: { anchor: direction === 'BACK' ? 0 : view.state.doc.length },
     }));
@@ -87,0 +87,0 @@ const updatedHistory = view.state.field(historyState, false);

dist/index.d.ts

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

dist/index.js

@@ -1,2 +0,2 @@
-export { CypherParser, _internalFeatureFlags, } from '@neo4j-cypher/language-support';
+export * as LanguageSupport from '@neo4j-cypher/language-support';
 export { CypherEditor } from './CypherEditor';
@@ -3,0 +3,0 @@ export { cypher } from './lang-cypher/langCypher';

dist/lang-cypher/autocomplete.d.ts

@@ -1,3 +0,6 @@
-import { CompletionSource } from '@codemirror/autocomplete';
+import { Completion, CompletionSource } from '@codemirror/autocomplete';
 import type { CypherConfig } from './langCypher';
+export declare const completionStyles: (completion: Completion & {
+    deprecated?: boolean;
+}) => string;
 export declare const cypherAutocomplete: (config: CypherConfig) => CompletionSource;

dist/lang-cypher/autocomplete.js

@@ -1,4 +0,5 @@
-import { snippet } from '@codemirror/autocomplete';
+import { snippet, } from '@codemirror/autocomplete';
 import { autocomplete } from '@neo4j-cypher/language-support';
-import { CompletionItemKind } from 'vscode-languageserver-types';
+import { CompletionItemKind, CompletionItemTag, } from 'vscode-languageserver-types';
+import { getDocString } from './utils';
 const completionKindToCodemirrorIcon = (c) => {
@@ -35,6 +36,14 @@ const map = {
 };
+export const completionStyles = (completion) => {
+    if (completion.deprecated) {
+        return 'cm-deprecated-completion';
+    }
+    else {
+        return null;
+    }
+};
 export const cypherAutocomplete = (config) => (context) => {
-    const textUntilCursor = context.state.doc.toString().slice(0, context.pos);
+    const documentText = context.state.doc.toString();
     const triggerCharacters = ['.', ':', '{', '$', ')'];
-    const lastCharacter = textUntilCursor.slice(-1);
+    const lastCharacter = documentText.at(context.pos - 1);
     const lastWord = context.matchBefore(/\w*/);
@@ -49,16 +58,69 @@ const inWord = lastWord.from !== lastWord.to;
     }
-    const options = autocomplete(textUntilCursor, config.schema ?? {}, undefined, context.explicit);
-    return {
-        from: context.matchBefore(/(\w|\$)*$/).from,
-        options: options.map((o) => ({
-            label: o.label,
-            type: completionKindToCodemirrorIcon(o.kind),
-            apply: o.kind === CompletionItemKind.Snippet
-                ? // codemirror requires an empty snippet space to be able to tab out of the completion
-                    snippet((o.insertText ?? o.label) + '${}')
-                : undefined,
-            detail: o.detail,
-        })),
-    };
+    const options = autocomplete(documentText, config.schema ?? {}, context.pos, context.explicit);
+    if (config.featureFlags?.signatureInfoOnAutoCompletions) {
+        return {
+            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.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,
+                };
+            }),
+        };
+    }
+    else {
+        return {
+            from: context.matchBefore(/(\w|\$)*$/).from,
+            options: options.map((o) => ({
+                label: o.label,
+                type: completionKindToCodemirrorIcon(o.kind),
+                apply: o.kind === CompletionItemKind.Snippet
+                    ? // codemirror requires an empty snippet space to be able to tab out of the completion
+                        snippet((o.insertText ?? o.label) + '${}')
+                    : undefined,
+                detail: o.detail,
+            })),
+        };
+    }
 };
 //# sourceMappingURL=autocomplete.js.map

dist/lang-cypher/contants.test.js

 import { tags } from '@lezer/highlight';
 import { applySyntaxColouring, CypherTokenType, } from '@neo4j-cypher/language-support';
+import { expect, test } from 'vitest';
 import { tokenTypeToStyleTag } from './constants';
@@ -4,0 +5,0 @@ const cypherQueryWithAllTokenTypes = `MATCH (variable :Label)-[:REL_TYPE]->()

dist/lang-cypher/createCypherTheme.js

@@ -82,2 +82,8 @@ import { HighlightStyle, syntaxHighlighting, } from '@codemirror/language';
         },
+        '.cm-completionInfo-signature': {
+            color: 'darkgrey',
+        },
+        '.cm-deprecated-completion': {
+            'text-decoration': 'line-through',
+        },
         '.cm-tooltip-autocomplete': {
@@ -84,0 +90,0 @@ maxWidth: '430px',

dist/lang-cypher/langCypher.d.ts

@@ -5,2 +5,7 @@ import { LanguageSupport } from '@codemirror/language';
     lint?: boolean;
+    showSignatureTooltipBelow?: boolean;
+    featureFlags?: {
+        signatureInfoOnAutoCompletions?: boolean;
+        consoleCommands?: boolean;
+    };
     schema?: DbSchema;
@@ -7,0 +12,0 @@ useLightVersion: boolean;

dist/lang-cypher/langCypher.js

@@ -0,4 +1,5 @@
+import { autocompletion } from '@codemirror/autocomplete';
 import { defineLanguageFacet, Language, LanguageSupport, } from '@codemirror/language';
 import { _internalFeatureFlags, } from '@neo4j-cypher/language-support';
-import { cypherAutocomplete } from './autocomplete';
+import { completionStyles, cypherAutocomplete } from './autocomplete';
 import { ParserAdapter } from './parser-adapter';
@@ -12,8 +13,13 @@ import { signatureHelpTooltip } from './signatureHelp';
 export function cypher(config) {
-    _internalFeatureFlags.consoleCommands = true;
+    const featureFlags = config.featureFlags;
+    // We allow to override the consoleCommands feature flag
+    if (featureFlags.consoleCommands !== undefined) {
+        _internalFeatureFlags.consoleCommands = featureFlags.consoleCommands;
+    }
     const parserAdapter = new ParserAdapter(facet, config);
     const cypherLanguage = new Language(facet, parserAdapter, [], 'cypher');
     return new LanguageSupport(cypherLanguage, [
-        cypherLanguage.data.of({
-            autocomplete: cypherAutocomplete(config),
+        autocompletion({
+            override: [cypherAutocomplete(config)],
+            optionClass: completionStyles,
         }),
@@ -20,0 +26,0 @@ cypherLinter(config),

dist/lang-cypher/signatureHelp.js

 import { StateField } from '@codemirror/state';
 import { showTooltip } from '@codemirror/view';
 import { signatureHelp } from '@neo4j-cypher/language-support';
-import { MarkupContent, } from 'vscode-languageserver-types';
+import { getDocString } from './utils';
 function getTriggerCharacter(query, caretPosition) {
@@ -15,10 +15,2 @@ let i = caretPosition - 1;
 }
-function getDocString(result) {
-    if (MarkupContent.is(result)) {
-        result.value;
-    }
-    else {
-        return result;
-    }
-}
 const createSignatureHelpElement = ({ signature, activeParameter, }) => () => {
@@ -78,6 +70,7 @@ const parameters = signature.parameters;
                 const signature = signatures[activeSignature];
+                const showSignatureTooltipBelow = config.showSignatureTooltipBelow ?? true;
                 result = [
                     {
                         pos: caretPosition,
-                        above: true,
+                        above: !showSignatureTooltipBelow,
                         arrow: true,
@@ -84,0 +77,0 @@ create: createSignatureHelpElement({ signature, activeParameter }),

dist/lang-cypher/syntaxValidation.js

@@ -5,5 +5,3 @@ import { linter } from '@codemirror/lint';
 import workerpool from 'workerpool';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore ignore: https://v3.vitejs.dev/guide/features.html#import-with-query-suffixes
-import WorkerURL from './lintWorker?url&worker';
+import WorkerURL from './lintWorker?worker&url';
 const pool = workerpool.pool(WorkerURL, {
@@ -41,4 +39,3 @@ minWorkers: 2,
     const statements = parse.statementsParsing;
-    const anySyntacticError = statements.filter((statement) => statement.diagnostics.length !== 0)
-        .length > 0;
+    const anySyntacticError = statements.some((statement) => statement.syntaxErrors.length !== 0);
     if (anySyntacticError) {
@@ -45,0 +42,0 @@ return [];

dist/ndlTokensCopy.test.js

 import { tokens } from '@neo4j-ndl/base';
+import { expect, test } from 'vitest';
 import { tokens as tokensCopy } from './ndlTokensCopy';
@@ -3,0 +4,0 @@ /*

dist/neo4jSetup.d.ts

 import { Extension } from '@codemirror/state';
-export declare const basicNeo4jSetup: () => Extension[];
+type SetupProps = {
+    moveFocusOnTab?: boolean;
+};
+export declare const basicNeo4jSetup: ({ moveFocusOnTab, }: SetupProps) => Extension[];
+export {};

dist/neo4jSetup.js

@@ -27,3 +27,3 @@ import { acceptCompletion, autocompletion, clearSnippet, closeBrackets, closeBracketsKeymap, closeCompletion, completionKeymap, nextSnippetField, prevSnippetField, snippetKeymap, } from '@codemirror/autocomplete';
 };
-export const basicNeo4jSetup = () => {
+export const basicNeo4jSetup = ({ moveFocusOnTab = false, }) => {
     const keymaps = [
@@ -37,18 +37,18 @@ closeBracketsKeymap,
         lintKeymap,
-        {
+    ].flat();
+    if (!moveFocusOnTab) {
+        keymaps.push({
             key: 'Tab',
             preventDefault: true,
             run: acceptCompletion,
-        },
-        {
+        }, {
             key: 'Tab',
             preventDefault: true,
             run: insertTab,
-        },
-        {
+        }, {
             key: 'Shift-Tab',
             preventDefault: true,
             run: indentLess,
-        },
-    ].flat();
+        });
+    }
     const extensions = [];
@@ -55,0 +55,0 @@ extensions.push(highlightSpecialChars());

package.json

@@ -20,3 +20,3 @@ {
   ],
-  "version": "2.0.0-canary-dbe560f",
+  "version": "2.0.0-canary-dcbe67d",
   "main": "./dist/index.js",
@@ -29,3 +29,3 @@ "types": "./dist/index.d.ts",
     "clean": "rm -rf dist",
-    "test": "jest",
+    "test": "vitest run",
     "test:e2e": "playwright test -c playwright-ct.config.ts",
@@ -47,12 +47,12 @@ "test:e2e-ui": "playwright test -c playwright-ct.config.ts --ui",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.5.1",
-    "@codemirror/commands": "^6.2.2",
-    "@codemirror/language": "^6.6.0",
-    "@codemirror/lint": "^6.2.2",
-    "@codemirror/search": "^6.5.0",
-    "@codemirror/state": "^6.2.1",
-    "@codemirror/view": "^6.13.2",
+    "@codemirror/autocomplete": "^6.17.0",
+    "@codemirror/commands": "^6.6.0",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/lint": "^6.8.1",
+    "@codemirror/search": "^6.5.6",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.29.1",
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.1.3",
-    "@neo4j-cypher/language-support": "2.0.0-canary-dbe560f",
+    "@neo4j-cypher/language-support": "2.0.0-canary-dcbe67d",
     "@types/prismjs": "^1.26.3",
@@ -69,13 +69,15 @@ "@types/workerpool": "^6.4.7",
     "@neo4j-ndl/base": "^1.10.1",
-    "@playwright/experimental-ct-react": "^1.39.0",
-    "@playwright/test": "^1.36.2",
+    "@playwright/experimental-ct-react": "^1.45.3",
+    "@playwright/test": "^1.45.3",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.0.28",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "concurrently": "^8.2.1",
     "esbuild": "^0.19.4",
+    "jsdom": "^24.1.1",
     "lodash": "^4.17.21",
-    "playwright": "^1.36.2",
+    "playwright": "^1.45.3",
     "react": "^18.2.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vite": "^5.3.5"
   },
@@ -82,0 +84,0 @@ "peerDependencies": {

src/historyNavigation.ts

@@ -100,3 +100,3 @@ import { Extension, StateEffect } from '@codemirror/state';
       effects: moveInHistory.of(direction),
-      selection: { anchor: view.state.doc.length },
+      selection: { anchor: direction === 'BACK' ? 0 : view.state.doc.length },
     }),
@@ -103,0 +103,0 @@ );

src/index.ts

@@ -1,7 +0,4 @@
-export {
-  CypherParser,
-  _internalFeatureFlags,
-} from '@neo4j-cypher/language-support';
+export * as LanguageSupport from '@neo4j-cypher/language-support';
 export { CypherEditor } from './CypherEditor';
 export { cypher } from './lang-cypher/langCypher';
 export { darkThemeConstants, lightThemeConstants } from './themes';

src/lang-cypher/autocomplete.ts

@@ -1,6 +0,14 @@
-import { CompletionSource, snippet } from '@codemirror/autocomplete';
+import {
+  Completion,
+  CompletionSource,
+  snippet,
+} from '@codemirror/autocomplete';
 import { autocomplete } from '@neo4j-cypher/language-support';
-import { CompletionItemKind } from 'vscode-languageserver-types';
+import {
+  CompletionItemKind,
+  CompletionItemTag,
+} from 'vscode-languageserver-types';
 import { CompletionItemIcons } from '../icons';
 import type { CypherConfig } from './langCypher';
+import { getDocString } from './utils';
 
@@ -40,8 +48,18 @@ const completionKindToCodemirrorIcon = (c: CompletionItemKind) => {
 
+export const completionStyles: (
+  completion: Completion & { deprecated?: boolean },
+) => string = (completion) => {
+  if (completion.deprecated) {
+    return 'cm-deprecated-completion';
+  } else {
+    return null;
+  }
+};
+
 export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
   (config) => (context) => {
-    const textUntilCursor = context.state.doc.toString().slice(0, context.pos);
+    const documentText = context.state.doc.toString();
 
     const triggerCharacters = ['.', ':', '{', '$', ')'];
-    const lastCharacter = textUntilCursor.slice(-1);
+    const lastCharacter = documentText.at(context.pos - 1);
 
@@ -63,21 +81,79 @@ const lastWord = context.matchBefore(/\w*/);
     const options = autocomplete(
-      textUntilCursor,
+      documentText,
       config.schema ?? {},
-      undefined,
+      context.pos,
       context.explicit,
     );
 
-    return {
-      from: context.matchBefore(/(\w|\$)*$/).from,
-      options: options.map((o) => ({
-        label: o.label,
-        type: completionKindToCodemirrorIcon(o.kind),
-        apply:
-          o.kind === CompletionItemKind.Snippet
-            ? // codemirror requires an empty snippet space to be able to tab out of the completion
-              snippet((o.insertText ?? o.label) + '${}')
-            : undefined,
-        detail: o.detail,
-      })),
-    };
+    if (config.featureFlags?.signatureInfoOnAutoCompletions) {
+      return {
+        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.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,
+          };
+        }),
+      };
+    } else {
+      return {
+        from: context.matchBefore(/(\w|\$)*$/).from,
+        options: options.map((o) => ({
+          label: o.label,
+          type: completionKindToCodemirrorIcon(o.kind),
+          apply:
+            o.kind === CompletionItemKind.Snippet
+              ? // codemirror requires an empty snippet space to be able to tab out of the completion
+                snippet((o.insertText ?? o.label) + '${}')
+              : undefined,
+          detail: o.detail,
+        })),
+      };
+    }
   };

src/lang-cypher/contants.test.ts

@@ -6,2 +6,3 @@ import { tags } from '@lezer/highlight';
 } from '@neo4j-cypher/language-support';
+import { expect, test } from 'vitest';
 import { tokenTypeToStyleTag } from './constants';
@@ -8,0 +9,0 @@

src/lang-cypher/createCypherTheme.ts

@@ -127,3 +127,8 @@ import {
     },
-
+    '.cm-completionInfo-signature': {
+      color: 'darkgrey',
+    },
+    '.cm-deprecated-completion': {
+      'text-decoration': 'line-through',
+    },
     '.cm-tooltip-autocomplete': {
@@ -130,0 +135,0 @@ maxWidth: '430px',

src/lang-cypher/langCypher.ts

@@ -0,1 +1,2 @@
+import { autocompletion } from '@codemirror/autocomplete';
 import {
@@ -10,3 +11,3 @@ defineLanguageFacet,
 } from '@neo4j-cypher/language-support';
-import { cypherAutocomplete } from './autocomplete';
+import { completionStyles, cypherAutocomplete } from './autocomplete';
 import { ParserAdapter } from './parser-adapter';
@@ -23,2 +24,7 @@ import { signatureHelpTooltip } from './signatureHelp';
   lint?: boolean;
+  showSignatureTooltipBelow?: boolean;
+  featureFlags?: {
+    signatureInfoOnAutoCompletions?: boolean;
+    consoleCommands?: boolean;
+  };
   schema?: DbSchema;
@@ -30,3 +36,8 @@ useLightVersion: boolean;
 export function cypher(config: CypherConfig) {
-  _internalFeatureFlags.consoleCommands = true;
+  const featureFlags = config.featureFlags;
+  // We allow to override the consoleCommands feature flag
+  if (featureFlags.consoleCommands !== undefined) {
+    _internalFeatureFlags.consoleCommands = featureFlags.consoleCommands;
+  }
+
   const parserAdapter = new ParserAdapter(facet, config);
@@ -37,4 +48,5 @@
   return new LanguageSupport(cypherLanguage, [
-    cypherLanguage.data.of({
-      autocomplete: cypherAutocomplete(config),
+    autocompletion({
+      override: [cypherAutocomplete(config)],
+      optionClass: completionStyles,
     }),
@@ -41,0 +53,0 @@ cypherLinter(config),

src/lang-cypher/signatureHelp.ts

 import { EditorState, StateField } from '@codemirror/state';
 import { showTooltip, Tooltip } from '@codemirror/view';
 import { signatureHelp } from '@neo4j-cypher/language-support';
-import {
-  MarkupContent,
-  SignatureInformation,
-} from 'vscode-languageserver-types';
+import { SignatureInformation } from 'vscode-languageserver-types';
 import { CypherConfig } from './langCypher';
+import { getDocString } from './utils';
 
@@ -23,10 +21,2 @@ function getTriggerCharacter(query: string, caretPosition: number) {
 
-function getDocString(result: string | MarkupContent): string {
-  if (MarkupContent.is(result)) {
-    result.value;
-  } else {
-    return result;
-  }
-}
-
 const createSignatureHelpElement =
@@ -115,2 +105,4 @@ ({
         const signature = signatures[activeSignature];
+        const showSignatureTooltipBelow =
+          config.showSignatureTooltipBelow ?? true;
 
@@ -120,3 +112,3 @@ result = [
             pos: caretPosition,
-            above: true,
+            above: !showSignatureTooltipBelow,
             arrow: true,
@@ -123,0 +115,0 @@ create: createSignatureHelpElement({ signature, activeParameter }),

src/lang-cypher/syntaxValidation.ts

@@ -8,8 +8,5 @@ import { Diagnostic, linter } from '@codemirror/lint';
 import type { LinterTask, LintWorker } from './lintWorker';
+import WorkerURL from './lintWorker?worker&url';
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore ignore: https://v3.vitejs.dev/guide/features.html#import-with-query-suffixes
-import WorkerURL from './lintWorker?url&worker';
-
-const pool = workerpool.pool(WorkerURL as string, {
+const pool = workerpool.pool(WorkerURL, {
   minWorkers: 2,
@@ -61,5 +58,5 @@ workerOpts: { type: 'module' },
 
-    const anySyntacticError =
-      statements.filter((statement) => statement.diagnostics.length !== 0)
-        .length > 0;
+    const anySyntacticError = statements.some(
+      (statement) => statement.syntaxErrors.length !== 0,
+    );
 
@@ -66,0 +63,0 @@ if (anySyntacticError) {

src/ndlTokensCopy.test.ts

 import { tokens } from '@neo4j-ndl/base';
+import { expect, test } from 'vitest';
 import { tokens as tokensCopy } from './ndlTokensCopy';
@@ -3,0 +4,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

671546

increased by15.25%

Number of package files

138

increased by14.05%

Lines of code

8964

increased by19.66%

Worsened metrics

Dev dependency count

14

increased by16.67%

Dependency changes

• + Added@codemirror/commands@6.7.1(transitive)

• + Added@neo4j-cypher/language-support@2.0.0-canary-dcbe67d(transitive)

• - Removed@codemirror/commands@6.8.0(transitive)

• - Removed@neo4j-cypher/language-support@2.0.0-canary-dbe560f(transitive)

• Updated@codemirror/autocomplete@^6.17.0

• Updated@codemirror/commands@^6.6.0

• Updated@codemirror/language@^6.10.2

• Updated@codemirror/lint@^6.8.1

• Updated@codemirror/search@^6.5.6

• Updated@codemirror/state@^6.4.1

• Updated@codemirror/view@^6.29.1

• Updated@neo4j-cypher/language-support@2.0.0-canary-dcbe67d