fix(frontend): CollabClient reads sendableSteps at flush time instead of queuing PM steps per-transaction

static/collab-client.js

···
 // Works with both source (text-patch steps) and rich (PM steps) modes.
 
 export class CollabClient {
-    /**
-     * @param {string} rkey - Document rkey
-     * @param {number} initialVersion - Version the client started at
-     * @param {function(steps: object[]): void} applyRemoteSteps - Called when server confirms steps from others
-     */
     constructor(rkey, initialVersion, applyRemoteSteps) {
         this.rkey = rkey;
         this.version = initialVersion;
         this.applyRemoteSteps = applyRemoteSteps;
         this._inflight = false;
-        this._queue = [];
+        this._queue = [];           // used by source mode (text-patch steps)
+        this._pmGetSendable = null; // set by rich mode; returns {steps, clientID} or null
     }
 
-    /**
-     * Queue local steps and attempt to flush to the server.
-     * @param {object[]} steps - Array of step objects (text-patch or PM step JSON)
-     */
+    // Source mode: queue explicit step objects and flush.
     sendSteps(steps) {
         this._queue.push(...steps);
         this._flush();
     }
 
+    // Rich mode: register a callback that returns sendable PM steps on demand.
+    // The callback should call sendableSteps(pmView.state) and return the result,
+    // or null if nothing to send.
+    setPMSendable(fn) {
+        this._pmGetSendable = fn;
+    }
+
+    // Signal that a PM transaction occurred; try to flush if not already in-flight.
+    notifyPMChange() {
+        this._flush();
+    }
+
     async _flush() {
-        if (this._inflight || this._queue.length === 0) return;
+        if (this._inflight) return;
+
+        let toSend;
+        let isRichMode = false;
+
+        if (this._pmGetSendable) {
+            // Rich mode: ask prosemirror-collab what needs sending.
+            const sendable = this._pmGetSendable();
+            if (!sendable || sendable.steps.length === 0) return;
+            toSend = sendable.steps.map(s => ({type: 'pm-step', json: JSON.stringify(s.toJSON())}));
+            isRichMode = true;
+        } else {
+            // Source mode: drain the queue.
+            if (this._queue.length === 0) return;
+            toSend = this._queue.slice();
+        }
+
         this._inflight = true;
-        const toSend = this._queue.slice();
         try {
             const resp = await fetch(`/api/docs/${this.rkey}/steps`, {
                 method: 'POST',
···
             if (resp.ok) {
                 const {version} = await resp.json();
                 this.version = version;
-                // Remove the steps we just confirmed.
-                this._queue = this._queue.slice(toSend.length);
+                if (!isRichMode) {
+                    this._queue = this._queue.slice(toSend.length);
+                }
+                // Rich mode: prosemirror-collab tracks confirmation via receiveTransaction;
+                // no queue to drain here.
             } else if (resp.status === 409) {
-                // Server has steps we haven't seen yet.
                 const {version, steps: missedJSON} = await resp.json();
                 const missed = missedJSON.map(s => JSON.parse(s));
-                // Let the editor rebase local steps on top of missed ones.
                 this.applyRemoteSteps(missed);
                 this.version = version;
-                // Don't clear _queue — resubmit after rebase.
             } else {
                 console.error('CollabClient: unexpected status', resp.status);
             }
···
             console.error('CollabClient: fetch error', e);
         } finally {
             this._inflight = false;
-            if (this._queue.length > 0) {
+            // Retry if there's more to send.
+            const hasMore = this._pmGetSendable
+                ? (this._pmGetSendable()?.steps.length > 0)
+                : this._queue.length > 0;
+            if (hasMore) {
                 setTimeout(() => this._flush(), 50);
             }
         }
     }
 
-    /**
-     * Call when a WebSocket "steps" message arrives from the server.
-     * Advances local version and notifies the editor.
-     * @param {object} msg - {type:"steps", steps:[...], version:N, clientID:string}
-     * @param {string} myClientID
-     */
     handleWSMessage(msg, myClientID) {
         if (msg.type !== 'steps') return;
         if (msg.clientID === myClientID) {
-            // Our own steps confirmed — just advance version.
             this.version = msg.version;
             return;
         }

templates/document_edit.html

···
                     ...plugins,
                     collab({ version: collabClient.version }),
                 ]);
-                // Override dispatchTransaction to detect local edits at the PM level.
-                // After every transaction, sendableSteps is non-null only for local
-                // (unconfirmed) edits — remote receiveTransaction steps are confirmed
-                // immediately and never appear in sendableSteps.
+                // Override dispatchTransaction to notify CollabClient after every
+                // local transaction. CollabClient calls sendableSteps itself at
+                // flush time, so it always sends exactly the current unconfirmed
+                // set — never duplicates across keystrokes.
                 ctx.update(editorViewOptionsCtx, (prev) => ({
                     ...prev,
                     dispatchTransaction: function(tr) {
                         const newState = this.state.apply(tr);
                         this.updateState(newState);
                         if (!applyingRemote) {
-                            const sendable = sendableSteps(newState);
-                            if (sendable) {
-                                const stepsJSON = sendable.steps.map(s => JSON.stringify(s.toJSON()));
-                                collabClient.sendSteps(stepsJSON.map(j => ({type: 'pm-step', json: j})));
+                            collabClient.notifyPMChange();
+                            if (tr.docChanged) {
                                 try {
                                     const serializer = milkdownEditor.action(c => c.get(serializerCtx));
                                     scheduleAutoSave(serializer(newState.doc));
···
                 });
             })
             .create();
+
+        // Register the PM sendable-steps provider so CollabClient reads directly
+        // from prosemirror-collab's unconfirmed buffer rather than a separate queue.
+        collabClient.setPMSendable(() => {
+            const pmView = milkdownEditor.action(c => c.get(editorViewCtx));
+            return sendableSteps(pmView.state);
+        });
 
         return milkdownEditor;
     }
···
             const doc = cmView.state.doc;
             cmView.dispatch({ changes: { from: 0, to: doc.length, insert: md } });
             updatePreview(md);
+            collabClient.setPMSendable(null);  // detach from stale Milkdown instance
         } else {
             // source → rich: extract markdown from CodeMirror, recreate Milkdown
             const md = cmView.state.doc.toString();
-            await createMilkdownEditor(md);
+            await createMilkdownEditor(md);    // setPMSendable called inside
         }
 
         currentMode = nextMode;