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

package/src/utils/test/crdt-blocks.ts

@@ -31,19 +31,43 @@ jest.mock( '@wordpress/blocks', () => ( {
 			name: 'core/paragraph',
 			attributes: { content: { type: 'rich-text' } },
 		},
+		{
+			name: 'core/image',
+			attributes: {
+				blob: { type: 'string', role: 'local' },
+				url: { type: 'string' },
+			},
+		},
+		{
+			name: 'core/table',
+			attributes: {
+				hasFixedLayout: { type: 'boolean' },
+				caption: { type: 'rich-text' },
+				head: { type: 'array' },
+				body: { type: 'array' },
+				foot: { type: 'array' },
+			},
+		},
 	],
 } ) );
 
+/**
+ * WordPress dependencies
+ */
+import { RichTextData } from '@wordpress/rich-text';
+
 /**
  * Internal dependencies
  */
 import {
 	mergeCrdtBlocks,
+	mergeRichTextUpdate,
 	type Block,
 	type YBlock,
 	type YBlocks,
 	type YBlockAttributes,
 } from '../crdt-blocks';
+import { getCachedRichTextData, createRichTextDataCache } from '../crdt-text';
 
 describe( 'crdt-blocks', () => {
 	let doc: Y.Doc;
@@ -174,32 +198,30 @@ describe( 'crdt-blocks', () => {
 			expect( innerBlock.get( 'name' ) ).toBe( 'core/paragraph' );
 		} );
 
-		it( 'skips gallery blocks with unuploaded images (blob attributes)', () => {
-			const galleryWithBlobs: Block[] = [
+		it( 'strips local attributes when syncing blocks', () => {
+			const imageWithBlob: Block[] = [
 				{
-					name: 'core/gallery',
-					attributes: {},
-					innerBlocks: [
-						{
-							name: 'core/image',
-							attributes: {
-								url: 'http://example.com/image.jpg',
-								blob: 'blob:...',
-							},
-							innerBlocks: [],
-						},
-					],
+					name: 'core/image',
+					attributes: {
+						url: 'http://example.com/image.jpg',
+						blob: 'blob:...',
+					},
+					innerBlocks: [],
 				},
 			];
 
-			mergeCrdtBlocks( yblocks, galleryWithBlobs, null );
+			mergeCrdtBlocks( yblocks, imageWithBlob, null );
 
-			// Gallery block should not be synced because it has blob attributes
-			expect( yblocks.length ).toBe( 0 );
+			expect( yblocks.length ).toBe( 1 );
+			const block = yblocks.get( 0 );
+			expect( block.get( 'name' ) ).toBe( 'core/image' );
+			const attrs = block.get( 'attributes' ) as YBlockAttributes;
+			expect( attrs.get( 'url' ) ).toBe( 'http://example.com/image.jpg' );
+			expect( attrs.has( 'blob' ) ).toBe( false );
 		} );
 
-		it( 'syncs gallery blocks without blob attributes', () => {
-			const galleryWithoutBlobs: Block[] = [
+		it( 'strips local attributes from inner blocks', () => {
+			const galleryWithBlobs: Block[] = [
 				{
 					name: 'core/gallery',
 					attributes: {},
@@ -208,6 +230,7 @@ describe( 'crdt-blocks', () => {
 							name: 'core/image',
 							attributes: {
 								url: 'http://example.com/image.jpg',
+								blob: 'blob:...',
 							},
 							innerBlocks: [],
 						},
@@ -215,11 +238,17 @@ describe( 'crdt-blocks', () => {
 				},
 			];
 
-			mergeCrdtBlocks( yblocks, galleryWithoutBlobs, null );
+			mergeCrdtBlocks( yblocks, galleryWithBlobs, null );
 
 			expect( yblocks.length ).toBe( 1 );
-			const block = yblocks.get( 0 );
-			expect( block.get( 'name' ) ).toBe( 'core/gallery' );
+			const gallery = yblocks.get( 0 );
+			expect( gallery.get( 'name' ) ).toBe( 'core/gallery' );
+			const innerBlocks = gallery.get( 'innerBlocks' ) as YBlocks;
+			expect( innerBlocks.length ).toBe( 1 );
+			const image = innerBlocks.get( 0 );
+			const attrs = image.get( 'attributes' ) as YBlockAttributes;
+			expect( attrs.get( 'url' ) ).toBe( 'http://example.com/image.jpg' );
+			expect( attrs.has( 'blob' ) ).toBe( false );
 		} );
 
 		it( 'handles block reordering', () => {
@@ -521,7 +550,7 @@ describe( 'crdt-blocks', () => {
 			expect( content2.toString() ).toBe( 'Freeform content' );
 		} );
 
-		it( 'syncs nested blocks with blob attributes', () => {
+		it( 'strips local attributes from deeply nested blocks', () => {
 			const nestedGallery: Block[] = [
 				{
 					name: 'core/group',
@@ -553,7 +582,13 @@ describe( 'crdt-blocks', () => {
 
 			const innerBlocks = groupBlock.get( 'innerBlocks' ) as YBlocks;
 			expect( innerBlocks.length ).toBe( 1 );
-			expect( innerBlocks.get( 0 ).get( 'name' ) ).toBe( 'core/gallery' );
+			const gallery = innerBlocks.get( 0 );
+			const galleryInner = gallery.get( 'innerBlocks' ) as YBlocks;
+			expect( galleryInner.length ).toBe( 1 );
+			const image = galleryInner.get( 0 );
+			const attrs = image.get( 'attributes' ) as YBlockAttributes;
+			expect( attrs.get( 'url' ) ).toBe( 'http://example.com/image.jpg' );
+			expect( attrs.has( 'blob' ) ).toBe( false );
 		} );
 
 		it( 'handles complex block reordering', () => {
@@ -1069,4 +1104,533 @@ describe( 'crdt-blocks', () => {
 			expect( attrs2.has( 'caption' ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'table block', () => {
+		it( 'preserves table cell content through CRDT round-trip', () => {
+			const tableBlocks: Block[] = [
+				{
+					name: 'core/table',
+					attributes: {
+						hasFixedLayout: true,
+						body: [
+							{
+								cells: [
+									{
+										content:
+											RichTextData.fromPlainText( '1' ),
+										tag: 'td',
+									},
+									{
+										content:
+											RichTextData.fromPlainText( '2' ),
+										tag: 'td',
+									},
+								],
+							},
+							{
+								cells: [
+									{
+										content:
+											RichTextData.fromPlainText( '3' ),
+										tag: 'td',
+									},
+									{
+										content:
+											RichTextData.fromPlainText( '4' ),
+										tag: 'td',
+									},
+								],
+							},
+						],
+					},
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, tableBlocks, null );
+
+			// Simulate a CRDT encode/decode cycle (persistence or sync).
+			const encoded = Y.encodeStateAsUpdate( doc );
+			const doc2 = new Y.Doc();
+			Y.applyUpdate( doc2, encoded );
+
+			const yblocks2 = doc2.getArray< YBlock >();
+			expect( yblocks2.length ).toBe( 1 );
+
+			const block = yblocks2.get( 0 );
+			const attrs = block.get( 'attributes' ) as YBlockAttributes;
+			const body = attrs.get( 'body' ) as {
+				cells: { content: string; tag: string }[];
+			}[];
+
+			expect( body ).toHaveLength( 2 );
+			expect( body[ 0 ].cells[ 0 ].content ).toBe( '1' );
+			expect( body[ 0 ].cells[ 1 ].content ).toBe( '2' );
+			expect( body[ 1 ].cells[ 0 ].content ).toBe( '3' );
+			expect( body[ 1 ].cells[ 1 ].content ).toBe( '4' );
+
+			doc2.destroy();
+		} );
+
+		it( 'preserves table cell content with HTML formatting', () => {
+			const tableBlocks: Block[] = [
+				{
+					name: 'core/table',
+					attributes: {
+						hasFixedLayout: true,
+						head: [
+							{
+								cells: [
+									{
+										content: RichTextData.fromHTMLString(
+											'<strong>Header</strong>'
+										),
+										tag: 'th',
+									},
+								],
+							},
+						],
+						body: [
+							{
+								cells: [
+									{
+										content: RichTextData.fromHTMLString(
+											'<a href="https://example.com">Link</a>'
+										),
+										tag: 'td',
+									},
+								],
+							},
+						],
+					},
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, tableBlocks, null );
+
+			// Round-trip through encode/decode.
+			const encoded = Y.encodeStateAsUpdate( doc );
+			const doc2 = new Y.Doc();
+			Y.applyUpdate( doc2, encoded );
+
+			const yblocks2 = doc2.getArray< YBlock >();
+			const block = yblocks2.get( 0 );
+			const attrs = block.get( 'attributes' ) as YBlockAttributes;
+
+			const head = attrs.get( 'head' ) as {
+				cells: { content: string }[];
+			}[];
+			expect( head[ 0 ].cells[ 0 ].content ).toBe(
+				'<strong>Header</strong>'
+			);
+
+			const body = attrs.get( 'body' ) as {
+				cells: { content: string }[];
+			}[];
+			expect( body[ 0 ].cells[ 0 ].content ).toBe(
+				'<a href="https://example.com">Link</a>'
+			);
+
+			doc2.destroy();
+		} );
+	} );
+
+	describe( 'emoji handling', () => {
+		// Emoji like 😀 (U+1F600) are surrogate pairs in UTF-16 (.length === 2).
+		// The CRDT sync must preserve them without corruption (no U+FFFD / '�').
+
+		it( 'preserves emoji in initial block content', () => {
+			const blocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Hello 😀 World' },
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, blocks, null );
+
+			const block = yblocks.get( 0 );
+			const content = (
+				block.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( content.toString() ).toBe( 'Hello 😀 World' );
+		} );
+
+		it( 'handles inserting emoji into existing rich-text', () => {
+			const initialBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Hello World' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, initialBlocks, null );
+
+			const updatedBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Hello 😀 World' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			// Cursor after 'Hello 😀' = 6 + 2 = 8
+			mergeCrdtBlocks( yblocks, updatedBlocks, 8 );
+
+			const block = yblocks.get( 0 );
+			const content = (
+				block.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( content.toString() ).toBe( 'Hello 😀 World' );
+		} );
+
+		it( 'handles deleting emoji from rich-text', () => {
+			const initialBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Hello 😀 World' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, initialBlocks, null );
+
+			const updatedBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Hello  World' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			// Cursor at position 6 (after 'Hello ', emoji was deleted)
+			mergeCrdtBlocks( yblocks, updatedBlocks, 6 );
+
+			const block = yblocks.get( 0 );
+			const content = (
+				block.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( content.toString() ).toBe( 'Hello  World' );
+		} );
+
+		it( 'handles typing after emoji in rich-text', () => {
+			const initialBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'a😀b' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, initialBlocks, null );
+
+			const updatedBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'a😀xb' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			// Cursor after 'a😀x' = 1 + 2 + 1 = 4
+			mergeCrdtBlocks( yblocks, updatedBlocks, 4 );
+
+			const block = yblocks.get( 0 );
+			const content = (
+				block.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( content.toString() ).toBe( 'a😀xb' );
+		} );
+
+		it( 'handles multiple emoji in rich-text updates', () => {
+			const initialBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '😀🎉🚀' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, initialBlocks, null );
+
+			// Insert ' hello ' between first and second emoji
+			const updatedBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: '😀 hello 🎉🚀' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			// Cursor after '😀 hello ' = 2 + 7 = 9
+			mergeCrdtBlocks( yblocks, updatedBlocks, 9 );
+
+			const block = yblocks.get( 0 );
+			const content = (
+				block.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( content.toString() ).toBe( '😀 hello 🎉🚀' );
+		} );
+	} );
+
+	describe( 'mergeRichTextUpdate - emoji handling', () => {
+		it( 'preserves emoji when appending text', () => {
+			const yText = doc.getText( 'test' );
+			yText.insert( 0, '😀' );
+
+			mergeRichTextUpdate( yText, '😀x' );
+
+			expect( yText.toString() ).toBe( '😀x' );
+		} );
+
+		it( 'preserves emoji when inserting before emoji', () => {
+			const yText = doc.getText( 'test' );
+			yText.insert( 0, '😀' );
+
+			mergeRichTextUpdate( yText, 'x😀' );
+
+			expect( yText.toString() ).toBe( 'x😀' );
+		} );
+
+		it( 'preserves emoji when replacing text around emoji', () => {
+			const yText = doc.getText( 'test' );
+			yText.insert( 0, 'a😀b' );
+
+			mergeRichTextUpdate( yText, 'a😀c', 4 );
+
+			expect( yText.toString() ).toBe( 'a😀c' );
+		} );
+
+		it( 'handles inserting emoji into plain text', () => {
+			const yText = doc.getText( 'test' );
+			yText.insert( 0, 'ab' );
+
+			mergeRichTextUpdate( yText, 'a😀b', 3 );
+
+			expect( yText.toString() ).toBe( 'a😀b' );
+		} );
+
+		it( 'handles deleting emoji', () => {
+			const yText = doc.getText( 'test' );
+			yText.insert( 0, 'a😀b' );
+
+			mergeRichTextUpdate( yText, 'ab', 1 );
+
+			expect( yText.toString() ).toBe( 'ab' );
+		} );
+
+		it( 'handles text with multiple emoji', () => {
+			const yText = doc.getText( 'test' );
+			yText.insert( 0, 'Hello 😀 World 🎉' );
+
+			mergeRichTextUpdate( yText, 'Hello 😀 Beautiful World 🎉', 19 );
+
+			expect( yText.toString() ).toBe( 'Hello 😀 Beautiful World 🎉' );
+		} );
+
+		it( 'handles compound emoji (flag emoji)', () => {
+			// Flag emoji like 🏳️‍🌈 are compound and has .length === 6 in JavaScript
+			const yText = doc.getText( 'test' );
+			yText.insert( 0, 'a🏳️‍🌈b' );
+
+			mergeRichTextUpdate( yText, 'a🏳️‍🌈xb', 7 );
+
+			expect( yText.toString() ).toBe( 'a🏳️‍🌈xb' );
+		} );
+
+		it( 'handles emoji with skin tone modifier', () => {
+			// 👋🏽 is U+1F44B U+1F3FD (wave + medium skin tone), .length === 4
+			const yText = doc.getText( 'test' );
+			yText.insert( 0, 'Hi 👋🏽' );
+
+			mergeRichTextUpdate( yText, 'Hi 👋🏽!', 6 );
+
+			expect( yText.toString() ).toBe( 'Hi 👋🏽!' );
+		} );
+	} );
+
+	describe( 'supplementary plane characters (non-emoji)', () => {
+		// Characters above U+FFFF are stored as surrogate pairs in UTF-16,
+		// so .length === 2 per character. The diff library v8 counts them
+		// as 1 grapheme cluster, causing the same mismatch as emoji.
+
+		describe( 'mergeCrdtBlocks', () => {
+			it( 'handles CJK Extension B characters (rare kanji)', () => {
+				// 𠮷 (U+20BB7) is a real character used in Japanese names.
+				// Surrogate pair: .length === 2.
+				const initialBlocks: Block[] = [
+					{
+						name: 'core/paragraph',
+						attributes: { content: '𠮷野家' },
+						innerBlocks: [],
+						clientId: 'block-1',
+					},
+				];
+
+				mergeCrdtBlocks( yblocks, initialBlocks, null );
+
+				const updatedBlocks: Block[] = [
+					{
+						name: 'core/paragraph',
+						attributes: { content: '𠮷野家は美味しい' },
+						innerBlocks: [],
+						clientId: 'block-1',
+					},
+				];
+
+				// Cursor after '𠮷野家は美味しい' = 2+1+1+1+1+1+1+1 = 9
+				mergeCrdtBlocks( yblocks, updatedBlocks, 9 );
+
+				const block = yblocks.get( 0 );
+				const content = (
+					block.get( 'attributes' ) as YBlockAttributes
+				 ).get( 'content' ) as Y.Text;
+				expect( content.toString() ).toBe( '𠮷野家は美味しい' );
+			} );
+
+			it( 'handles mathematical symbols from supplementary plane', () => {
+				// 𝐀 (U+1D400) — .length === 2
+				const initialBlocks: Block[] = [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'Let 𝐀 be' },
+						innerBlocks: [],
+						clientId: 'block-1',
+					},
+				];
+
+				mergeCrdtBlocks( yblocks, initialBlocks, null );
+
+				const updatedBlocks: Block[] = [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'Let 𝐀 be a matrix' },
+						innerBlocks: [],
+						clientId: 'block-1',
+					},
+				];
+
+				mergeCrdtBlocks( yblocks, updatedBlocks, 18 );
+
+				const block = yblocks.get( 0 );
+				const content = (
+					block.get( 'attributes' ) as YBlockAttributes
+				 ).get( 'content' ) as Y.Text;
+				expect( content.toString() ).toBe( 'Let 𝐀 be a matrix' );
+			} );
+		} );
+
+		describe( 'mergeRichTextUpdate', () => {
+			it( 'preserves CJK Extension B characters when appending', () => {
+				const yText = doc.getText( 'test' );
+				yText.insert( 0, '𠮷' );
+
+				mergeRichTextUpdate( yText, '𠮷x' );
+
+				expect( yText.toString() ).toBe( '𠮷x' );
+			} );
+
+			it( 'handles inserting after CJK Extension B character', () => {
+				const yText = doc.getText( 'test' );
+				yText.insert( 0, 'a𠮷b' );
+
+				mergeRichTextUpdate( yText, 'a𠮷xb', 4 );
+
+				expect( yText.toString() ).toBe( 'a𠮷xb' );
+			} );
+
+			it( 'handles mathematical symbols from supplementary plane', () => {
+				// 𝐀 (U+1D400) — .length === 2
+				const yText = doc.getText( 'test' );
+				yText.insert( 0, 'a𝐀b' );
+
+				mergeRichTextUpdate( yText, 'a𝐀xb', 4 );
+
+				expect( yText.toString() ).toBe( 'a𝐀xb' );
+			} );
+
+			it( 'handles mixed surrogate pairs and BMP text', () => {
+				// 𠮷 (CJK Ext B) + 😀 (emoji) — both surrogate pairs
+				const yText = doc.getText( 'test' );
+				yText.insert( 0, '𠮷😀' );
+
+				mergeRichTextUpdate( yText, '𠮷😀!' );
+
+				expect( yText.toString() ).toBe( '𠮷😀!' );
+			} );
+
+			it( 'handles musical symbols (supplementary plane)', () => {
+				// 𝄞 (U+1D11E, Musical Symbol G Clef) — .length === 2
+				const yText = doc.getText( 'test' );
+				yText.insert( 0, 'a𝄞b' );
+
+				mergeRichTextUpdate( yText, 'a𝄞xb', 4 );
+
+				expect( yText.toString() ).toBe( 'a𝄞xb' );
+			} );
+		} );
+	} );
+} );
+
+describe( 'getCachedRichTextData', () => {
+	let spy: ReturnType< typeof jest.spyOn >;
+
+	beforeEach( () => {
+		spy = jest.spyOn( RichTextData, 'fromHTMLString' );
+	} );
+
+	afterEach( () => {
+		spy.mockRestore();
+	} );
+
+	it( 'does not call fromHTMLString again for the same HTML string', () => {
+		getCachedRichTextData( '<strong>cached-hit</strong>' );
+		getCachedRichTextData( '<strong>cached-hit</strong>' );
+
+		expect( spy ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'calls fromHTMLString for each unique HTML string', () => {
+		getCachedRichTextData( '<strong>cached-miss-a</strong>' );
+		getCachedRichTextData( '<em>cached-miss-b</em>' );
+
+		expect( spy ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'calls fromHTMLString again for an evicted entry', () => {
+		const cacheSize = 10;
+		const getCachedValue = createRichTextDataCache( cacheSize );
+
+		const firstString = 'eviction-test-first';
+
+		getCachedValue( firstString );
+
+		for ( let i = 1; i < cacheSize; i++ ) {
+			getCachedValue( `eviction-test-${ i }` );
+		}
+
+		// This should push firstString out of the cache.
+		getCachedValue( 'eviction-test-overflow' );
+
+		spy.mockClear();
+
+		// firstString was evicted, so fromHTMLString should be called again.
+		getCachedValue( firstString );
+		expect( spy ).toHaveBeenCalledTimes( 1 );
+
+		// The overflow entry is still cached, so fromHTMLString should not be called.
+		getCachedValue( 'eviction-test-overflow' );
+		expect( spy ).toHaveBeenCalledTimes( 1 );
+	} );
 } );

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

@@ -16,6 +16,11 @@ import { CRDT_RECORD_MAP_KEY } from '../../sync';
 
 jest.mock( '@wordpress/data', () => ( {
 	select: jest.fn(),
+	// Needed because @wordpress/rich-text initialises its store at import time.
+	combineReducers: jest.fn( () => jest.fn( () => ( {} ) ) ),
+	createReduxStore: jest.fn( () => ( {} ) ),
+	register: jest.fn(),
+	createSelector: ( selector: Function ) => selector,
 } ) );
 
 jest.mock( '@wordpress/block-editor', () => ( {