This PR is dependent on #78864 before it can be merged.

What?

Fix a race condition where rapid concurrent typing over the WebSocket RTC provider with a small delay could lose characters or cause the cursor to end up in the wrong spot.

Before (on trunk, with a simulated 100ms delay on the WebSocket server):

After (this branch, also with a simulated delay):

The main change is to commit local editor changes to the local Y.Doc synchronously, so that remote CRDT updates don't overwrite local editor state before it is committed.

Why?

With WebSocket sync and a small network delay, a remote update can arrive in the short window after Gutenberg has accepted a local keystroke but before that keystroke has been applied to the local Y.Doc. When that happens, the CRDT merge can treat the stale Y.Doc as authoritative and overwrite the local editor state with another user's stale block snapshot.

This is easier to hit with WebSockets with a production delay than with HTTP polling because remote updates routinely arrive between local keystrokes. The result looks like characters are being dropped, but the local character was committed to the local editor store and then overwritten before it became part of the CRDT merge.

How?

SyncManager.update() now applies local CRDT updates immediately instead of wrapping the whole update in yieldToEventLoop(). This ensures we apply local editor changes before a remote update can be merged into the local document.

The PR also narrows an existing clientId preservation behavior introduced in #78483 (also me), designed to address code editor updates. The new change still preserves the code editor fix, which ignores randomly-generated client IDs from content-only updates, but skips that behavior for normal block merges. This change is necessary to preserve selection update behavior in normal CRDT merges, which relies on a block's clientId.

Both the synchronous CRDT update and clientId changes are necessary for the fix, although the clientId fix is more defensive. Correct character placement depends on both ordering and cursor context. Applying local changes synchronously ensures the Y.Doc already contains the local keystroke before a remote update is merged. Allowing regular editor change clientIds to stay fixed ensures the selection/cursor hint points at the same RichText instance in the Y.Doc, so the merge can apply the next character at the intended position instead of diffing the cursor from an incorrect block.

This PR also adds a npm run rtc:ws:slow command, which introduces the 100ms delay described above for local testing and (future) e2e testing.

Safety Of Changes

The visual editor uses block clientIds to scope selection and cursor updates. If mergeCrdtBlocks() always skips clientId updates (as #78483 introduced), the editor's selected block ID can drift from the Y.Doc block ID. Next, selection history cannot reliably resolve the right Y.Text, and fast repeated typing can lose the cursor hint used by the rich-text merge. This PR keeps clientId preservation only for the Code Editor path where reparsing creates fresh random clientIds on each edit. Inserted blocks still get their clientIds through the existing createNewYBlock() insertion path. The new clientId update only applies when an existing Y block is being updated to match an incoming visual-editor block.

Skipping the outer yieldToEventLoop() should be safe because the selection timing behavior is still preserved where it belongs: applyPostChangesToCRDTDoc() continues to defer selection history updates with setTimeout( ..., 0 ). Local content and block updates are synchronous again, while the undo/selection ordering remains delayed. Because content updates are no longer deferred, createPersistedCRDTDoc() can serialize the Y.Doc immediately.

Follow-up

An important note is that the new collaboration-concurrent-typing.spec.ts test does not currently run in CI. A follow-up PR should enable this and all passing WS e2e tests into a normal CI run, so WS-specific regressions are discovered quickly.

Testing Instructions

1. Enable RTC via Settings -> Writing -> "Enable real-time collaboration" checkbox.
2. Run npm run rtc:ws:slow to set up wp-env with a local delayed WebSockets server.
3. Open the same draft post in two browser sessions.
4. In both sessions, place the cursor at the end of different paragraph blocks.
5. Type quickly in both sessions at the same time. See snippet below for automated typing.
6. Confirm both sessions keep all typed characters and the local cursor stays at the expected position.

To type quickly using the snippet in the videos above, use this:

// 1. Click into an existing paragraph in Gutenberg
// 2. In the dev console in the "top" scope (see below), run this command:
// You may need to reload the post editor with DevTools open if `wp` is undefined
(async () => { const { subscribe, select } = wp.data; const clientId = await new Promise((resolve) => { const initial = select('core/block-editor').getSelectedBlockClientId(); if (initial) { resolve(initial); return; } const unsubscribe = subscribe(() => { const id = select('core/block-editor').getSelectedBlockClientId(); if (id) { unsubscribe(); resolve(id); } }); }); const doc = document.querySelector('iframe[name="editor-canvas"]')?.contentDocument ?? document; const blockEl = doc.querySelector(`[data-block="${clientId}"]`); const editable = blockEl?.querySelector('[contenteditable="true"]') ?? blockEl; if (!editable) { console.warn('No editable element found for block', clientId); return; } editable.focus(); const sel = doc.defaultView.getSelection(); if (!sel.rangeCount || !editable.contains(sel.anchorNode)) { const r = doc.createRange(); r.selectNodeContents(editable); r.collapse(false); sel.removeAllRanges(); sel.addRange(r); } let i = 0; const intervalId = setInterval(() => { const char = String(i % 10); const keyInit = { key: char, code: `Digit${char}`, keyCode: 48 + Number(char), which: 48 + Number(char), bubbles: true, cancelable: true }; editable.dispatchEvent(new KeyboardEvent('keydown', keyInit)); const notCancelled = editable.dispatchEvent(new InputEvent('beforeinput', { inputType: 'insertText', data: char, bubbles: true, cancelable: true })); if (notCancelled) { const s = doc.defaultView.getSelection(); if (s.rangeCount) { const r = s.getRangeAt(0); r.deleteContents(); const t = doc.createTextNode(char); r.insertNode(t); r.setStartAfter(t); r.setEndAfter(t); s.removeAllRanges(); s.addRange(r); } editable.dispatchEvent(new InputEvent('input', { inputType: 'insertText', data: char, bubbles: true })); } editable.dispatchEvent(new KeyboardEvent('keyup', keyInit)); i++; }, 60); window.__stopTyping = () => { clearInterval(intervalId); console.log('Stopped.'); }; console.log('Typing started on block', clientId, '— run window.__stopTyping() to stop.'); })();

Automated checks

npm run build -- --skip-types
env RTC_WS_DELAY=100 npm run test:e2e:rtc-websocket -- specs/editor/collaboration/websocket-only/collaboration-concurrent-typing.spec.ts

Use of AI Tools

AI assistance: Yes
Tool(s): Codex
Used for: Investigating the CRDT update race, adding focused test coverage, fixing the issue.