RichText: pass value to store

packages/block-editor/src/components/rich-text/content.js

@@ -10,7 +10,12 @@ import deprecated from '@wordpress/deprecated';
  */
 import { getMultilineTag } from './utils';
 
-export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
+export const Content = ( {
+	value = '',
+	tagName: Tag,
+	multiline,
+	...props
+} ) => {
 	// Handle deprecated `children` and `node` sources.
 	if ( Array.isArray( value ) ) {
 		deprecated( 'wp.blockEditor.RichText value prop as children type', {
@@ -29,7 +34,7 @@ export const Content = ( { value, tagName: Tag, multiline, ...props } ) => {
 		value = `<${ MultilineTag }></${ MultilineTag }>`;
 	}
 
-	const content = <RawHTML>{ value }</RawHTML>;
+	const content = <RawHTML>{ value.valueOf() }</RawHTML>;
 
 	if ( Tag ) {
 		const { format, ...restProps } = props;

packages/blocks/package.json

@@ -42,6 +42,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/shortcode": "file:../shortcode",
 		"change-case": "^4.1.2",
 		"colord": "^2.7.0",

packages/blocks/src/api/matchers.js

@@ -3,13 +3,18 @@
  */
 export { attr, prop, text, query } from 'hpq';
 
+/**
+ * WordPress dependencies
+ */
+import { __unstableCreateRichTextString, create } from '@wordpress/rich-text';
+
 /**
  * Internal dependencies
  */
 export { matcher as node } from './node';
 export { matcher as children } from './children';
 
-export function html( selector, multilineTag ) {
+export function html( selector, multilineTag, preserveWhiteSpace ) {
 	return ( domNode ) => {
 		let match = domNode;
 
@@ -38,6 +43,11 @@ export function html( selector, multilineTag ) {
 			return value;
 		}
 
-		return match.innerHTML;
+		return __unstableCreateRichTextString( {
+			// This is faste because we don't need to parse the HTML string.
+			value: create( { element: match } ),
+			multilineTag,
+			preserveWhiteSpace,
+		} );
 	};
 }

packages/blocks/src/api/parser/get-block-attributes.js

@@ -59,7 +59,7 @@ export const toBooleanAttributeMatcher = ( matcher ) =>
 export function isOfType( value, type ) {
 	switch ( type ) {
 		case 'string':
-			return typeof value === 'string';
+			return value instanceof String || typeof value === 'string';
 
 		case 'boolean':
 			return typeof value === 'boolean';
@@ -208,7 +208,11 @@ export const matcherFromSource = memoize( ( sourceConfig ) => {
 
 			return matcher;
 		case 'html':
-			return html( sourceConfig.selector, sourceConfig.multiline );
+			return html(
+				sourceConfig.selector,
+				sourceConfig.multiline,
+				sourceConfig.preserveWhitespace
+			);
 		case 'text':
 			return text( sourceConfig.selector );
 		case 'children':

packages/blocks/src/api/utils.js

@@ -47,8 +47,14 @@ export function isUnmodifiedBlock( block ) {
 	const newBlock = isUnmodifiedBlock[ block.name ];
 	const blockType = getBlockType( block.name );
 
+	function valueOf( value ) {
+		return typeof value === 'object' ? value.valueOf() : value;
+	}
+
 	return Object.keys( blockType?.attributes ?? {} ).every(
-		( key ) => newBlock.attributes[ key ] === block.attributes[ key ]
+		( key ) =>
+			valueOf( newBlock.attributes[ key ] ) ===
+			valueOf( block.attributes[ key ] )
 	);
 }
 

packages/e2e-test-utils-playwright/src/editor/get-blocks.ts

@@ -22,6 +22,20 @@ export async function getBlocks( this: Editor ) {
 			return [];
 		}
 
-		return blocks;
+		function normaliseBlocks( _blocks: any[] ): any[] {
+			return _blocks.map( ( block ) => {
+				return {
+					...block,
+					attributes: Object.fromEntries(
+						Object.entries( block.attributes ).map(
+							( [ k, v ] ) => [ k, v?.valueOf() ]
+						)
+					),
+					innerBlocks: normaliseBlocks( block.innerBlocks ),
+				};
+			} );
+		}
+
+		return normaliseBlocks( blocks );
 	} );
 }

packages/element/src/serialize.js

@@ -651,7 +651,7 @@ export function renderNativeComponent(
 		props = restProps;
 	} else if (
 		props.dangerouslySetInnerHTML &&
-		typeof props.dangerouslySetInnerHTML.__html === 'string'
+		props.dangerouslySetInnerHTML.__html
 	) {
 		// Dangerous content is left unescaped.
 		content = props.dangerouslySetInnerHTML.__html;

packages/rich-text/src/component/index.js

@@ -10,7 +10,6 @@ import { useRegistry } from '@wordpress/data';
  */
 import { create } from '../create';
 import { apply } from '../to-dom';
-import { toHTMLString } from '../to-html-string';
 import { useDefaultStyle } from './use-default-style';
 import { useBoundaryStyle } from './use-boundary-style';
 import { useCopyHandler } from './use-copy-handler';
@@ -19,6 +18,7 @@ import { useSelectObject } from './use-select-object';
 import { useInputAndSelection } from './use-input-and-selection';
 import { useSelectionChangeCompat } from './use-selection-change-compat';
 import { useDelete } from './use-delete';
+import { createRichTextString } from '../value';
 
 export function useRichText( {
 	value = '',
@@ -71,10 +71,13 @@ export function useRichText( {
 
 	function setRecordFromProps() {
 		_value.current = value;
-		record.current = create( {
-			html: value,
-			preserveWhiteSpace,
-		} );
+		record.current =
+			typeof value === 'string'
+				? create( {
+						html: value,
+						preserveWhiteSpace,
+				  } )
+				: value.value;
 		if ( disableFormats ) {
 			record.current.formats = Array( value.length );
 			record.current.replacements = Array( value.length );
@@ -132,7 +135,7 @@ export function useRichText( {
 		if ( disableFormats ) {
 			_value.current = newRecord.text;
 		} else {
-			_value.current = toHTMLString( {
+			_value.current = createRichTextString( {
 				value: __unstableBeforeSerialize
 					? {
 							...newRecord,
@@ -161,7 +164,7 @@ export function useRichText( {
 	function handleChangesUponInit( newRecord ) {
 		record.current = newRecord;
 
-		_value.current = toHTMLString( {
+		_value.current = createRichTextString( {
 			value: __unstableBeforeSerialize
 				? {
 						...newRecord,

packages/rich-text/src/create.js

@@ -157,6 +157,10 @@ export function create( {
 		};
 	}
 
+	if ( html instanceof String ) {
+		return html.value;
+	}
+
 	if ( typeof html === 'string' && html.length > 0 ) {
 		// It does not matter which document this is, we're just using it to
 		// parse.

packages/rich-text/src/index.ts

@@ -22,6 +22,7 @@ export { toHTMLString } from './to-html-string';
 export { toggleFormat } from './toggle-format';
 export { unregisterFormatType } from './unregister-format-type';
 export { createElement as __unstableCreateElement } from './create-element';
+export { createRichTextString as __unstableCreateRichTextString } from './value';
 
 export { useAnchorRef } from './component/use-anchor-ref';
 export { useAnchor } from './component/use-anchor';

packages/rich-text/src/value.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { toHTMLString } from './to-html-string';
+
+export function createRichTextString( args ) {
+	const string = new String( toHTMLString( args ) );
+
+	for ( const key in args ) {
+		Object.defineProperty( string, key, {
+			value: args[ key ],
+		} );
+	}
+
+	return string;
+}

test/e2e/specs/editor/various/undo.spec.js

@@ -119,6 +119,9 @@ test.describe( 'undo', () => {
 			endOffset: 'before keyboard '.length,
 		} );
 
+		// Undo the collapsed bold command.
+		await pageUtils.pressKeys( 'primary+z' );
+
 		await pageUtils.pressKeys( 'primary+z' );
 
 		await expect.poll( editor.getEditedPostContent ).toBe( '' );
@@ -142,6 +145,9 @@ test.describe( 'undo', () => {
 			endOffset: 'before keyboard '.length,
 		} );
 
+		// Redo the collapsed bold command.
+		await pageUtils.pressKeys( 'primaryShift+z' );
+
 		await pageUtils.pressKeys( 'primaryShift+z' );
 
 		await expect.poll( editor.getBlocks ).toMatchObject( [