@neo4j-cypher/react-codemirror 2.0.0-next.26 → 2.0.0-next.27

package/package.json

@@ -17,7 +17,7 @@
     "codemirror",
     "codemirror 6"
   ],
-  "version": "2.0.0-next.26",
+  "version": "2.0.0-next.27",
   "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts",
   "type": "module",
@@ -34,13 +34,13 @@
     "node": ">=22.15.0"
   },
   "dependencies": {
-    "@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",
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/language": "^6.11.2",
+    "@codemirror/lint": "^6.8.5",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.1",
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.1.3",
     "@types/prismjs": "^1.26.3",
@@ -50,14 +50,14 @@
     "prismjs": "^1.29.0",
     "style-mod": "^4.1.2",
     "vscode-languageserver-types": "^3.17.3",
-    "workerpool": "^9.0.4",
-    "@neo4j-cypher/language-support": "2.0.0-next.23",
-    "@neo4j-cypher/lint-worker": "1.10.1-next.0"
+    "workerpool": "^9.3.3",
+    "@neo4j-cypher/language-support": "2.0.0-next.24",
+    "@neo4j-cypher/lint-worker": "1.10.1-next.1"
   },
   "devDependencies": {
     "@neo4j-ndl/base": "^3.2.10",
-    "@playwright/experimental-ct-react": "^1.51.1",
-    "@playwright/test": "^1.51.1",
+    "@playwright/experimental-ct-react": "^1.54.2",
+    "@playwright/test": "^1.54.2",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -65,7 +65,7 @@
     "copyfiles": "^2.4.1",
     "jsdom": "^24.1.1",
     "lodash": "^4.17.21",
-    "playwright": "^1.51.1",
+    "playwright": "^1.54.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "vite": "^4.5.10"

package/src/CypherEditor.tsx

@@ -13,10 +13,7 @@ import {
   placeholder,
   ViewUpdate,
 } from '@codemirror/view';
-import {
-  formatQuery,
-  type DbSchema,
-} from '@neo4j-cypher/language-support';
+import { formatQuery, type DbSchema } from '@neo4j-cypher/language-support';
 import debounce from 'lodash.debounce';
 import { Component, createRef } from 'react';
 import { DEBOUNCE_TIME } from './constants';
@@ -28,6 +25,7 @@ import { cypher, CypherConfig } from './lang-cypher/langCypher';
 import { cleanupWorkers } from './lang-cypher/syntaxValidation';
 import { basicNeo4jSetup } from './neo4jSetup';
 import { getThemeExtension } from './themes';
+import { richClipboardCopier } from './richClipboardCopier';
 
 type DomEventHandlers = Parameters<typeof EditorView.domEventHandlers>[0];
 export interface CypherEditorProps {
@@ -181,7 +179,9 @@ export interface CypherEditorProps {
 const format = (view: EditorView): void => {
   try {
     const doc = view.state.doc.toString();
-    const { formattedQuery, newCursorPos } = formatQuery(doc, { cursorPosition: view.state.selection.main.anchor });
+    const { formattedQuery, newCursorPos } = formatQuery(doc, {
+      cursorPosition: view.state.selection.main.anchor,
+    });
     view.dispatch({
       changes: {
         from: 0,
@@ -333,7 +333,10 @@ export class CypherEditor extends Component<
         to: currentCmValue.length,
         insert: normalizedValue,
       },
-      selection: { anchor: normalizedValue.length, head: normalizedValue.length },
+      selection: {
+        anchor: normalizedValue.length,
+        head: normalizedValue.length,
+      },
     });
     this.editorView.current?.focus();
   }
@@ -354,11 +357,11 @@ export class CypherEditor extends Component<
 
   private debouncedOnChange = this.props.onChange
     ? debounce(
-      ((value, viewUpdate) => {
-        this.props.onChange(value, viewUpdate);
-      }) satisfies CypherEditorProps['onChange'],
-      DEBOUNCE_TIME,
-    )
+        ((value, viewUpdate) => {
+          this.props.onChange(value, viewUpdate);
+        }) satisfies CypherEditorProps['onChange'],
+        DEBOUNCE_TIME,
+      )
     : undefined;
 
   componentDidMount(): void {
@@ -398,18 +401,18 @@ export class CypherEditor extends Component<
 
     const changeListener = this.debouncedOnChange
       ? [
-        EditorView.updateListener.of((upt: ViewUpdate) => {
-          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);
-          }
-        }),
-      ]
+          EditorView.updateListener.of((upt: ViewUpdate) => {
+            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({
@@ -422,6 +425,7 @@ export class CypherEditor extends Component<
             ...extraKeybindings,
           ]),
         ),
+        richClipboardCopier,
         historyNavigation(this.props),
         basicNeo4jSetup(this.props),
         themeCompartment.of(themeExtension),
@@ -445,8 +449,8 @@ export class CypherEditor extends Component<
         ),
         this.props.ariaLabel
           ? EditorView.contentAttributes.of({
-            'aria-label': this.props.ariaLabel,
-          })
+              'aria-label': this.props.ariaLabel,
+            })
           : [],
       ],
       doc: this.props.value,
@@ -494,7 +498,7 @@ export class CypherEditor extends Component<
     const didChangeTheme =
       prevProps.theme !== this.props.theme ||
       prevProps.overrideThemeBackgroundColor !==
-      this.props.overrideThemeBackgroundColor;
+        this.props.overrideThemeBackgroundColor;
 
     if (didChangeTheme) {
       this.editorView.current.dispatch({

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -204,14 +204,13 @@ test('Strikethroughs are shown for deprecated functions', async ({
   mount,
 }) => {
   const editorPage = new CypherEditorPage(page);
-  const query = `RETURN id()`;
+  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.');
-  await editorPage.checkErrorMessage('id', `Insufficient parameters for function 'id'`);
 });
 
 test('Strikethroughs are shown for deprecated procedures', async ({
@@ -219,7 +218,7 @@ test('Strikethroughs are shown for deprecated procedures', async ({
   mount,
 }) => {
   const editorPage = new CypherEditorPage(page);
-  const query = `CALL apoc.create.uuids()`;
+  const query = `CALL apoc.create.uuids(5)`;
 
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
   await expect(