@neo4j-cypher/react-codemirror 2.0.0-next.39 → 2.0.0-next.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-cypher/react-codemirror",
-  "version": "2.0.0-next.39",
+  "version": "2.0.0-next.40",
   "keywords": [
     "codemirror",
     "codemirror 6",
@@ -41,15 +41,13 @@
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.1.3",
     "@types/prismjs": "^1.26.3",
-    "@types/workerpool": "^6.4.7",
-    "fastest-levenshtein": "^1.0.16",
     "lodash.debounce": "^4.0.8",
     "prismjs": "^1.29.0",
     "style-mod": "^4.1.2",
     "vscode-languageserver-types": "^3.17.3",
     "workerpool": "^9.3.3",
-    "@neo4j-cypher/lint-worker": "1.10.1-next.13",
-    "@neo4j-cypher/language-support": "2.0.0-next.36"
+    "@neo4j-cypher/language-support": "2.0.0-next.37",
+    "@neo4j-cypher/lint-worker": "1.10.1-next.14"
   },
   "devDependencies": {
     "@neo4j-ndl/base": "^3.2.10",
@@ -61,7 +59,6 @@
     "@vitejs/plugin-react": "^4.3.1",
     "copyfiles": "^2.4.1",
     "jsdom": "^24.1.1",
-    "lodash": "^4.17.21",
     "playwright": "^1.55.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/CypherEditor.tsx

@@ -46,6 +46,19 @@ import { LintWorker } from '@neo4j-cypher/lint-worker';
 import workerpool from 'workerpool';
 
 type DomEventHandlers = Parameters<typeof EditorView.domEventHandlers>[0];
+
+/**
+ * Normalize CRLF line endings to LF, which is what CodeMirror expects.
+ * CodeMirror collapses `\r\n` into a single line break, so a raw `value`
+ * string with CRLF endings is longer than the resulting document. Normalizing
+ * up front keeps the document length in sync with the value length used for
+ * cursor placement, and avoids "Selection points outside of document" errors.
+ * https://codemirror.net/docs/ref/#state.EditorState^lineSeparator
+ */
+function normalizeLineEndings(value: string): string {
+  return value.replace(/\r\n/g, '\n');
+}
+
 export interface CypherEditorProps {
   /**
    * The prompt to show on single line editors
@@ -438,8 +451,17 @@ export class CypherEditor extends Component<
    * For example, to move the cursor to the end of the editor, use `value.length`
    */
   updateCursorPosition(position: number) {
-    this.editorView.current?.dispatch({
-      selection: { anchor: position, head: position },
+    const view = this.editorView.current;
+    if (!view) {
+      return;
+    }
+
+    // Clamp to the doc length; `position` may come from a raw value longer than
+    // the doc (e.g. CRLF endings), which would throw "Selection points outside
+    // of document".
+    const clamped = Math.max(0, Math.min(position, view.state.doc.length));
+    view.dispatch({
+      selection: { anchor: clamped, head: clamped },
     });
   }
 
@@ -448,10 +470,7 @@ 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');
+    const normalizedValue = normalizeLineEndings(value);
     this.editorView.current.dispatch({
       changes: {
         from: 0,
@@ -603,7 +622,7 @@ export class CypherEditor extends Component<
         ),
         this.editorActionsController.extension,
       ],
-      doc: this.props.value,
+      doc: normalizeLineEndings(this.props.value ?? ''),
     });
 
     this.editorView.current = new EditorView({
@@ -701,7 +720,7 @@ export class CypherEditor extends Component<
         changes: {
           from: 0,
           to: currentCmValue.length,
-          insert: this.props.value ?? '',
+          insert: normalizeLineEndings(this.props.value ?? ''),
         },
         annotations: [ExternalEdit.of(true)],
       });

package/src/e2e_tests/sanityChecks.spec.tsx

@@ -42,6 +42,29 @@ test('the editor can report changes to the text ', async ({ mount, page }) => {
   }).toPass({ intervals: [300, 300, 1000] });
 });
 
+test('can mount an autofocused editor with CRLF line endings without crashing', async ({
+  mount,
+}) => {
+  const value = 'MATCH (n)\r\nRETURN n;';
+
+  const component = await mount(<CypherEditor value={value} autofocus />);
+
+  await expect(component).toContainText('MATCH (n)');
+  await expect(component).toContainText('RETURN n;');
+});
+
+test('can externally update to a value with CRLF line endings without crashing', async ({
+  mount,
+}) => {
+  const component = await mount(<CypherEditor value="MATCH (n)" autofocus />);
+
+  await component.update(
+    <CypherEditor value={'MATCH (n)\r\nRETURN n;'} autofocus />,
+  );
+
+  await expect(component).toContainText('RETURN n;');
+});
+
 test('can complete RETURN', async ({ page, mount }) => {
   await mount(<CypherEditor />);
   const textField = page.getByRole('textbox');

package/src/editorActions.ts

@@ -82,7 +82,7 @@ export function createEditorActionsController(): EditorActionsController {
   const spacer = EditorView.decorations.compute(
     ['doc', activeField],
     (state) => {
-      if (!state.field(activeField) || state.doc.length === 0) {
+      if (!state.field(activeField)) {
         return Decoration.none;
       }
       return Decoration.set([
@@ -230,6 +230,9 @@ export function createEditorActionsController(): EditorActionsController {
       WebkitUserSelect: 'none',
       pointerEvents: 'none',
     },
+    '.cm-placeholder': {
+      display: 'inline',
+    },
     '.cm-editor-actions': {
       position: 'absolute',
       top: 'var(--cm-editor-actions-top, 0px)',

package/src/inlinePanel.ts

@@ -11,7 +11,7 @@ import type { HostPortalCallbacks } from './hostCallbacks';
 /** Lifecycle callbacks for an inline panel. See {@link HostPortalCallbacks}. */
 export type InlinePanelCallbacks = HostPortalCallbacks;
 
-export type InlinePanelShowOptions = {
+type InlinePanelShowOptions = {
   /** Document position the panel anchors to. */
   pos: number;
   /**

package/src/lang-cypher/constants.ts

@@ -42,9 +42,13 @@ export const cypherTokenTypeToNode = (facet: Facet<unknown>) => ({
   number: NodeType.define({ id: 28, name: 'numberLiteral' }),
   setting: NodeType.define({ id: 29, name: 'setting' }),
   settingValue: NodeType.define({ id: 30, name: 'settingValue' }),
+  interpolationDelimiter: NodeType.define({
+    id: 31,
+    name: 'interpolationDelimiter',
+  }),
 });
 
-export type PrismSpecificTokenType =
+type PrismSpecificTokenType =
   | 'class-name'
   | 'identifier'
   | 'string'
@@ -68,6 +72,7 @@ export const tokenTypeToStyleTag: Record<HighlightedCypherTokenTypes, Tag> = {
   variable: tags.variableName,
   paramDollar: tags.atom,
   paramValue: tags.atom,
+  interpolationDelimiter: tags.atom,
   symbolicName: tags.variableName,
   operator: tags.operator,
   stringLiteral: tags.string,