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

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,12 +181,12 @@ export interface CypherEditorProps {
 const format = (view: EditorView): void => {
   try {
     const doc = view.state.doc.toString();
-    const { formattedString, newCursorPos } = formatQuery(doc, view.state.selection.main.anchor);
+    const { formattedQuery, newCursorPos } = formatQuery(doc, { cursorPosition: view.state.selection.main.anchor });
     view.dispatch({
       changes: {
         from: 0,
         to: doc.length,
-        insert: formattedString,
+        insert: formattedQuery,
       },
       selection: { anchor: newCursorPos },
     });
@@ -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

@@ -82,16 +82,32 @@ export class CypherEditorPage {
     await expect(this.page.locator('.cm-tooltip-hover').last()).toBeVisible({
       timeout: 10000,
     });
-    await expect(this.page.getByText(expectedMsg)).toBeVisible();
+    await this.checkHoverMessage(expectedMsg, type);
     /* Return the mouse to the beginning of the query and
        This is because if for example we have an overlay with a 
        first interaction that covers the element we want to perform
        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();
   }
+
+  private async checkHoverMessage(
+    expectedMsg: string,
+    type: 'error' | 'warning',
+  ) {
+    const locator =
+      type === 'error'
+        ? 'li.cm-diagnostic.cm-diagnostic-error'
+        : 'li.cm-diagnostic.cm-diagnostic-warning';
+    const tooltips = await this.page.locator(locator).all();
+
+    const tooltipTexts = await Promise.all(
+      tooltips.map((t) => t.textContent()),
+    );
+    expect(tooltipTexts).toContain(expectedMsg);
+  }
 }

package/src/e2e_tests/performanceTest.spec.tsx

@@ -100,7 +100,7 @@ test('benchmarking & performance test session', async ({
 
   await editorPage.checkErrorMessage(
     'RETRN',
-    `Invalid input 'RETRN': expected a graph pattern, 'FOREACH', ',', 'ORDER BY', 'CALL', 'CREATE', 'LOAD CSV', 'DELETE', 'DETACH', 'FINISH', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REMOVE', 'RETURN', 'SET', 'SKIP', 'UNION', 'UNWIND', 'USE', 'USING', 'WHERE', 'WITH' or <EOF>`,
+    `Invalid input 'RETRN': expected a graph pattern, ',', 'ORDER BY', 'CALL', 'CREATE', 'LOAD CSV', 'DELETE', 'DETACH', 'FINISH', 'FOREACH', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REMOVE', 'RETURN', 'SET', 'SKIP', 'UNION', 'UNWIND', 'USE', 'USING', 'WHERE', 'WITH' or <EOF>`,
   );
 
   await editorPage

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

@@ -33,7 +33,7 @@ test('Can turn linting back on', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     'METCH',
-    `Invalid input 'METCH': expected 'FOREACH', 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
+    `Invalid input 'METCH': expected 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'FOREACH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
   );
 });
 
@@ -45,7 +45,7 @@ test('Syntactic errors are surfaced', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     'METCH',
-    `Invalid input 'METCH': expected 'FOREACH', 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
+    `Invalid input 'METCH': expected 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'FOREACH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
   );
 });
 
@@ -138,7 +138,7 @@ test('Semantic errors are correctly accumulated', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     '-1',
-    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+    "Invalid input. '-1' is not a valid value. Must be a positive integer.",
   );
 });
 
@@ -153,12 +153,12 @@ test('Multiline errors are correctly placed', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     'MATCH (n)',
-    'Query cannot conclude with MATCH (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD)',
+    'Query cannot conclude with MATCH (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD).',
   );
 
   await editorPage.checkErrorMessage(
     '-1',
-    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+    "Invalid input. '-1' is not a valid value. Must be a positive integer.",
   );
 });
 
@@ -178,10 +178,27 @@ test('Validation errors are correctly overlapped', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     '-1',
-    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+    "Invalid input. '-1' is not a valid value. Must be a positive integer.",
   );
 });
 
+test('Syntax highlighting works as expected with multiple separate linting messages', async ( {
+  page,
+  mount
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `MATCH (n)--(m) CALL (n) {RETURN id(n) AS b} RETURN apoc.create.uuid(), a`;
+
+  await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
+  await expect(
+    editorPage.page.locator('.cm-deprecated-element').last(),
+  ).toBeVisible({ timeout: 10000 });
+  await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
+  await editorPage.checkWarningMessage('id', `The query used a deprecated function. ('id' has been replaced by 'elementId or consider using an application-generated id')`);
+  await editorPage.checkWarningMessage('apoc.create.uuid', 'Function apoc.create.uuid is deprecated. Alternative: Neo4j randomUUID() function');
+  await editorPage.checkErrorMessage('a', 'Variable `a` not defined');
+})
+
 test('Strikethroughs are shown for deprecated functions', async ({
   page,
   mount,
@@ -194,6 +211,7 @@ test('Strikethroughs are shown for deprecated functions', async ({
     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 ({
@@ -210,7 +228,7 @@ test('Strikethroughs are shown for deprecated procedures', async ({
 
   await editorPage.checkWarningMessage(
     'apoc.create.uuids',
-    'Procedure apoc.create.uuids is deprecated.',
+    "Procedure apoc.create.uuids is deprecated. Alternative: Neo4j's randomUUID() function can be used as a replacement, for example: `UNWIND range(0,$count) AS row RETURN row, randomUUID() AS uuid`",
   );
 });
 
@@ -221,7 +239,6 @@ test('Syntax validation depends on the Cypher version', async ({
   await mount(
     <CypherEditor
       schema={testData.mockSchema}
-      featureFlags={{ cypher25: true }}
     />,
   );
 
@@ -231,13 +248,13 @@ test('Syntax validation depends on the Cypher version', async ({
 
   await editorPage.checkWarningMessage(
     'apoc.create.uuids',
-    'Procedure apoc.create.uuids is deprecated.',
+    "Procedure apoc.create.uuids is deprecated. Alternative: Neo4j's randomUUID() function can be used as a replacement, for example: `UNWIND range(0,$count) AS row RETURN row, randomUUID() AS uuid`",
   );
 
   await textField.fill('CYPHER 25 CALL apoc.create.uuids(5)');
 
   await editorPage.checkErrorMessage(
     'apoc.create.uuids',
-    'Procedure apoc.create.uuids is not present in the database.',
+    `Procedure apoc.create.uuids is not present in the database. Make sure you didn't misspell it or that it is available when you run this statement in your application`,
   );
 });

package/src/lang-cypher/createCypherTheme.ts

@@ -91,6 +91,7 @@ export const createCypherTheme = ({
     '& .cm-panels': {
       backgroundColor: settings.searchPanel.background,
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+      zIndex: 0,
     },
     '& .cm-completionLabel': {
       fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',

package/src/lang-cypher/langCypher.ts

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