@wordpress/core-data 7.42.0 → 7.43.0

package/src/utils/crdt-blocks.ts

@@ -16,6 +16,7 @@ import { Y } from '@wordpress/sync';
  * Internal dependencies
  */
 import { createYMap, type YMapRecord, type YMapWrap } from './crdt-utils';
+import { getCachedRichTextData } from './crdt-text';
 import { Delta } from '../sync';
 
 interface BlockAttributes {
@@ -25,6 +26,7 @@ interface BlockAttributes {
 interface BlockAttributeType {
 	role?: string;
 	type?: string;
+	query?: Record< string, BlockAttributeType >;
 }
 
 interface BlockType {
@@ -122,6 +124,85 @@ function makeBlocksSerializable( blocks: Block[] ): Block[] {
 	} );
 }
 
+/**
+ * Recursively walk an attribute value and convert any strings that correspond
+ * to rich-text schema nodes into RichTextData instances. This is the inverse
+ * of serializeAttributeValue and handles nested structures like table cells.
+ *
+ * @param schema The attribute type definition for this value.
+ * @param value  The attribute value from CRDT (toJSON).
+ * @return The value with rich-text strings replaced by RichTextData.
+ */
+function deserializeAttributeValue(
+	schema: BlockAttributeType | undefined,
+	value: unknown
+): unknown {
+	if ( schema?.type === 'rich-text' && typeof value === 'string' ) {
+		return getCachedRichTextData( value );
+	}
+
+	// e.g. core/table `body`: [ { cells: [ { content: RichTextData } ] } ]
+	if ( Array.isArray( value ) ) {
+		return value.map( ( item ) =>
+			deserializeAttributeValue( schema, item )
+		);
+	}
+
+	// e.g. a single row inside core/table `body`: { cells: [ ... ] }
+	if ( value && typeof value === 'object' ) {
+		const result: Record< string, unknown > = {};
+
+		for ( const [ key, innerValue ] of Object.entries(
+			value as Record< string, unknown >
+		) ) {
+			result[ key ] = deserializeAttributeValue(
+				schema?.query?.[ key ],
+				innerValue
+			);
+		}
+
+		return result;
+	}
+
+	return value;
+}
+
+/**
+ * Convert blocks from their CRDT-serialized form back to the runtime form
+ * expected by the block editor. Rich-text attributes are stored as Y.Text in
+ * the CRDT document, which serializes to plain strings via toJSON(). This
+ * function restores them to RichTextData instances so that block edit
+ * components that rely on RichTextData methods (e.g. `.text`) work correctly.
+ *
+ * @param blocks Blocks as extracted from the CRDT document via toJSON().
+ * @return Blocks with rich-text attributes restored to RichTextData.
+ */
+export function deserializeBlockAttributes( blocks: Block[] ): Block[] {
+	return blocks.map( ( block: Block ) => {
+		const { name, innerBlocks, attributes, ...rest } = block;
+
+		const newAttributes = { ...attributes };
+
+		for ( const [ key, value ] of Object.entries( attributes ) ) {
+			const schema = getBlockAttributeType( name, key );
+
+			if ( schema ) {
+				newAttributes[ key ] = deserializeAttributeValue(
+					schema,
+					value
+				);
+			}
+		}
+
+		return {
+			...rest,
+			name,
+			attributes: newAttributes,
+			innerBlocks: deserializeBlockAttributes( innerBlocks ?? [] ),
+		};
+	} );
+}
+
 /**
  * @param {any}   gblock
  * @param {Y.Map} yblock
@@ -481,8 +562,8 @@ function getBlockAttributeType(
 				new Map< string, BlockAttributeType >(
 					Object.entries( blockType.attributes ?? {} ).map(
 						( [ name, definition ] ) => {
-							const { role, type } = definition;
-							return [ name, { role, type } ];
+							const { role, type, query } = definition;
+							return [ name, { role, type, query } ];
 						}
 					)
 				)

package/src/utils/crdt-text.ts

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { RichTextData } from '@wordpress/rich-text';
+
+const RICH_TEXT_CACHE_MAX_SIZE = 500;
+
+/**
+ * Returns a function that converts HTML strings to RichTextData instances,
+ * using a FIFO cache bounded by `maxSize` to avoid re-parsing identical
+ * strings. Repeated calls with the same string return the cached instance
+ * without re-running the HTML parser and DOM traversal.
+ *
+ * @param maxSize Maximum number of entries to hold in the cache.
+ * @return A cached version of RichTextData.fromHTMLString.
+ */
+export function createRichTextDataCache(
+	maxSize: number
+): ( value: string ) => RichTextData {
+	const cache = new Map< string, RichTextData >();
+
+	return function ( value: string ): RichTextData {
+		const cached = cache.get( value );
+
+		if ( cached ) {
+			return cached;
+		}
+
+		const result = RichTextData.fromHTMLString( value );
+
+		if ( cache.size >= maxSize ) {
+			// Evict the oldest entry (Map preserves insertion order).
+			cache.delete( cache.keys().next().value! );
+		}
+
+		cache.set( value, result );
+		return result;
+	};
+}
+
+export const getCachedRichTextData = createRichTextDataCache(
+	RICH_TEXT_CACHE_MAX_SIZE
+);

package/src/utils/crdt.ts

@@ -20,6 +20,7 @@ import {
  */
 import { BaseAwareness } from '../awareness/base-awareness';
 import {
+	deserializeBlockAttributes,
 	mergeCrdtBlocks,
 	mergeRichTextUpdate,
 	type Block,
@@ -382,6 +383,15 @@ export function getPostChangesFromCRDTDoc(
 		} )
 	);
 
+	// Blocks extracted from the CRDT document have rich-text attributes as
+	// plain strings (from Y.Text.toJSON()). Convert them back to RichTextData
+	// so block edit components receive the same types as locally-created blocks.
+	if ( changes.blocks ) {
+		changes.blocks = deserializeBlockAttributes(
+			changes.blocks as Block[]
+		);
+	}
+
 	// Meta changes must be merged with the edited record since not all meta
 	// properties are synced.
 	if ( 'object' === typeof changes.meta ) {

package/src/utils/index.js

@@ -5,7 +5,6 @@ export { default as forwardResolver } from './forward-resolver';
 export { default as onSubKey } from './on-sub-key';
 export { default as replaceAction } from './replace-action';
 export { default as withWeakMapCache } from './with-weak-map-cache';
-export { default as isRawAttribute } from './is-raw-attribute';
 export { default as setNestedValue } from './set-nested-value';
 export { default as getNestedValue } from './get-nested-value';
 export { default as isNumericID } from './is-numeric-id';

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

@@ -67,6 +67,7 @@ import {
 	type YBlocks,
 	type YBlockAttributes,
 } from '../crdt-blocks';
+import { getCachedRichTextData, createRichTextDataCache } from '../crdt-text';
 
 describe( 'crdt-blocks', () => {
 	let doc: Y.Doc;
@@ -1581,3 +1582,55 @@ describe( 'crdt-blocks', () => {
 		} );
 	} );
 } );
