@wordpress/core-data 7.40.1 → 7.40.2-next.v.202602271551.0

package/src/utils/crdt-selection.ts

@@ -88,6 +88,41 @@ function convertYSelectionToBlockSelection(
 	return null;
 }
 
+/**
+ * Convert a YFullSelection to a WPSelection by resolving relative positions
+ * and verifying the blocks exist in the document.
+ * @param yFullSelection The YFullSelection to convert
+ * @param ydoc           The Y.Doc to resolve positions against
+ * @return The converted WPSelection, or null if the conversion fails
+ */
+function convertYFullSelectionToWPSelection(
+	yFullSelection: YFullSelection,
+	ydoc: Y.Doc
+): WPSelection | null {
+	const { start, end } = yFullSelection;
+	const startBlock = findBlockByClientIdInDoc( start.clientId, ydoc );
+	const endBlock = findBlockByClientIdInDoc( end.clientId, ydoc );
+
+	if ( ! startBlock || ! endBlock ) {
+		return null;
+	}
+
+	const startBlockSelection = convertYSelectionToBlockSelection(
+		start,
+		ydoc
+	);
+	const endBlockSelection = convertYSelectionToBlockSelection( end, ydoc );
+
+	if ( startBlockSelection === null || endBlockSelection === null ) {
+		return null;
+	}
+
+	return {
+		selectionStart: startBlockSelection,
+		selectionEnd: endBlockSelection,
+	};
+}
+
 /**
  * Given a Y.Doc and a selection history, find the most recent selection
  * that exists in the document. Skip any selections that are not in the document.
@@ -99,34 +134,14 @@ function findSelectionFromHistory(
 	ydoc: Y.Doc,
 	selectionHistory: YFullSelection[]
 ): WPSelection | null {
-	// Try each position until we find one that exists in the document
 	for ( const positionToTry of selectionHistory ) {
-		const { start, end } = positionToTry;
-		const startBlock = findBlockByClientIdInDoc( start.clientId, ydoc );
-		const endBlock = findBlockByClientIdInDoc( end.clientId, ydoc );
-
-		if ( ! startBlock || ! endBlock ) {
-			// This block no longer exists, skip it.
-			continue;
-		}
-
-		const startBlockSelection = convertYSelectionToBlockSelection(
-			start,
+		const result = convertYFullSelectionToWPSelection(
+			positionToTry,
 			ydoc
 		);
-		const endBlockSelection = convertYSelectionToBlockSelection(
-			end,
-			ydoc
-		);
-
-		if ( startBlockSelection === null || endBlockSelection === null ) {
-			continue;
+		if ( result !== null ) {
+			return result;
 		}
-
-		return {
-			selectionStart: startBlockSelection,
-			selectionEnd: endBlockSelection,
-		};
 	}
 
 	return null;
@@ -170,7 +185,9 @@ export function restoreSelection(
 		const isBeginningOfEmptyBlock =
 			0 === selectionStart.offset &&
 			0 === selectionEnd.offset &&
-			isBlockEmpty;
+			isBlockEmpty &&
+			! selectionStart.attributeKey &&
+			! selectionEnd.attributeKey;
 
 		if ( isBeginningOfEmptyBlock ) {
 			// Case 2a: When the content in a block has been removed after an
@@ -203,3 +220,48 @@ export function restoreSelection(
 		resetSelection( selectionEnd, selectionEnd, 0 );
 	}
 }
+
+/**
+ * If the latest selection has been shifted by remote edits, resolve and return
+ * it as a WPSelection. Returns null when the history is empty or neither
+ * endpoint has moved.
+ *
+ * @param ydoc             The Y.Doc to resolve positions against
+ * @param selectionHistory The selection history to check
+ * @return The shifted WPSelection, or null if nothing moved.
+ */
+export function getShiftedSelection(
+	ydoc: Y.Doc,
+	selectionHistory: YFullSelection[]
+): WPSelection | null {
+	if ( selectionHistory.length === 0 ) {
+		return null;
+	}
+
+	const { start, end } = selectionHistory[ 0 ];
+
+	// Block-level selections have no offset that can shift.
+	if (
+		start.type === YSelectionType.BlockSelection ||
+		end.type === YSelectionType.BlockSelection
+	) {
+		return null;
+	}
+
+	const selectionStart = convertYSelectionToBlockSelection( start, ydoc );
+	const selectionEnd = convertYSelectionToBlockSelection( end, ydoc );
+
+	if ( ! selectionStart || ! selectionEnd ) {
+		return null;
+	}
+
+	// Only dispatch if at least one endpoint actually moved.
+	const startShifted = selectionStart.offset !== start.offset;
+	const endShifted = selectionEnd.offset !== end.offset;
+
+	if ( ! startShifted && ! endShifted ) {
+		return null;
+	}
+
+	return { selectionStart, selectionEnd };
+}

