@neo4j-cypher/react-codemirror 2.0.0-next.24 → 2.0.0-next.25

package/package.json

@@ -17,7 +17,7 @@
     "codemirror",
     "codemirror 6"
   ],
-  "version": "2.0.0-next.24",
+  "version": "2.0.0-next.25",
   "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts",
   "type": "module",
@@ -51,8 +51,8 @@
     "style-mod": "^4.1.2",
     "vscode-languageserver-types": "^3.17.3",
     "workerpool": "^9.0.4",
-    "@neo4j-cypher/language-support": "2.0.0-next.21",
-    "@neo4j-cypher/lint-worker": "2025.4.1-next.0"
+    "@neo4j-cypher/language-support": "2.0.0-next.22",
+    "@neo4j-cypher/lint-worker": "0.1.0-next.0"
   },
   "devDependencies": {
     "@neo4j-ndl/base": "^3.2.10",

package/src/CypherEditor.test.tsx

@@ -198,3 +198,7 @@ test('rerender with prior external update should not cancel onChange', async ()
   expect(getEditorValue()).toBe('internal update');
   expect(value).toBe('internal update');
 });
+
+test('setValueAndFocus should handle CRLF newline characters', () => {
+  expect(() => ref.current.setValueAndFocus('new value\r\nnew line')).not.toThrow();
+});

package/src/CypherEditor.tsx

@@ -15,7 +15,6 @@ import {
 } from '@codemirror/view';
 import {
   formatQuery,
-  _internalFeatureFlags,
   type DbSchema,
 } from '@neo4j-cypher/language-support';
 import debounce from 'lodash.debounce';
@@ -103,7 +102,6 @@ export interface CypherEditorProps {
    */
   featureFlags?: {
     consoleCommands?: boolean;
-    cypher25?: boolean;
   };
   /**
    * The schema to use for autocompletion and linting.
@@ -183,7 +181,7 @@ 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,
@@ -325,13 +323,17 @@ export class CypherEditor extends Component<
    */
   setValueAndFocus(value = '') {
     const currentCmValue = this.editorView.current.state?.doc.toString() ?? '';
+    // Normalize line endings to LF that CM expects.
+    // Prevents issues with inserted values that contain CRLF line endings.
+    // https://codemirror.net/docs/ref/?utm_source=chatgpt.com#state.EditorState^lineSeparator
+    const normalizedValue = value.replace(/\r\n/g, '\n');
     this.editorView.current.dispatch({
       changes: {
         from: 0,
         to: currentCmValue.length,
-        insert: value,
+        insert: normalizedValue,
       },
-      selection: { anchor: value.length, head: value.length },
+      selection: { anchor: normalizedValue.length, head: normalizedValue.length },
     });
     this.editorView.current?.focus();
   }
@@ -352,11 +354,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 {
@@ -373,8 +375,6 @@ export class CypherEditor extends Component<
       newLineOnEnter,
     } = this.props;
 
-    _internalFeatureFlags.cypher25 = featureFlags?.cypher25 ?? false;
-
     this.schemaRef.current = {
       schema,
       lint,
@@ -398,20 +398,20 @@ 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({
       extensions: [
         keyBindingCompartment.of(
@@ -445,8 +445,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 +494,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/autoCompletion.spec.tsx

@@ -526,7 +526,6 @@ test('completions depend on the Cypher version', async ({ page, mount }) => {
           },
         },
       }}
-      featureFlags={{ cypher25: true }}
     />,
   );
 
@@ -544,3 +543,29 @@ test('completions depend on the Cypher version', async ({ page, mount }) => {
     page.locator('.cm-tooltip-autocomplete').getByText('cypher25Function'),
   ).toBeVisible();
 });
+
+test('does not complete properties for non node / relationship variables', async ({ page, mount }) => {
+  await mount(
+    <CypherEditor
+    schema={{
+        propertyKeys: ["nodeProperty"]
+      }}
+    />
+  );
+
+  const textField = page.getByRole('textbox');
+  await textField.fill('MATCH (n) RETURN n.');
+
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('nodeProperty'),
+  ).toBeVisible();
+
+  await textField.fill('WITH 1 AS x RETURN x.');
+  // This could be flaky if the semantic analysis takes too long
+  await page.waitForTimeout(500)
+  await textField.press('Escape');
+  await textField.press('Control+ ');
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('nodeProperty')
+  ).not.toBeVisible();
+});

package/src/e2e_tests/e2eUtils.ts

@@ -89,7 +89,7 @@ export class CypherEditorPage {
        the second interaction on, we won't be able to see that second element
     */
     await this.page.mouse.move(0, 0);
-    // Make the sure the tooltip closed
+    // Make sure the tooltip closed
     await expect(
       this.page.locator('.cm-tooltip-hover').last(),
     ).not.toBeVisible();

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -425,7 +425,6 @@ test('Signature help depends on the Cypher version', async ({
           },
         },
       }}
-      featureFlags={{ cypher25: true }}
     />,
   );
 

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -194,8 +194,7 @@ test('Syntax highlighting works as expected with multiple separate linting messa
     editorPage.page.locator('.cm-deprecated-element').last(),
   ).toBeVisible({ timeout: 10000 });
   await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
-  await editorPage.checkWarningMessage('id', `The query used a deprecated function. ('id' has been replaced by 'elementId or an application-generated id')`);
-
+  await editorPage.checkWarningMessage('id', `The query used a deprecated function. ('id' has been replaced by 'elementId or consider using an application-generated id')`);
   await editorPage.checkWarningMessage('apoc.create.uuid', 'Function apoc.create.uuid is deprecated. Alternative: Neo4j randomUUID() function');
   await editorPage.checkErrorMessage('a', 'Variable `a` not defined');
 })
@@ -240,7 +239,6 @@ test('Syntax validation depends on the Cypher version', async ({
   await mount(
     <CypherEditor
       schema={testData.mockSchema}
-      featureFlags={{ cypher25: true }}
     />,
   );
 

package/src/lang-cypher/langCypher.ts

@@ -20,7 +20,6 @@ export type CypherConfig = {
   showSignatureTooltipBelow?: boolean;
   featureFlags?: {
     consoleCommands?: boolean;
-    cypher25?: boolean;
   };
   schema?: DbSchema;
   useLightVersion: boolean;