+
+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.ts

@@ -8,6 +8,49 @@ import { Y } from '@wordpress/sync';
  */
 import { describe, expect, it, jest, beforeEach } from '@jest/globals';
 
+/**
+ * Mock getBlockTypes so isRichTextAttribute can identify rich-text attrs.
+ */
+jest.mock( '@wordpress/blocks', () => {
+	const actual = jest.requireActual( '@wordpress/blocks' ) as Record<
+		string,
+		unknown
+	>;
+	return {
+		...actual,
+		getBlockTypes: () => [
+			{
+				name: 'core/paragraph',
+				attributes: { content: { type: 'rich-text' } },
+			},
+			{
+				name: 'core/table',
+				attributes: {
+					hasFixedLayout: { type: 'boolean' },
+					caption: { type: 'rich-text' },
+					body: {
+						type: 'array',
+						query: {
+							cells: {
+								type: 'array',
+								query: {
+									content: { type: 'rich-text' },
+									tag: { type: 'string' },
+								},
+							},
+						},
+					},
+				},
+			},
+		],
+	};
+} );
+
+/**
+ * WordPress dependencies
+ */
+import { RichTextData } from '@wordpress/rich-text';
+
 /**
  * Internal dependencies
  */
@@ -515,6 +558,68 @@ describe( 'crdt', () => {
 			expect( changes ).toHaveProperty( 'blocks' );
 		} );
 