package/src/utils/crdt-user-selections.ts

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
+import { select } from '@wordpress/data';
 import { Y } from '@wordpress/sync';
+// @ts-ignore No exported types for block editor store selectors.
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -11,6 +14,7 @@ import type { YPostRecord } from './crdt';
 import type { YBlock, YBlocks } from './crdt-blocks';
 import { getRootMap } from './crdt-utils';
 import type {
+	AbsoluteBlockIndexPath,
 	WPBlockSelection,
 	SelectionState,
 	SelectionNone,
@@ -35,6 +39,11 @@ export enum SelectionType {
 /**
  * Converts WordPress block editor selection to a SelectionState.
  *
+ * Uses getBlockPathForLocalClientId to locate blocks in the Yjs document by
+ * their tree position (index path) rather than clientId, since clientIds may
+ * differ between the block-editor store and the Yjs document (e.g. in "Show
+ * Template" mode).
+ *
  * @param selectionStart - The start position of the selection
  * @param selectionEnd   - The end position of the selection
  * @param yDoc           - The Yjs document
@@ -46,15 +55,15 @@ export function getSelectionState(
 	yDoc: Y.Doc
 ): SelectionState {
 	const ymap = getRootMap< YPostRecord >( yDoc, CRDT_RECORD_MAP_KEY );
-	const yBlocks = ymap.get( 'blocks' ) ?? new Y.Array< YBlock >();
+	const yBlocks = ymap.get( 'blocks' );
 
 	const isSelectionEmpty = Object.keys( selectionStart ).length === 0;
 	const noSelection: SelectionNone = {
 		type: SelectionType.None,
 	};
 
-	if ( isSelectionEmpty ) {
-		// Case 1: No selection
+	if ( isSelectionEmpty || ! yBlocks ) {
+		// Case 1: No selection, or no blocks in the document.
 		return noSelection;
 	}
 
@@ -70,9 +79,18 @@ export function getSelectionState(
 
 	if ( isSelectionAWholeBlock ) {
 		// Case 2: A whole block is selected.
+		const path = getBlockPathForLocalClientId( selectionStart.clientId );
+		const blockPosition = path
+			? createRelativePositionForBlockPath( path, yBlocks )
+			: null;
+
+		if ( ! blockPosition ) {
+			return noSelection;
+		}
+
 		return {
 			type: SelectionType.WholeBlock,
-			blockId: selectionStart.clientId,
+			blockPosition,
 		};
 	} else if ( isCursorOnly ) {
 		// Case 3: Cursor only, no text selected
@@ -85,7 +103,6 @@ export function getSelectionState(
 
 		return {
 			type: SelectionType.Cursor,
-			blockId: selectionStart.clientId,
 			cursorPosition,
 		};
 	} else if ( isSelectionInOneBlock ) {
@@ -103,13 +120,12 @@ export function getSelectionState(
 
 		return {
 			type: SelectionType.SelectionInOneBlock,
-			blockId: selectionStart.clientId,
 			cursorStartPosition,
 			cursorEndPosition,
 		};
 	}
 
-	// Caes 5: Selection in multiple blocks
+	// Case 5: Selection in multiple blocks
 	const cursorStartPosition = getCursorPosition( selectionStart, yBlocks );
 	const cursorEndPosition = getCursorPosition( selectionEnd, yBlocks );
 	if ( ! cursorStartPosition || ! cursorEndPosition ) {
@@ -119,8 +135,6 @@ export function getSelectionState(
 
 	return {
 		type: SelectionType.SelectionInMultipleBlocks,
-		blockStartId: selectionStart.clientId,
-		blockEndId: selectionEnd.clientId,
 		cursorStartPosition,
 		cursorEndPosition,
 	};
@@ -137,7 +151,8 @@ function getCursorPosition(
 	selection: WPBlockSelection,
 	blocks: YBlocks
 ): CursorPosition | null {
-	const block = findBlockByClientId( selection.clientId, blocks );
+	const path = getBlockPathForLocalClientId( selection.clientId );
+	const block = path ? findBlockByPath( path, blocks ) : null;
 	if (
 		! block ||
 		! selection.attributeKey ||
@@ -147,7 +162,12 @@ function getCursorPosition(
 	}
 
 	const attributes = block.get( 'attributes' );
-	const currentYText = attributes?.get( selection.attributeKey ) as Y.Text;
+	const currentYText = attributes?.get( selection.attributeKey );
+
+	// If the attribute is not a Y.Text, return null.
+	if ( ! ( currentYText instanceof Y.Text ) ) {
+		return null;
+	}
 
 	const relativePosition = Y.createRelativePositionFromTypeIndex(
 		currentYText,
@@ -161,32 +181,103 @@ function getCursorPosition(
 }
 
 /**
- * Find a block by its client ID.
+ * Resolves a local block-editor clientId to its index path relative to the
+ * post content blocks. This allows finding the corresponding block in the Yjs
+ * document even when clientIds differ (e.g. in "Show Template" mode where
+ * blocks are cloned).
+ *
+ * In template mode, the block tree includes template parts and wrapper blocks
+ * around a core/post-content block. The Yjs document only contains the post
+ * content blocks, so we stop the upward walk when the parent is
+ * core/post-content (its inner blocks correspond to the Yjs root blocks).
+ *
+ * @param clientId - The local block-editor clientId to resolve.
+ * @return The index path from root, or null if not resolvable.
+ */
+export function getBlockPathForLocalClientId(
+	clientId: string
+): AbsoluteBlockIndexPath | null {
+	const { getBlockIndex, getBlockRootClientId, getBlockName } =
+		select( blockEditorStore );
+
+	const path: AbsoluteBlockIndexPath = [];
+	let current: string | null = clientId;
+	while ( current ) {
+		const index = getBlockIndex( current );
+		if ( index === -1 ) {
+			return null;
+		}
+		path.unshift( index );
+		const parent = getBlockRootClientId( current );
+		if ( ! parent ) {
+			break;
+		}
+		// If the parent is core/post-content, stop here — the Yjs doc
+		// root blocks correspond to post-content's inner blocks.
+		const parentName = getBlockName( parent );
+		if ( parentName === 'core/post-content' ) {
+			break;
+		}
+		current = parent;
+	}
+	return path.length > 0 ? path : null;
+}
+
+/**
+ * Find a block by navigating a tree index path in the Yjs block hierarchy.
  *
- * @param blockId - The client ID of the block.
- * @param blocks  - The blocks to search through.
- * @return The block if found, null otherwise.
+ * @param path   - The index path, e.g. [0, 1] for blocks[0].innerBlocks[1].
+ * @param blocks - The root-level Yjs blocks array.
+ * @return The block Y.Map if found, null otherwise.
  */
-function findBlockByClientId(
-	blockId: string,
+function findBlockByPath(
+	path: AbsoluteBlockIndexPath,
 	blocks: YBlocks
 ): YBlock | null {
-	for ( const block of blocks ) {
-		if ( block.get( 'clientId' ) === blockId ) {
+	let currentBlocks = blocks;
+	for ( let i = 0; i < path.length; i++ ) {
+		if ( path[ i ] >= currentBlocks.length ) {
+			return null;
+		}
+		const block = currentBlocks.get( path[ i ] );
+		if ( ! block ) {
+			return null;
+		}
+		if ( i === path.length - 1 ) {
 			return block;
 		}
+		currentBlocks =
+			block.get( 'innerBlocks' ) ?? ( new Y.Array() as YBlocks );
+	}
+	return null;
+}
 
-		const innerBlocks = block.get( 'innerBlocks' );
-
-		if ( innerBlocks && innerBlocks.length > 0 ) {
-			const innerBlock = findBlockByClientId( blockId, innerBlocks );
-
-			if ( innerBlock ) {
-				return innerBlock;
-			}
+/**
+ * Create a Y.RelativePosition for a block by navigating a tree index path.
+ *
+ * @param path   - The index path, e.g. [0, 1] for blocks[0].innerBlocks[1].
+ * @param blocks - The root-level Yjs blocks array.
+ * @return A Y.RelativePosition for the block, or null if the path is invalid.
+ */
+function createRelativePositionForBlockPath(
+	path: AbsoluteBlockIndexPath,
+	blocks: YBlocks
+): Y.RelativePosition | null {
+	let currentBlocks = blocks;
+	for ( let i = 0; i < path.length; i++ ) {
+		if ( path[ i ] >= currentBlocks.length ) {
+			return null;
+		}
+		if ( i === path.length - 1 ) {
+			return Y.createRelativePositionFromTypeIndex(
+				currentBlocks,
+				path[ i ]
+			);
 		}
+		const block = currentBlocks.get( path[ i ] );
+		currentBlocks =
+			block?.get( 'innerBlocks' ) ?? ( new Y.Array() as YBlocks );
 	}
-
 	return null;
 }
 
@@ -210,19 +301,13 @@ export function areSelectionsStatesEqual(
 			return true;
 
 		case SelectionType.Cursor:
-			return (
-				selection1.blockId ===
-					( selection2 as SelectionCursor ).blockId &&
-				areCursorPositionsEqual(
-					selection1.cursorPosition,
-					( selection2 as SelectionCursor ).cursorPosition
-				)
+			return areCursorPositionsEqual(
+				selection1.cursorPosition,
+				( selection2 as SelectionCursor ).cursorPosition
 			);
 
 		case SelectionType.SelectionInOneBlock:
 			return (
-				selection1.blockId ===
-					( selection2 as SelectionInOneBlock ).blockId &&
 				areCursorPositionsEqual(
 					selection1.cursorStartPosition,
 					( selection2 as SelectionInOneBlock ).cursorStartPosition
@@ -235,10 +320,6 @@ export function areSelectionsStatesEqual(
 
 		case SelectionType.SelectionInMultipleBlocks:
 			return (
-				selection1.blockStartId ===
-					( selection2 as SelectionInMultipleBlocks ).blockStartId &&
-				selection1.blockEndId ===
-					( selection2 as SelectionInMultipleBlocks ).blockEndId &&
 				areCursorPositionsEqual(
 					selection1.cursorStartPosition,
 					( selection2 as SelectionInMultipleBlocks )
@@ -251,9 +332,9 @@ export function areSelectionsStatesEqual(
 				)
 			);
 		case SelectionType.WholeBlock:
-			return (
-				selection1.blockId ===
-				( selection2 as SelectionWholeBlock ).blockId
+			return Y.compareRelativePositions(
+				selection1.blockPosition,
+				( selection2 as SelectionWholeBlock ).blockPosition
 			);
 
 		default:
@@ -272,9 +353,10 @@ function areCursorPositionsEqual(
 	cursorPosition1: CursorPosition,
 	cursorPosition2: CursorPosition
 ): boolean {
-	const isRelativePositionEqual =
-		JSON.stringify( cursorPosition1.relativePosition ) ===
-		JSON.stringify( cursorPosition2.relativePosition );
+	const isRelativePositionEqual = Y.compareRelativePositions(
+		cursorPosition1.relativePosition,
+		cursorPosition2.relativePosition
+	);
 
 	// Ensure a change in calculated absolute offset results in a treating the cursor as modified.
 	// This is necessary because Y.Text relative positions can remain the same after text changes.

package/src/utils/crdt.ts

@@ -28,13 +28,13 @@ import {
 } from './crdt-blocks';
 import { type Post } from '../entity-types/post';
 import { type Type } from '../entity-types';
-import {
-	CRDT_DOC_META_PERSISTENCE_KEY,
-	CRDT_RECORD_MAP_KEY,
-	WORDPRESS_META_KEY_FOR_CRDT_DOC_PERSISTENCE,
-} from '../sync';
+import { CRDT_DOC_META_PERSISTENCE_KEY, CRDT_RECORD_MAP_KEY } from '../sync';
 import type { WPSelection } from '../types';
-import { updateSelectionHistory } from './crdt-selection';
+import {
+	getSelectionHistory,
+	getShiftedSelection,
+	updateSelectionHistory,
+} from './crdt-selection';
 import {
 	createYMap,
 	getRootMap,
@@ -74,6 +74,8 @@ export interface YPostRecord extends YMapRecord {
 	title: Y.Text;
 }
 
+export const POST_META_KEY_FOR_CRDT_DOC_PERSISTENCE = '_crdt_document';
+
 // Properties that are allowed to be synced for a post.
 const allowedPostProperties = new Set< string >( [
 	'author',
@@ -97,7 +99,7 @@ const allowedPostProperties = new Set< string >( [
 
 // Post meta keys that should *not* be synced.
 const disallowedPostMetaKeys = new Set< string >( [
-	WORDPRESS_META_KEY_FOR_CRDT_DOC_PERSISTENCE,
+	POST_META_KEY_FOR_CRDT_DOC_PERSISTENCE,
 ] );
 
 /**
@@ -416,6 +418,20 @@ export function getPostChangesFromCRDTDoc(
 		};
 	}
 
+	// When remote content changes are detected, recalculate the local user's
+	// selection using Y.RelativePosition to account for text shifts. The ydoc
+	// has already been updated with remote content at this point, so converting
+	// relative positions to absolute gives corrected offsets. Including the
+	// selection in PostChanges ensures it dispatches atomically with content.
+	const selectionHistory = getSelectionHistory( ydoc );
+	const shiftedSelection = getShiftedSelection( ydoc, selectionHistory );
+	if ( shiftedSelection ) {
+		changes.selection = {
+			...shiftedSelection,
+			initialPosition: 0,
+		};
+	}
+
 	return changes;
 }