Reuse toHTMLString

packages/block-editor/src/components/rich-text/use-paste-handler.js

@@ -194,7 +194,7 @@ export function usePasteHandler( props ) {
  disableFilters: !! clipboardData.getData( 'rich-text' ),
  } );
 
- if ( typeof content === 'string' ) {
+ if ( typeof content === 'string' || content instanceof String ) {
  const valueToInsert = create( { html: content } );
  addActiveFormats( valueToInsert, value.activeFormats );
  onChange( insert( value, valueToInsert ) );

packages/blocks/src/api/matchers.js

@@ -6,7 +6,7 @@ export { attr, prop, text, query } from 'hpq';
 /**
  * WordPress dependencies
  */
-import { __unstableCreateRichTextString, create } from '@wordpress/rich-text';
+import { toHTMLString, create } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -43,8 +43,9 @@ export function html( selector, multilineTag, preserveWhiteSpace ) {
  return value;
  }
 
- return __unstableCreateRichTextString( {
- // This is faste because we don't need to parse the HTML string.
+ // Note that this stores a reference to the created rich text value.
+ return toHTMLString( {
+ // This is fast because we don't need to parse the HTML string.
  value: create( { element: match } ),
  multilineTag,
  preserveWhiteSpace,

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

@@ -10,6 +10,7 @@ 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';
@@ -18,7 +19,6 @@ 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 = '',
@@ -135,7 +135,7 @@ export function useRichText( {
  if ( disableFormats ) {
  _value.current = newRecord.text;
  } else {
- _value.current = createRichTextString( {
+ _value.current = toHTMLString( {
  value: __unstableBeforeSerialize
  ? {
  ...newRecord,
@@ -164,7 +164,7 @@ export function useRichText( {
  function handleChangesUponInit( newRecord ) {
  record.current = newRecord;
 
- _value.current = createRichTextString( {
+ _value.current = toHTMLString( {
  value: __unstableBeforeSerialize
  ? {
  ...newRecord,

packages/rich-text/src/create.js

@@ -149,6 +149,10 @@ export function create( {
  __unstableIsEditableTree: isEditableTree,
  preserveWhiteSpace,
 } = {} ) {
+ if ( html instanceof String ) {
+ return html.value;
+ }
+
  if ( typeof text === 'string' && text.length > 0 ) {
  return {
  formats: Array( text.length ),
@@ -157,10 +161,6 @@ 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,7 +22,6 @@ 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/to-html-string.js

@@ -40,7 +40,16 @@ export function toHTMLString( { value, preserveWhiteSpace } ) {
  appendText,
  } );
 
- return createChildrenHTML( tree.children );
+ const string = new String( createChildrenHTML( tree.children ) );
+
+ Object.defineProperty( string, 'value', {
+ value,
+ } );
+ Object.defineProperty( string, 'preserveWhiteSpace', {
+ value: preserveWhiteSpace,
+ } );
+
+ return string;
 }
 
 function createEmpty() {