@wordpress/core-data 7.40.2-next.v.202602241322.0 → 7.41.0

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

@@ -39,6 +39,7 @@ jest.mock( '@wordpress/blocks', () => ( {
  */
 import {
 	mergeCrdtBlocks,
+	mergeRichTextUpdate,
 	type Block,
 	type YBlock,
 	type YBlocks,
@@ -477,5 +478,942 @@ describe( 'crdt-blocks', () => {
 			// The level attribute should still exist
 			expect( attributes.get( 'level' ) ).toBe( 1 );
 		} );
+
+		it( 'handles block type changes from non-rich-text to rich-text', () => {
+			// Start with freeform block (content is non-rich-text)
+			const freeformBlocks: Block[] = [
+				{
+					name: 'core/freeform',
+					attributes: { content: 'Freeform content' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, freeformBlocks, null );
+
+			const block1 = yblocks.get( 0 );
+			const content1 = (
+				block1.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' );
+			expect( block1.get( 'name' ) ).toBe( 'core/freeform' );
+			expect( typeof content1 ).toBe( 'string' );
+			expect( content1 ).toBe( 'Freeform content' );
+
+			// Change to paragraph block (content becomes rich-text)
+			const paragraphBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Freeform content' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, paragraphBlocks, null );
+
+			expect( yblocks.length ).toBe( 1 );
+			const block2 = yblocks.get( 0 );
+			const content2 = (
+				block2.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( block2.get( 'name' ) ).toBe( 'core/paragraph' );
+			expect( content2 ).toBeInstanceOf( Y.Text );
+			expect( content2.toString() ).toBe( 'Freeform content' );
+		} );
+
+		it( 'syncs nested blocks with blob attributes', () => {
+			const nestedGallery: Block[] = [
+				{
+					name: 'core/group',
+					attributes: {},
+					innerBlocks: [
+						{
+							name: 'core/gallery',
+							attributes: {},
+							innerBlocks: [
+								{
+									name: 'core/image',
+									attributes: {
+										url: 'http://example.com/image.jpg',
+										blob: 'blob:...',
+									},
+									innerBlocks: [],
+								},
+							],
+						},
+					],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, nestedGallery, null );
+
+			expect( yblocks.length ).toBe( 1 );
+			const groupBlock = yblocks.get( 0 );
+			expect( groupBlock.get( 'name' ) ).toBe( 'core/group' );
+
+			const innerBlocks = groupBlock.get( 'innerBlocks' ) as YBlocks;
+			expect( innerBlocks.length ).toBe( 1 );
+			expect( innerBlocks.get( 0 ).get( 'name' ) ).toBe( 'core/gallery' );
+		} );
+
+		it( 'handles complex block reordering', () => {
+			const initialBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'A' },
+					innerBlocks: [],
+					clientId: 'block-a',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'B' },
+					innerBlocks: [],
+					clientId: 'block-b',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'C' },
+					innerBlocks: [],
+					clientId: 'block-c',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'D' },
+					innerBlocks: [],
+					clientId: 'block-d',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'E' },
+					innerBlocks: [],
+					clientId: 'block-e',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, initialBlocks, null );
+			expect( yblocks.length ).toBe( 5 );
+
+			// Reorder: [A, B, C, D, E] -> [C, A, E, B, D]
+			const reorderedBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'C' },
+					innerBlocks: [],
+					clientId: 'block-c',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'A' },
+					innerBlocks: [],
+					clientId: 'block-a',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'E' },
+					innerBlocks: [],
+					clientId: 'block-e',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'B' },
+					innerBlocks: [],
+					clientId: 'block-b',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'D' },
+					innerBlocks: [],
+					clientId: 'block-d',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, reorderedBlocks, null );
+
+			expect( yblocks.length ).toBe( 5 );
+			const contents = [ 'C', 'A', 'E', 'B', 'D' ];
+			contents.forEach( ( expectedContent, i ) => {
+				const block = yblocks.get( i );
+				const content = (
+					block.get( 'attributes' ) as YBlockAttributes
+				 ).get( 'content' ) as Y.Text;
+				expect( content.toString() ).toBe( expectedContent );
+			} );
+		} );
+
+		it( 'handles many deletions (10 blocks to 2 blocks)', () => {
+			const manyBlocks: Block[] = Array.from(
+				{ length: 10 },
+				( _, i ) => ( {
+					name: 'core/paragraph',
+					attributes: { content: `Block ${ i }` },
+					innerBlocks: [],
+					clientId: `block-${ i }`,
+				} )
+			);
+
+			mergeCrdtBlocks( yblocks, manyBlocks, null );
+			expect( yblocks.length ).toBe( 10 );
+
+			const fewBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Block 0' },
+					innerBlocks: [],
+					clientId: 'block-0',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Block 9' },
+					innerBlocks: [],
+					clientId: 'block-9',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, fewBlocks, null );
+
+			expect( yblocks.length ).toBe( 2 );
+			const content0 = (
+				yblocks.get( 0 ).get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( content0.toString() ).toBe( 'Block 0' );
+			const content1 = (
+				yblocks.get( 1 ).get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( content1.toString() ).toBe( 'Block 9' );
+		} );
+
+		it( 'handles many insertions (2 blocks to 10 blocks)', () => {
+			const fewBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Block 0' },
+					innerBlocks: [],
+					clientId: 'block-0',
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Block 9' },
+					innerBlocks: [],
+					clientId: 'block-9',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, fewBlocks, null );
+			expect( yblocks.length ).toBe( 2 );
+
+			const manyBlocks: Block[] = Array.from(
+				{ length: 10 },
+				( _, i ) => ( {
+					name: 'core/paragraph',
+					attributes: { content: `Block ${ i }` },
+					innerBlocks: [],
+					clientId: `block-${ i }`,
+				} )
+			);
+
+			mergeCrdtBlocks( yblocks, manyBlocks, null );
+
+			expect( yblocks.length ).toBe( 10 );
+			manyBlocks.forEach( ( block, i ) => {
+				const yblock = yblocks.get( i );
+				const content = (
+					yblock.get( 'attributes' ) as YBlockAttributes
+				 ).get( 'content' ) as Y.Text;
+				expect( content.toString() ).toBe( `Block ${ i }` );
+			} );
+		} );
+
+		it( 'handles changes with all different block content', () => {
+			const blocksA: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'A1' },
+					innerBlocks: [],
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'A2' },
+					innerBlocks: [],
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'A3' },
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, blocksA, null );
+			expect( yblocks.length ).toBe( 3 );
+
+			const blocksB: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'B1' },
+					innerBlocks: [],
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'B2' },
+					innerBlocks: [],
+				},
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'B3' },
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, blocksB, null );
+
+			expect( yblocks.length ).toBe( 3 );
+			[ 'B1', 'B2', 'B3' ].forEach( ( expected, i ) => {
+				const content = (
+					yblocks.get( i ).get( 'attributes' ) as YBlockAttributes
+				 ).get( 'content' ) as Y.Text;
+				expect( content.toString() ).toBe( expected );
+			} );
+		} );
+
+		it( 'clears all blocks when syncing empty array', () => {
+			const blocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Content' },
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, blocks, null );
+			expect( yblocks.length ).toBe( 1 );
+
+			mergeCrdtBlocks( yblocks, [], null );
+			expect( yblocks.length ).toBe( 0 );
+		} );
+
+		it( 'handles deeply nested blocks', () => {
+			const deeplyNested: Block[] = [
+				{
+					name: 'core/group',
+					attributes: {},
+					innerBlocks: [
+						{
+							name: 'core/group',
+							attributes: {},
+							innerBlocks: [
+								{
+									name: 'core/group',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/group',
+											attributes: {},
+											innerBlocks: [
+												{
+													name: 'core/paragraph',
+													attributes: {
+														content: 'Deep content',
+													},
+													innerBlocks: [],
+												},
+											],
+										},
+									],
+								},
+							],
+						},
+					],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, deeplyNested, null );
+
+			// Navigate to the deepest block
+			let current: YBlocks | YBlock = yblocks;
+			for ( let i = 0; i < 4; i++ ) {
+				expect( ( current as YBlocks ).length ).toBe( 1 );
+				current = ( current as YBlocks ).get( 0 );
+				current = ( current as YBlock ).get( 'innerBlocks' ) as YBlocks;
+			}
+
+			expect( ( current as YBlocks ).length ).toBe( 1 );
+			const deepBlock = ( current as YBlocks ).get( 0 );
+			const content = (
+				deepBlock.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( content.toString() ).toBe( 'Deep content' );
+
+			// Update innermost block
+			const updatedDeep: Block[] = [
+				{
+					name: 'core/group',
+					attributes: {},
+					innerBlocks: [
+						{
+							name: 'core/group',
+							attributes: {},
+							innerBlocks: [
+								{
+									name: 'core/group',
+									attributes: {},
+									innerBlocks: [
+										{
+											name: 'core/group',
+											attributes: {},
+											innerBlocks: [
+												{
+													name: 'core/paragraph',
+													attributes: {
+														content: 'Updated deep',
+													},
+													innerBlocks: [],
+												},
+											],
+										},
+									],
+								},
+							],
+						},
+					],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, updatedDeep, null );
+
+			// Verify update propagated
+			current = yblocks;
+			for ( let i = 0; i < 4; i++ ) {
+				current = ( current as YBlocks ).get( 0 );
+				current = ( current as YBlock ).get( 'innerBlocks' ) as YBlocks;
+			}
+			const updatedBlock = ( current as YBlocks ).get( 0 );
+			const updatedContent = (
+				updatedBlock.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( updatedContent.toString() ).toBe( 'Updated deep' );
+		} );
+
+		it( 'handles null and undefined attribute values', () => {
+			const blocksWithNullAttrs: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'Content',
+						customAttr: null,
+						otherAttr: undefined,
+					},
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, blocksWithNullAttrs, null );
+
+			expect( yblocks.length ).toBe( 1 );
+			const block = yblocks.get( 0 );
+			const attributes = block.get( 'attributes' ) as YBlockAttributes;
+			expect( attributes.get( 'content' ) ).toBeInstanceOf( Y.Text );
+			expect( attributes.get( 'customAttr' ) ).toBe( null );
+		} );
+
+		it( 'handles rich-text updates with cursor at start', () => {
+			const blocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Hello World' },
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, blocks, null );
+
+			const updatedBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'XHello World' },
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, updatedBlocks, 0 );
+
+			const block = yblocks.get( 0 );
+			const content = (
+				block.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( content.toString() ).toBe( 'XHello World' );
+		} );
+
+		it( 'handles rich-text updates with cursor at end', () => {
+			const blocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Hello World' },
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, blocks, null );
+
+			const updatedBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Hello World!' },
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, updatedBlocks, 11 );
+
+			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 rich-text updates with cursor beyond text length', () => {
+			const blocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Hello' },
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, blocks, null );
+
+			const updatedBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Hello World' },
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, updatedBlocks, 999 );
+
+			const block = yblocks.get( 0 );
+			const content = (
+				block.get( 'attributes' ) as YBlockAttributes
+			 ).get( 'content' ) as Y.Text;
+			expect( content.toString() ).toBe( 'Hello World' );
+		} );
+
+		it( 'deletes extra block properties not in incoming blocks', () => {
+			const initialBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Content' },
+					innerBlocks: [],
+					clientId: 'block-1',
+					isValid: true,
+					originalContent: 'Original',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, initialBlocks, null );
+
+			const block1 = yblocks.get( 0 );
+			expect( block1.get( 'isValid' ) ).toBe( true );
+			expect( block1.get( 'originalContent' ) ).toBe( 'Original' );
+
+			const updatedBlocks: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: { content: 'Content' },
+					innerBlocks: [],
+					clientId: 'block-1',
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, updatedBlocks, null );
+
+			const block2 = yblocks.get( 0 );
+			expect( block2.has( 'isValid' ) ).toBe( false );
+			expect( block2.has( 'originalContent' ) ).toBe( false );
+		} );
+
+		it( 'deletes rich-text attributes when removed from block', () => {
+			const blocksWithRichText: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'Rich text content',
+						caption: 'Caption text',
+					},
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, blocksWithRichText, null );
+
+			const block1 = yblocks.get( 0 );
+			const attrs1 = block1.get( 'attributes' ) as YBlockAttributes;
+			expect( attrs1.has( 'content' ) ).toBe( true );
+			expect( attrs1.has( 'caption' ) ).toBe( true );
+
+			const blocksWithoutCaption: Block[] = [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'Rich text content',
+					},
+					innerBlocks: [],
+				},
+			];
+
+			mergeCrdtBlocks( yblocks, blocksWithoutCaption, null );
+
+			const block2 = yblocks.get( 0 );
+			const attrs2 = block2.get( 'attributes' ) as YBlockAttributes;
+			expect( attrs2.has( 'content' ) ).toBe( true );
+			expect( attrs2.has( 'caption' ) ).toBe( false );
+		} );
+	} );
+
+	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' );
+			} );
+		} );
 	} );
 } );