+		it( 'returns rich-text block attributes as RichTextData, not strings', () => {
+			// Simulate User A writing a paragraph block into the CRDT doc.
+			addBlockToDoc( map, 'block-1', 'Hello world' );
+
+			// Simulate User B reading the CRDT doc with no local blocks.
+			const editedRecord = { blocks: [] } as unknown as Post;
+
+			const changes = getPostChangesFromCRDTDoc(
+				doc,
+				editedRecord,
+				defaultSyncedProperties
+			);
+
+			const block = ( changes.blocks as any[] )?.[ 0 ];
+			expect( block ).toBeDefined();
+			expect( block.attributes.content ).toBeInstanceOf( RichTextData );
+			expect( block.attributes.content.text ).toBe( 'Hello world' );
+		} );
+
+		it( 'returns nested rich-text in array attributes as RichTextData', () => {
+			// Add a table block to the CRDT doc with nested cell content
+			// stored as plain strings.
+			let blocks = map.get( 'blocks' );
+			if ( ! ( blocks instanceof Y.Array ) ) {
+				blocks = new Y.Array< YBlock >();
+				map.set( 'blocks', blocks );
+			}
+
+			const tableBlock = createYMap< YBlockRecord >();
+			tableBlock.set( 'name', 'core/table' );
+			tableBlock.set( 'clientId', 'table-1' );
+			const attrs = new Y.Map();
+			attrs.set( 'body', [
+				{
+					cells: [
+						{ content: '<strong>Cell</strong>', tag: 'td' },
+						{ content: 'Plain', tag: 'td' },
+					],
+				},
+			] );
+			tableBlock.set( 'attributes', attrs );
+			tableBlock.set( 'innerBlocks', new Y.Array() );
+			( blocks as YBlocks ).push( [ tableBlock ] );
+
+			const editedRecord = { blocks: [] } as unknown as Post;
+
+			const changes = getPostChangesFromCRDTDoc(
+				doc,
+				editedRecord,
+				defaultSyncedProperties
+			);
+
+			const block = ( changes.blocks as any[] )?.[ 0 ];
+			expect( block ).toBeDefined();
+
+			const cell = block.attributes.body[ 0 ].cells[ 0 ];
+			expect( cell.content ).toBeInstanceOf( RichTextData );
+			expect( ( cell.content as RichTextData ).toHTMLString() ).toBe(
+				'<strong>Cell</strong>'
+			);
+		} );
+
 		it( 'includes undefined blocks in changes', () => {
 			map.set( 'blocks', undefined );
 
@@ -801,11 +906,13 @@ describe( 'crdt', () => {
  * @param map
  * @param clientId Block client ID.
  * @param content  Initial text content.
+ * @param name     Block name (default: 'core/paragraph').
  */
 function addBlockToDoc(
 	map: YMapWrap< YPostRecord >,
 	clientId: string,
-	content: string
+	content: string,
+	name = 'core/paragraph'
 ): Y.Text {
 	let blocks = map.get( 'blocks' );
 	if ( ! ( blocks instanceof Y.Array ) ) {
@@ -814,6 +921,7 @@ function addBlockToDoc(
 	}
 
 	const block = createYMap< YBlockRecord >();
+	block.set( 'name', name );
 	block.set( 'clientId', clientId );
 	const attrs = new Y.Map();
 	const ytext = new Y.Text( content );

package/build/utils/is-raw-attribute.cjs

@@ -1,29 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/core-data/src/utils/is-raw-attribute.js
-var is_raw_attribute_exports = {};
-__export(is_raw_attribute_exports, {
-  default: () => isRawAttribute
-});
-module.exports = __toCommonJS(is_raw_attribute_exports);
-function isRawAttribute(entity, attribute) {
-  return (entity.rawAttributes || []).includes(attribute);
-}
-//# sourceMappingURL=is-raw-attribute.cjs.map

package/build/utils/is-raw-attribute.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/is-raw-attribute.js"],
-  "sourcesContent": ["/**\n * Checks whether the attribute is a \"raw\" attribute or not.\n *\n * @param {Object} entity    Entity record.\n * @param {string} attribute Attribute name.\n *\n * @return {boolean} Is the attribute raw\n */\nexport default function isRawAttribute( entity, attribute ) {\n\treturn ( entity.rawAttributes || [] ).includes( attribute );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQe,SAAR,eAAiC,QAAQ,WAAY;AAC3D,UAAS,OAAO,iBAAiB,CAAC,GAAI,SAAU,SAAU;AAC3D;",
-  "names": []
-}

package/build-module/utils/is-raw-attribute.mjs

@@ -1,8 +0,0 @@
-// packages/core-data/src/utils/is-raw-attribute.js
-function isRawAttribute(entity, attribute) {
-  return (entity.rawAttributes || []).includes(attribute);
-}
-export {
-  isRawAttribute as default
-};
-//# sourceMappingURL=is-raw-attribute.mjs.map

package/build-module/utils/is-raw-attribute.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/is-raw-attribute.js"],
-  "sourcesContent": ["/**\n * Checks whether the attribute is a \"raw\" attribute or not.\n *\n * @param {Object} entity    Entity record.\n * @param {string} attribute Attribute name.\n *\n * @return {boolean} Is the attribute raw\n */\nexport default function isRawAttribute( entity, attribute ) {\n\treturn ( entity.rawAttributes || [] ).includes( attribute );\n}\n"],
-  "mappings": ";AAQe,SAAR,eAAiC,QAAQ,WAAY;AAC3D,UAAS,OAAO,iBAAiB,CAAC,GAAI,SAAU,SAAU;AAC3D;",
-  "names": []
-}

package/build-types/utils/is-raw-attribute.d.ts

@@ -1,10 +0,0 @@
-/**
- * Checks whether the attribute is a "raw" attribute or not.
- *
- * @param {Object} entity    Entity record.
- * @param {string} attribute Attribute name.
- *
- * @return {boolean} Is the attribute raw
- */
-export default function isRawAttribute(entity: any, attribute: string): boolean;
-//# sourceMappingURL=is-raw-attribute.d.ts.map

package/build-types/utils/is-raw-attribute.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"is-raw-attribute.d.ts","sourceRoot":"","sources":["../../src/utils/is-raw-attribute.js"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,+DAJW,MAAM,GAEL,OAAO,CAIlB"}

package/src/utils/is-raw-attribute.js

@@ -1,11 +0,0 @@
-/**
- * Checks whether the attribute is a "raw" attribute or not.
- *
- * @param {Object} entity    Entity record.
- * @param {string} attribute Attribute name.
- *
- * @return {boolean} Is the attribute raw
- */
-export default function isRawAttribute( entity, attribute ) {
-	return ( entity.rawAttributes || [] ).includes( attribute );
-}

package/src/utils/test/is-raw-attribute.js

@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import { isRawAttribute } from '../';
-
-describe( 'isRawAttribute', () => {
-	it( 'should correctly assess that the attribute is not raw', () => {
-		const entityConfig = {
-			kind: 'someKind',
-			name: 'someName',
-		};
-		expect( isRawAttribute( entityConfig, 'title' ) ).toBe( false );
-	} );
-	it( 'should correctly assess that the attribute is raw', () => {
-		const entityConfig = {
-			kind: 'someKind',
-			name: 'someName',
-			rawAttributes: [ 'title' ],
-		};
-		expect( isRawAttribute( entityConfig, 'title' ) ).toBe( true );
-	} );
-} );