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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @neo4j-cypher/react-codemirror
 
+## 2.0.0-next.5
+
+### Patch Changes
+
+- 8cc77c6: Add support for console commands
+- 1e210cb: Moves semantic analysis to a separate worker file
+- Updated dependencies [8cc77c6]
+- Updated dependencies [1e210cb]
+- Updated dependencies [f6d20b2]
+  - @neo4j-cypher/language-support@2.0.0-next.3
+
 ## 2.0.0-next.4
 
 ### Patch Changes

package/dist/{types/CypherEditor.d.ts → CypherEditor.d.ts}

@@ -38,6 +38,10 @@ export interface CypherEditorProps {
      * @default false
      */
     autofocus?: boolean;
+    /**
+     * Where to place the cursor in the query. Cannot be enabled at the same time than autofocus
+     */
+    offset?: number;
     /**
      * Whether the editor should wrap lines.
      *
@@ -78,7 +82,10 @@ export interface CypherEditorProps {
      */
     onChange?(value: string, viewUpdate: ViewUpdate): void;
 }
-export declare class CypherEditor extends Component<CypherEditorProps> {
+type CypherEditorState = {
+    cypherSupportEnabled: boolean;
+};
+export declare class CypherEditor extends Component<CypherEditorProps, CypherEditorState> {
     /**
      * The codemirror editor container.
      */
@@ -106,8 +113,10 @@ export declare class CypherEditor extends Component<CypherEditorProps> {
      */
     setValueAndFocus(value?: string): void;
     static defaultProps: CypherEditorProps;
+    private debouncedOnChange;
     componentDidMount(): void;
     componentDidUpdate(prevProps: CypherEditorProps): void;
     componentWillUnmount(): void;
     render(): React.ReactNode;
 }
+export {};

package/dist/CypherEditor.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Annotation, Compartment, EditorState, } from '@codemirror/state';
+import { EditorView, keymap, lineNumbers, } from '@codemirror/view';
+import debounce from 'lodash.debounce';
+import { Component, createRef } from 'react';
+import { replaceHistory, replMode as historyNavigation, } from './history-navigation';
+import { cypher } from './lang-cypher/lang-cypher';
+import { cleanupWorkers } from './lang-cypher/syntax-validation';
+import { basicNeo4jSetup } from './neo4j-setup';
+import { getThemeExtension } from './themes';
+const executeKeybinding = (onExecute) => onExecute
+    ? [
+        {
+            key: 'Ctrl-Enter',
+            mac: 'Mod-Enter',
+            preventDefault: true,
+            run: (view) => {
+                const doc = view.state.doc.toString();
+                if (doc.trim() !== '') {
+                    onExecute(doc);
+                }
+                return true;
+            },
+        },
+    ]
+    : [];
+const themeCompartment = new Compartment();
+const keyBindingCompartment = new Compartment();
+const ExternalEdit = Annotation.define();
+export class CypherEditor extends Component {
+    /**
+     * The codemirror editor container.
+     */
+    editorContainer = createRef();
+    /**
+     * The codemirror editor state.
+     */
+    editorState = createRef();
+    /**
+     * The codemirror editor view.
+     */
+    editorView = createRef();
+    schemaRef = createRef();
+    /**
+     * Focus the editor
+     */
+    focus() {
+        this.editorView.current?.focus();
+    }
+    /**
+     * Move the cursor to the supplied position.
+     * For example, to move the cursor to the end of the editor, use `value.length`
+     */
+    updateCursorPosition(position) {
+        this.editorView.current?.dispatch({
+            selection: { anchor: position, head: position },
+        });
+    }
+    /**
+     * Externally set the editor value and focus the editor.
+     */
+    setValueAndFocus(value = '') {
+        const currentCmValue = this.editorView.current.state?.doc.toString() ?? '';
+        this.editorView.current.dispatch({
+            changes: {
+                from: 0,
+                to: currentCmValue.length,
+                insert: value,
+            },
+            selection: { anchor: value.length, head: value.length },
+        });
+        this.editorView.current?.focus();
+    }
+    static defaultProps = {
+        lint: true,
+        schema: {},
+        overrideThemeBackgroundColor: false,
+        lineWrap: false,
+        extraKeybindings: [],
+        history: [],
+        theme: 'light',
+    };
+    debouncedOnChange = this.props.onChange
+        ? debounce(this.props.onChange, 200)
+        : undefined;
+    componentDidMount() {
+        const { theme, extraKeybindings, lineWrap, overrideThemeBackgroundColor, schema, lint, onExecute, } = this.props;
+        this.schemaRef.current = {
+            schema,
+            lint,
+            useLightVersion: false,
+            setUseLightVersion: (newVal) => {
+                if (this.schemaRef.current !== undefined) {
+                    this.schemaRef.current.useLightVersion = newVal;
+                }
+            },
+        };
+        const themeExtension = getThemeExtension(theme, overrideThemeBackgroundColor);
+        const changeListener = this.debouncedOnChange
+            ? [
+                EditorView.updateListener.of((upt) => {
+                    const wasUserEdit = !upt.transactions.some((tr) => tr.annotation(ExternalEdit));
+                    if (upt.docChanged && wasUserEdit) {
+                        const doc = upt.state.doc;
+                        const value = doc.toString();
+                        this.debouncedOnChange(value, upt);
+                    }
+                }),
+            ]
+            : [];
+        this.editorState.current = EditorState.create({
+            extensions: [
+                keyBindingCompartment.of(keymap.of([...executeKeybinding(onExecute), ...extraKeybindings])),
+                historyNavigation(this.props),
+                basicNeo4jSetup(),
+                themeCompartment.of(themeExtension),
+                changeListener,
+                cypher(this.schemaRef.current),
+                lineWrap ? EditorView.lineWrapping : [],
+                lineNumbers({
+                    formatNumber: (a, state) => {
+                        if (state.doc.lines === 1 && this.props.prompt !== undefined) {
+                            return this.props.prompt;
+                        }
+                        return a.toString();
+                    },
+                }),
+            ],
+            doc: this.props.value,
+        });
+        this.editorView.current = new EditorView({
+            state: this.editorState.current,
+            parent: this.editorContainer.current,
+        });
+        if (this.props.autofocus) {
+            this.focus();
+            if (this.props.value) {
+                this.updateCursorPosition(this.props.value.length);
+            }
+        }
+        else if (this.props.offset) {
+            this.updateCursorPosition(this.props.offset);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (!this.editorView.current) {
+            return;
+        }
+        // Handle externally set value
+        const currentCmValue = this.editorView.current.state?.doc.toString() ?? '';
+        if (this.props.value !== undefined && currentCmValue !== this.props.value) {
+            this.editorView.current.dispatch({
+                changes: {
+                    from: 0,
+                    to: currentCmValue.length,
+                    insert: this.props.value ?? '',
+                },
+                annotations: [ExternalEdit.of(true)],
+            });
+        }
+        // Handle theme change
+        const didChangeTheme = prevProps.theme !== this.props.theme ||
+            prevProps.overrideThemeBackgroundColor !==
+                this.props.overrideThemeBackgroundColor;
+        if (didChangeTheme) {
+            this.editorView.current.dispatch({
+                effects: themeCompartment.reconfigure(getThemeExtension(this.props.theme, this.props.overrideThemeBackgroundColor)),
+            });
+        }
+        if (prevProps.extraKeybindings !== this.props.extraKeybindings ||
+            prevProps.onExecute !== this.props.onExecute) {
+            this.editorView.current.dispatch({
+                effects: keyBindingCompartment.reconfigure(keymap.of([
+                    ...executeKeybinding(this.props.onExecute),
+                    ...this.props.extraKeybindings,
+                ])),
+            });
+        }
+        // This component rerenders on every keystroke and comparing the
+        // full lists of editor strings on every render could be expensive.
+        const didChangeHistoryEstimate = prevProps.history?.length !== this.props.history?.length ||
+            prevProps.history?.[0] !== this.props.history?.[0];
+        if (didChangeHistoryEstimate) {
+            this.editorView.current.dispatch({
+                effects: replaceHistory.of(this.props.history ?? []),
+            });
+        }
+        /*
+        The cypher configuration is a mutable object that is passed to the cypher language extension.
+        Much like how the schema based completions work in the official sql language extension.
+        https://github.com/codemirror/lang-sql/blob/4b7b2564dff7cdb1a15f8ccd08142f2cc8a0006f/src/sql.ts#L178C17-L178C18
+        */
+        this.schemaRef.current.schema = this.props.schema;
+        this.schemaRef.current.lint = this.props.lint;
+    }
+    componentWillUnmount() {
+        this.editorView.current?.destroy();
+        cleanupWorkers();
+    }
+    render() {
+        const { className, theme } = this.props;
+        const themeClass = typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';
+        return (_jsx("div", { ref: this.editorContainer, className: `${themeClass}${className ? ` ${className}` : ''}` }));
+    }
+}
+//# sourceMappingURL=CypherEditor.js.map

package/dist/CypherEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CypherEditor.js","sourceRoot":"","sources":["../src/CypherEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,WAAW,EACX,WAAW,GAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,UAAU,EAEV,MAAM,EACN,WAAW,GAEZ,MAAM,kBAAkB,CAAC;AAE1B,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,cAAc,EACd,QAAQ,IAAI,iBAAiB,GAC9B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAgB,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAmF7C,MAAM,iBAAiB,GAAG,CAAC,SAAiC,EAAE,EAAE,CAC9D,SAAS;IACP,CAAC,CAAC;QACE;YACE,GAAG,EAAE,YAAY;YACjB,GAAG,EAAE,WAAW;YAChB,cAAc,EAAE,IAAI;YACpB,GAAG,EAAE,CAAC,IAAgB,EAAE,EAAE;gBACxB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;gBACtC,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBACrB,SAAS,CAAC,GAAG,CAAC,CAAC;iBAChB;gBAED,OAAO,IAAI,CAAC;YACd,CAAC;SACF;KACF;IACH,CAAC,CAAC,EAAE,CAAC;AAET,MAAM,gBAAgB,GAAG,IAAI,WAAW,EAAE,CAAC;AAC3C,MAAM,qBAAqB,GAAG,IAAI,WAAW,EAAE,CAAC;AAGhD,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,EAAW,CAAC;AAElD,MAAM,OAAO,YAAa,SAAQ,SAGjC;IACC;;OAEG;IACH,eAAe,GAAoC,SAAS,EAAE,CAAC;IAC/D;;OAEG;IACH,WAAW,GAAwC,SAAS,EAAE,CAAC;IAC/D;;OAEG;IACH,UAAU,GAAuC,SAAS,EAAE,CAAC;IACrD,SAAS,GAAyC,SAAS,EAAE,CAAC;IAEtE;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACnC,CAAC;IAED;;;OAGG;IACH,oBAAoB,CAAC,QAAgB;QACnC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC;YAChC,SAAS,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;SAChD,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,gBAAgB,CAAC,KAAK,GAAG,EAAE;QACzB,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC;QAC3E,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC;YAC/B,OAAO,EAAE;gBACP,IAAI,EAAE,CAAC;gBACP,EAAE,EAAE,cAAc,CAAC,MAAM;gBACzB,MAAM,EAAE,KAAK;aACd;YACD,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE;SACxD,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACnC,CAAC;IAED,MAAM,CAAC,YAAY,GAAsB;QACvC,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,EAAE;QACV,4BAA4B,EAAE,KAAK;QACnC,QAAQ,EAAE,KAAK;QACf,gBAAgB,EAAE,EAAE;QACpB,OAAO,EAAE,EAAE;QACX,KAAK,EAAE,OAAO;KACf,CAAC;IAEM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ;QAC7C,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC;QACpC,CAAC,CAAC,SAAS,CAAC;IAEd,iBAAiB;QACf,MAAM,EACJ,KAAK,EACL,gBAAgB,EAChB,QAAQ,EACR,4BAA4B,EAC5B,MAAM,EACN,IAAI,EACJ,SAAS,GACV,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG;YACvB,MAAM;YACN,IAAI;YACJ,eAAe,EAAE,KAAK;YACtB,kBAAkB,EAAE,CAAC,MAAM,EAAE,EAAE;gBAC7B,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,KAAK,SAAS,EAAE;oBACxC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,eAAe,GAAG,MAAM,CAAC;iBACjD;YACH,CAAC;SACF,CAAC;QAEF,MAAM,cAAc,GAAG,iBAAiB,CACtC,KAAK,EACL,4BAA4B,CAC7B,CAAC;QAEF,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB;YAC3C,CAAC,CAAC;gBACE,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,GAAe,EAAE,EAAE;oBAC/C,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAChD,EAAE,CAAC,UAAU,CAAC,YAAY,CAAC,CAC5B,CAAC;oBAEF,IAAI,GAAG,CAAC,UAAU,IAAI,WAAW,EAAE;wBACjC,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;wBAC1B,MAAM,KAAK,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;wBAC7B,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;qBACpC;gBACH,CAAC,CAAC;aACH;YACH,CAAC,CAAC,EAAE,CAAC;QAEP,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,MAAM,CAAC;YAC5C,UAAU,EAAE;gBACV,qBAAqB,CAAC,EAAE,CACtB,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,iBAAiB,CAAC,SAAS,CAAC,EAAE,GAAG,gBAAgB,CAAC,CAAC,CAClE;gBACD,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;gBAC7B,eAAe,EAAE;gBACjB,gBAAgB,CAAC,EAAE,CAAC,cAAc,CAAC;gBACnC,cAAc;gBACd,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;gBAC9B,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE;gBAEvC,WAAW,CAAC;oBACV,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;wBACzB,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE;4BAC5D,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;yBAC1B;wBAED,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;oBACtB,CAAC;iBACF,CAAC;aACH;YACD,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;SACtB,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,IAAI,UAAU,CAAC;YACvC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO;YAC/B,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,OAAO;SACrC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;YACxB,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;gBACpB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aACpD;SACF;aAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YAC5B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAC9C;IACH,CAAC;IAED,kBAAkB,CAAC,SAA4B;QAC7C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YAC5B,OAAO;SACR;QAED,8BAA8B;QAC9B,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC;QAE3E,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,cAAc,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACzE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC;gBAC/B,OAAO,EAAE;oBACP,IAAI,EAAE,CAAC;oBACP,EAAE,EAAE,cAAc,CAAC,MAAM;oBACzB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE;iBAC/B;gBACD,WAAW,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;aACrC,CAAC,CAAC;SACJ;QAED,sBAAsB;QACtB,MAAM,cAAc,GAClB,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK;YACpC,SAAS,CAAC,4BAA4B;gBACpC,IAAI,CAAC,KAAK,CAAC,4BAA4B,CAAC;QAE5C,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC;gBAC/B,OAAO,EAAE,gBAAgB,CAAC,WAAW,CACnC,iBAAiB,CACf,IAAI,CAAC,KAAK,CAAC,KAAK,EAChB,IAAI,CAAC,KAAK,CAAC,4BAA4B,CACxC,CACF;aACF,CAAC,CAAC;SACJ;QAED,IACE,SAAS,CAAC,gBAAgB,KAAK,IAAI,CAAC,KAAK,CAAC,gBAAgB;YAC1D,SAAS,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,EAC5C;YACA,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC;gBAC/B,OAAO,EAAE,qBAAqB,CAAC,WAAW,CACxC,MAAM,CAAC,EAAE,CAAC;oBACR,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;oBAC1C,GAAG,IAAI,CAAC,KAAK,CAAC,gBAAgB;iBAC/B,CAAC,CACH;aACF,CAAC,CAAC;SACJ;QAED,gEAAgE;QAChE,mEAAmE;QACnE,MAAM,wBAAwB,GAC5B,SAAS,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM;YACxD,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QAErD,IAAI,wBAAwB,EAAE;YAC5B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC;gBAC/B,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;aACrD,CAAC,CAAC;SACJ;QAED;;;;UAIE;QACF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAClD,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;IAChD,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC;QACnC,cAAc,EAAE,CAAC;IACnB,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAExC,MAAM,UAAU,GACd,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;QAE/D,OAAO,CACL,cACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,SAAS,EAAE,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,GAC7D,CACH,CAAC;IACJ,CAAC"}

package/dist/e2e_tests/auto-completion.spec.js

@@ -0,0 +1,129 @@
+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('hello world end 2 end test', async ({ mount }) => {
+    const component = await mount(_jsx(CypherEditor, { value: "hello world" }));
+    await expect(component).toContainText('hello world');
+    await component.update(_jsx(CypherEditor, { value: "RETURN 123" }));
+    await expect(component).toContainText('RETURN 123');
+});
+test('can complete in the middle of statement', async ({ mount, page }) => {
+    const component = await mount(_jsx(CypherEditor, { value: `MATCH ()
+WHER true
+RETURN n;` }));
+    // Move into the statement and trigger autocompletion
+    const textField = page.getByRole('textbox');
+    await textField.focus();
+    await textField.press('ArrowDown');
+    await textField.press('ArrowRight');
+    await textField.press('ArrowRight');
+    await textField.press('ArrowRight');
+    await textField.press('ArrowRight');
+    await textField.press('Control+ ');
+    await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
+    await page.locator('.cm-tooltip-autocomplete').getByText('WHERE').click();
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    await expect(component).toContainText('WHERE true');
+});
+test('get completions when typing and can accept completions with tab', async ({ mount, page, }) => {
+    const component = await mount(_jsx(CypherEditor, {}));
+    const textField = page.getByRole('textbox');
+    await textField.fill('RETU');
+    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 }) => {
+    const component = await mount(_jsx(CypherEditor, { schema: {
+            labels: ['Pokemon'],
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('MATCH (n :P');
+    await page.locator('.cm-tooltip-autocomplete').getByText('Pokemon').click();
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    await expect(component).toContainText('MATCH (n :Pokemon');
+});
+test('can update dbschema', async ({ mount, page }) => {
+    const component = await mount(_jsx(CypherEditor, { schema: {
+            labels: ['Pokemon'],
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('MATCH (n :');
+    await expect(page.locator('.cm-tooltip-autocomplete').getByText('Pokemon')).toBeVisible();
+    await textField.press('Escape');
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    await component.update(_jsx(CypherEditor, { schema: {
+            labels: ['Pokemon', 'Digimon'],
+        } }));
+    await textField.press('Control+ ');
+    await expect(page.locator('.cm-tooltip-autocomplete').getByText('Pokemon')).toBeVisible();
+    await expect(page.locator('.cm-tooltip-autocomplete').getByText('Digimon')).toBeVisible();
+});
+test('can complete rel types', async ({ page, mount }) => {
+    const component = await mount(_jsx(CypherEditor, { schema: {
+            relationshipTypes: ['KNOWS'],
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('MATCH (n)-[:');
+    await page.locator('.cm-tooltip-autocomplete').getByText('KNOWS').click();
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    await expect(component).toContainText('MATCH (n)-[:KNOWS');
+});
+test('can complete functions', async ({ page, mount }) => {
+    const component = await mount(_jsx(CypherEditor, { schema: {
+            functionSignatures: {
+                function123: { label: 'function123', documentation: 'no docs' },
+            },
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('RETURN func');
+    await page
+        .locator('.cm-tooltip-autocomplete')
+        .getByText('function123')
+        .click();
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    await expect(component).toContainText('RETURN function123');
+});
+test('can complete procedures', async ({ page, mount }) => {
+    const component = await mount(_jsx(CypherEditor, { schema: {
+            procedureSignatures: {
+                'db.ping': { label: 'db.ping', documentation: 'no docs' },
+            },
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('CALL d');
+    await page.locator('.cm-tooltip-autocomplete').getByText('db.ping').click();
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    await expect(component).toContainText('CALL db.ping');
+});
+test('can complete parameters', async ({ page, mount }) => {
+    const component = await mount(_jsx(CypherEditor, { schema: {
+            parameters: { parameter: { type: 'string' } },
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('RETURN $p');
+    await page.locator('.cm-tooltip-autocomplete').getByText('parameter').click();
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    await expect(component).toContainText('RETURN $parameter');
+});
+test('completes allShortestPaths correctly', async ({ page, mount }) => {
+    await mount(_jsx(CypherEditor, { schema: {
+            parameters: { parameter: { type: 'string' } },
+        } }));
+    const textField = page.getByRole('textbox');
+    // The first query contains errors on purpose so the
+    // syntax errors get triggered before the auto-completion
+    await textField.fill('MATCH (n) REURN n; MATCH a');
+    await page
+        .locator('.cm-tooltip-autocomplete')
+        .getByText('allShortestPaths')
+        .click();
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    expect(await textField.textContent()).toEqual('MATCH (n) REURN n; MATCH allShortestPaths');
+});
+//# sourceMappingURL=auto-completion.spec.js.map

package/dist/e2e_tests/auto-completion.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-completion.spec.js","sourceRoot":"","sources":["../../src/e2e_tests/auto-completion.spec.tsx"],"names":[],"mappings":"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"}

package/dist/e2e_tests/e2e-utils.js

@@ -0,0 +1,52 @@
+import { expect } from '@playwright/experimental-ct-react';
+export class CypherEditorPage {
+    page;
+    constructor(page) {
+        this.page = page;
+    }
+    getEditor() {
+        return this.page.getByRole('textbox');
+    }
+    async focusEditor() {
+        await this.getEditor().focus();
+    }
+    editorBackgroundIsUnset() {
+        return this.page.locator('.cm-editor').evaluate((e) => {
+            const browserDefaultBackgroundColor = 'rgba(0, 0, 0, 0)';
+            return (window.getComputedStyle(e).getPropertyValue('background-color') ===
+                browserDefaultBackgroundColor);
+        });
+    }
+    getHexColorOfLocator(locator) {
+        return locator.evaluate((e) => {
+            // https://stackoverflow.com/questions/49974145/how-to-convert-rgba-to-hex-color-code-using-javascript
+            function RGBAToHexA(rgba, forceRemoveAlpha = false) {
+                return ('#' +
+                    rgba
+                        .replace(/^rgba?\(|\s+|\)$/g, '')
+                        .split(',')
+                        .filter((string, index) => !forceRemoveAlpha || index !== 3)
+                        .map((string) => parseFloat(string))
+                        .map((number, index) => index === 3 ? Math.round(number * 255) : number)
+                        .map((number) => number.toString(16))
+                        .map((string) => (string.length === 1 ? '0' + string : string))
+                        .join(''));
+            }
+            const color = window.getComputedStyle(e).getPropertyValue('color');
+            return RGBAToHexA(color);
+        });
+    }
+    async checkErrorMessage(queryChunk, expectedMsg) {
+        return this.checkNotificationMessage('error', queryChunk, expectedMsg);
+    }
+    async checkWarningMessage(queryChunk, expectedMsg) {
+        return this.checkNotificationMessage('warning', queryChunk, expectedMsg);
+    }
+    async checkNotificationMessage(type, queryChunk, expectedMsg) {
+        await expect(this.page.locator('.cm-lintRange-' + type).last()).toBeVisible({ timeout: 2000 });
+        await this.page.getByText(queryChunk, { exact: true }).hover();
+        await expect(this.page.locator('.cm-tooltip-hover').last()).toBeVisible();
+        await expect(this.page.getByText(expectedMsg)).toBeVisible();
+    }
+}
+//# sourceMappingURL=e2e-utils.js.map

package/dist/e2e_tests/e2e-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"e2e-utils.js","sourceRoot":"","sources":["../../src/e2e_tests/e2e-utils.ts"],"names":[],"mappings":"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"}

package/dist/e2e_tests/extra-keybindings.spec.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2e-utils';
+test.use({ viewport: { width: 500, height: 500 } });
+test('can add extra keybinding statically', async ({ mount, page }) => {
+    const editorPage = new CypherEditorPage(page);
+    let hasRun = false;
+    const component = await mount(_jsx(CypherEditor, { extraKeybindings: [
+            {
+                key: 'a',
+                preventDefault: true,
+                run: () => {
+                    hasRun = true;
+                    return true;
+                },
+            },
+        ] }));
+    await editorPage.getEditor().press('a');
+    await expect(component).not.toHaveText('a');
+    expect(hasRun).toBe(true);
+});
+test('can add extra keybinding dymanically', async ({ mount, page }) => {
+    const editorPage = new CypherEditorPage(page);
+    let hasRun = false;
+    const component = await mount(_jsx(CypherEditor, {}));
+    await editorPage.getEditor().press('a');
+    await editorPage.getEditor().press('Escape');
+    await expect(component).toContainText('a');
+    await component.update(_jsx(CypherEditor, { extraKeybindings: [
+            {
+                key: 'a',
+                preventDefault: true,
+                run: () => {
+                    hasRun = true;
+                    return true;
+                },
+            },
+        ] }));
+    await editorPage.getEditor().press('a');
+    await expect(component).not.toContainText('aa');
+    expect(hasRun).toBe(true);
+});
+//# sourceMappingURL=extra-keybindings.spec.js.map

package/dist/e2e_tests/extra-keybindings.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extra-keybindings.spec.js","sourceRoot":"","sources":["../../src/e2e_tests/extra-keybindings.spec.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC;AAEpD,IAAI,CAAC,qCAAqC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACpE,MAAM,UAAU,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC9C,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,MAAM,SAAS,GAAG,MAAM,KAAK,CAC3B,KAAC,YAAY,IACX,gBAAgB,EAAE;YAChB;gBACE,GAAG,EAAE,GAAG;gBACR,cAAc,EAAE,IAAI;gBACpB,GAAG,EAAE,GAAG,EAAE;oBACR,MAAM,GAAG,IAAI,CAAC;oBACd,OAAO,IAAI,CAAC;gBACd,CAAC;aACF;SACF,GACD,CACH,CAAC;IAEF,MAAM,UAAU,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAExC,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,sCAAsC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACrE,MAAM,UAAU,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC9C,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,MAAM,SAAS,GAAG,MAAM,KAAK,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC;IAChD,MAAM,UAAU,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,UAAU,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAE3C,MAAM,SAAS,CAAC,MAAM,CACpB,KAAC,YAAY,IACX,gBAAgB,EAAE;YAChB;gBACE,GAAG,EAAE,GAAG;gBACR,cAAc,EAAE,IAAI;gBACpB,GAAG,EAAE,GAAG,EAAE;oBACR,MAAM,GAAG,IAAI,CAAC;oBACd,OAAO,IAAI,CAAC;gBACd,CAAC;aACF;SACF,GACD,CACH,CAAC;IAEF,MAAM,UAAU,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACxC,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC"}

package/dist/e2e_tests/history-navigation.spec.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2e-utils';
+test.use({ viewport: { width: 500, height: 500 } });
+test('respects preloaded history', async ({ page, mount }) => {
+    const editorPage = new CypherEditorPage(page);
+    const initialValue = 'MATCH (n) RETURN n;';
+    await mount(_jsx(CypherEditor, { value: initialValue, history: ['first', 'second'], onExecute: () => {
+            /* needed to turn on history movements */
+        } }));
+    await editorPage.getEditor().press('ArrowUp');
+    await expect(page.getByText('first')).toBeVisible();
+    // First arrow up is to get to start of line
+    await editorPage.getEditor().press('ArrowUp');
+    await editorPage.getEditor().press('ArrowUp');
+    await expect(page.getByText('second')).toBeVisible();
+    await editorPage.getEditor().press('ArrowDown');
+    await expect(page.getByText('first')).toBeVisible();
+    await editorPage.getEditor().press('ArrowDown');
+    await expect(page.getByText(initialValue)).toBeVisible();
+});
+test('can execute queries and see them in history', async ({ page, mount }) => {
+    const editorPage = new CypherEditorPage(page);
+    const initialValue = `MATCH (n)
+RETURN n;`;
+    const history = [];
+    const onExecute = (cmd) => {
+        history.unshift(cmd);
+    };
+    const editor = await mount(_jsx(CypherEditor, { value: initialValue, history: history, onExecute: onExecute }));
+    // Execute 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');
+    expect(history.length).toBe(1);
+    // Ensure only enter doesn't execute query
+    await editorPage.getEditor().fill('multiline');
+    await editorPage.getEditor().press('Enter');
+    await editorPage.getEditor().press('Enter');
+    await editorPage.getEditor().press('Enter');
+    await editorPage.getEditor().press('Enter');
+    await page.keyboard.type('entry');
+    expect(history.length).toBe(1);
+    await editorPage.getEditor().press('Control+Enter');
+    await editorPage.getEditor().press('Meta+Enter');
+    expect(history.length).toBe(2);
+    // rerender with new history
+    await editor.update(_jsx(CypherEditor, { value: initialValue, history: history, onExecute: onExecute }));
+    // type a new query and make sure it's not lost when navigating history
+    await editorPage.getEditor().fill('draft');
+    await expect(page.getByText('draft')).toBeVisible();
+    expect(history.length).toBe(2);
+    // Navigate to the top of the editor before navigating history
+    await editorPage.getEditor().press('ArrowLeft');
+    await editorPage.getEditor().press('ArrowLeft');
+    await editorPage.getEditor().press('ArrowLeft');
+    await editorPage.getEditor().press('ArrowLeft');
+    await editorPage.getEditor().press('ArrowLeft');
+    await editorPage.getEditor().press('ArrowUp');
+    // Ensure moving down in the editor doesn't navigate history
+    await expect(page.getByText('multiline')).toBeVisible();
+    // arrow movements don't matter until bottom is hit
+    await editorPage.getEditor().press('ArrowUp');
+    await editorPage.getEditor().press('ArrowUp');
+    await editorPage.getEditor().press('ArrowDown');
+    await editorPage.getEditor().press('ArrowDown');
+    // editor still multiline
+    await expect(page.getByText('multiline')).toBeVisible();
+    // until you hit the end where have the draft we created earlier
+    await editorPage.getEditor().press('ArrowDown');
+    await expect(page.getByText('draft')).toBeVisible();
+});
+test('can navigate with cmd+up as well', async ({ page, mount }) => {
+    const editorPage = new CypherEditorPage(page);
+    const isMac = process.platform === 'darwin';
+    const metaUp = isMac ? 'Meta+ArrowUp' : 'Control+ArrowUp';
+    const metaDown = isMac ? 'Meta+ArrowDown' : 'Control+ArrowDown';
+    const initialValue = 'MATCH (n) RETURN n;';
+    await mount(_jsx(CypherEditor, { value: initialValue, history: [
+            `one
+multiline
+entry
+.`,
+            'second',
+        ], onExecute: () => {
+            /* needed to turn on history movements */
+        } }));
+    await editorPage.getEditor().press(metaUp);
+    await expect(page.getByText('multiline')).toBeVisible();
+    // Single meta up moves all the way to top of editor on mac
+    if (isMac) {
+        await editorPage.getEditor().press(metaUp);
+    }
+    else {
+        await editorPage.getEditor().press('ArrowUp');
+        await editorPage.getEditor().press('ArrowUp');
+        await editorPage.getEditor().press('ArrowUp');
+        await editorPage.getEditor().press('ArrowUp');
+    }
+    // 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();
+});
+test('test onExecute', async ({ page, mount }) => {
+    const editorPage = new CypherEditorPage(page);
+    const isMac = process.platform === 'darwin';
+    const execButton = isMac ? 'Meta+Enter' : 'Control+Enter';
+    const initialValue = 'MATCH (n) RETURN n;';
+    const history = [];
+    const onExecute = (cmd) => {
+        history.unshift(cmd);
+    };
+    const cypherEditor = await mount(_jsx(CypherEditor, { value: initialValue, onExecute: onExecute }));
+    await editorPage.getEditor().press(execButton);
+    expect(history).toEqual([initialValue]);
+    await editorPage.getEditor().press(execButton);
+    expect(history).toEqual([initialValue, initialValue]);
+    // can update onExecute
+    let newExecRan = false;
+    const newOnExecute = () => {
+        newExecRan = true;
+    };
+    await cypherEditor.update(_jsx(CypherEditor, { value: initialValue, onExecute: newOnExecute }));
+    await editorPage.getEditor().press(execButton);
+    expect(newExecRan).toEqual(true);
+    // old value should still be only 2
+    expect(history).toEqual([initialValue, initialValue]);
+});
+//# sourceMappingURL=history-navigation.spec.js.map