Prevent ZWS cleanup RangeError in ZWSManagementExtension (baserow#4821)

Author: jonadeline

web-frontend/modules/core/components/formula/extensions/ZWSManagementExtension.js

@@ -16,23 +16,33 @@ export const ZWSManagementExtension = Extension.create({
         key: new PluginKey('zwsManagement'),
         appendTransaction(transactions, oldState, newState) {
           const tr = newState.tr
-          let modified = false
 
-          // Phase 1: Clean up consecutive ZWS
+          // Phase 1: Clean up consecutive ZWS.
+          // Collect replacements first, then apply in reverse order to avoid
+          // position drift: each insertText changes the document length, so
+          // positions calculated during iteration become invalid after the first
+          // modification. Applying in reverse (highest pos first) keeps earlier
+          // positions valid for subsequent operations.
+          const zwsReplacements = []
           newState.doc.descendants((node, pos) => {
             if (node.isText && node.text) {
-              // Check if the text contains multiple consecutive ZWS
               const text = node.text
               if (text.includes('\u200B\u200B')) {
-                // Replace multiple consecutive ZWS with a single one
                 const cleanedText = text.replace(/\u200B+/g, '\u200B')
                 if (cleanedText !== text) {
-                  tr.insertText(cleanedText, pos, pos + node.nodeSize)
-                  modified = true
+                  zwsReplacements.push({
+                    cleanedText,
+                    pos,
+                    end: pos + node.nodeSize,
+                  })
                 }
               }
             }
           })
+          let modified = Boolean(zwsReplacements.length)
+          for (const { cleanedText, pos, end } of zwsReplacements.reverse()) {
+            tr.insertText(cleanedText, pos, end)
+          }
 
           // Apply cleanup changes before checking for missing ZWS
           const docAfterCleanup = modified ? tr.doc : newState.doc

web-frontend/test/unit/core/formula/ZWSManagementExtension.spec.js

@@ -0,0 +1,45 @@
+import { Editor } from '@tiptap/core'
+import { Document } from '@tiptap/extension-document'
+import { Text } from '@tiptap/extension-text'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { ZWSManagementExtension } from '@baserow/modules/core/components/formula/extensions/ZWSManagementExtension'
+
+/**
+ * Creates a minimal TipTap editor with only the ZWSManagementExtension active.
+ */
+function createEditor(content) {
+  return new Editor({
+    extensions: [Document, Paragraph, Text, ZWSManagementExtension],
+    content,
+  })
+}
+
+function triggerAppendTransaction(editor) {
+  editor.view.dispatch(editor.state.tr.setMeta('forceAppendTransaction', true))
+}
+
+describe('ZWSManagementExtension', () => {
+  let editor
+
+  afterEach(() => {
+    editor?.destroy()
+  })
+
+  it('reduces triple and quadruple consecutive ZWS to a single ZWS', () => {
+    editor = createEditor({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [{ type: 'text', text: 'x\u200B\u200B\u200B\u200By' }], // 4× ZWS
+        },
+        {
+          type: 'paragraph',
+          content: [{ type: 'text', text: 'p\u200B\u200B\u200Bq' }], // 3× ZWS
+        },
+      ],
+    })
+
+    expect(() => triggerAppendTransaction(editor)).not.toThrow()
+  })
+})