Rich text: try BITS with block binding API

lib/init.php

@@ -57,3 +57,58 @@
 	);
 }
 add_action( 'admin_menu', 'gutenberg_menu', 9 );
+
+register_meta(
+	'post',
+	'isbn',
+	array(
+		'object_subtype' => 'post',
+		'show_in_rest' => true,
+		'single'       => true,
+		'type'         => 'string',
+		'revisions_enabled' => true
+	)
+);
+
+add_filter(
+	'the_content',
+	function ( $content ) {
+		$sources = get_all_registered_block_bindings_sources();
+		// To do: use HTML API.
+		return preg_replace_callback(
+			'/<\/\/([^>]*)>/',
+			function ( $matches ) use ( $sources ) {
+				$attributes = explode(' ', $matches[1]);
+				$key = array_shift($attributes);
+				if ( ! isset( $sources["core/$key"] ) ) {
+					return '';
+				}
+				$attributes = array_reduce(
+					$attributes,
+					function ( $carry, $item ) {
+						$parts = explode('=', $item);
+						$carry[ $parts[0] ] = $parts[1];
+						return $carry;
+					},
+					array()
+				);
+				// We need to change this function so it doesn't rely on a block
+				// instance.
+				return $sources["core/$key"]->get_value(
+					$attributes,
+					new WP_Block(
+						array(
+							'blockName' => 'core/paragraph',
+						),
+						array(
+							'postId' => get_the_ID(),
+							'postType' => get_post_type(),
+						)
+					),
+					''
+				);
+			},
+			$content
+		);
+	},
+);

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

@@ -11,6 +11,8 @@ import {
 	useCallback,
 	forwardRef,
 	createContext,
+	createPortal,
+	useContext,
 } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
@@ -48,6 +50,7 @@ import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
 import { unlock } from '../../lock-unlock';
 import { canBindBlock } from '../../hooks/use-bindings-attributes';
+import BlockContext from '../block-context';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -321,6 +324,7 @@ export function RichTextWrapper(
 		getValue,
 		onChange,
 		ref: richTextRef,
+		replacementRefs,
 	} = useRichText( {
 		value: adjustedValue,
 		onChange( html, { __unstableFormats, __unstableText } ) {
@@ -464,10 +468,54 @@ export function RichTextWrapper(
 				}
 				data-wp-block-attribute-key={ identifier }
 			/>
+			{ replacementRefs.map( ( ref ) => {
+				return (
+					ref &&
+					createPortal(
+						<Binding
+							content={ ref.getAttribute(
+								'data-rich-text-comment'
+							) }
+						/>,
+						ref
+					)
+				);
+			} ) }
 		</>
 	);
 }
 
+function Binding( { content } ) {
+	const context = useContext( BlockContext );
+	const blockBindingsSources = useSelect( ( select ) => {
+		return unlock( select( blocksStore ) ).getAllBlockBindingsSources();
+	} );
+
+	if ( ! content.startsWith( '/wp:' ) ) {
+		return null;
+	}
+
+	const fakeHTML = '<' + content.slice( 4 ) + '>';
+	const body = document.implementation.createHTMLDocument( '' ).body;
+	body.innerHTML = fakeHTML;
+	const element = body.firstElementChild;
+	const tag = 'core/' + element.tagName.toLowerCase();
+	const source = blockBindingsSources[ tag ];
+
+	if ( ! source ) {
+		return null;
+	}
+
+	const value = source.useSource(
+		{
+			context,
+		},
+		{ key: element.getAttribute( 'key' ) }
+	);
+
+	return value.value.toString() || value.placeholder;
+}
+
 // This is the private API for the RichText component.
 // It allows access to all props, not just the public ones.
 export const PrivateRichText = withDeprecations(

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

@@ -38,6 +38,7 @@ export function useRichText( {
 	const registry = useRegistry();
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const ref = useRef();
+	const replacementRefs = useRef( [] );
 
 	function createRecord() {
 		const {
@@ -62,6 +63,15 @@ export function useRichText( {
 			__unstableDomOnly: domOnly,
 			placeholder,
 		} );
+
+		ref.current
+			.querySelectorAll( '[data-rich-text-comment]' )
+			.forEach( ( node, i ) => {
+				if ( replacementRefs.current[ i ] !== node ) {
+					replacementRefs.current[ i ] = node;
+					forceRender();
+				}
+			} );
 	}
 
 	// Internal values are updated synchronously, unlike props and state.
@@ -218,6 +228,7 @@ export function useRichText( {
 		getValue: () => record.current,
 		onChange: handleChange,
 		ref: mergedRefs,
+		replacementRefs: replacementRefs.current,
 	};
 }
 

packages/rich-text/src/create.js

@@ -145,10 +145,7 @@ export class RichTextData {
 	// We could expose `toHTMLElement` at some point as well, but we'd only use
 	// it internally.
 	toHTMLString( { preserveWhiteSpace } = {} ) {
-		return (
-			this.originalHTML ||
-			toHTMLString( { value: this.#value, preserveWhiteSpace } )
-		);
+		return toHTMLString( { value: this.#value, preserveWhiteSpace } );
 	}
 	valueOf() {
 		return this.toHTMLString();
@@ -469,6 +466,34 @@ function createFromElement( { element, range, isEditableTree } ) {
 			continue;
 		}
 
+		if (
+			node.nodeType === node.COMMENT_NODE ||
+			( node.nodeType === node.ELEMENT_NODE &&
+				node.tagName === 'SPAN' &&
+				node.hasAttribute( 'data-rich-text-comment' ) )
+		) {
+			const value = {
+				formats: [ , ],
+				replacements: [
+					{
+						type: '#comment',
+						attributes: {
+							'data-rich-text-comment':
+								node.nodeType === node.COMMENT_NODE
+									? node.nodeValue
+									: node.getAttribute(
+											'data-rich-text-comment'
+									  ),
+						},
+					},
+				],
+				text: OBJECT_REPLACEMENT_CHARACTER,
+			};
+			accumulateSelection( accumulator, node, range, value );
+			mergePair( accumulator, value );
+			continue;
+		}
+
 		if ( node.nodeType !== node.ELEMENT_NODE ) {
 			continue;
 		}

packages/rich-text/src/to-dom.js

@@ -68,10 +68,16 @@ function append( element, child ) {
 	const { type, attributes } = child;
 
 	if ( type ) {
-		child = element.ownerDocument.createElement( type );
+		if ( type === '#comment' ) {
+			child = element.ownerDocument.createComment(
+				attributes[ 'data-rich-text-comment' ]
+			);
+		} else {
+			child = element.ownerDocument.createElement( type );
 
-		for ( const key in attributes ) {
-			child.setAttribute( key, attributes[ key ] );
+			for ( const key in attributes ) {
+				child.setAttribute( key, attributes[ key ] );
+			}
 		}
 	}
 
@@ -238,7 +244,9 @@ export function applyValue( future, current ) {
 					}
 				}
 
-				applyValue( futureChild, currentChild );
+				if ( ! currentChild.hasAttribute( 'data-rich-text-comment' ) ) {
+					applyValue( futureChild, currentChild );
+				}
 				future.removeChild( futureChild );
 			}
 		} else {

packages/rich-text/src/to-html-string.js

@@ -88,6 +88,10 @@ function remove( object ) {
 }
 
 function createElementHTML( { type, attributes, object, children } ) {
+	if ( type === '#comment' ) {
+		return `</${ attributes[ 'data-rich-text-comment' ] }>`;
+	}
+
 	let attributeString = '';
 
 	for ( const key in attributes ) {

packages/rich-text/src/to-tree.js

@@ -227,7 +227,17 @@ export function toTree( {
 			const { type, attributes, innerHTML } = replacement;
 			const formatType = getFormatType( type );
 
-			if ( ! isEditableTree && type === 'script' ) {
+			if ( isEditableTree && type === '#comment' ) {
+				pointer = append( getParent( pointer ), {
+					type: 'span',
+					attributes: {
+						contenteditable: 'false',
+						'data-rich-text-comment':
+							attributes[ 'data-rich-text-comment' ],
+						style: 'background:yellow',
+					},
+				} );
+			} else if ( ! isEditableTree && type === 'script' ) {
 				pointer = append(
 					getParent( pointer ),
 					fromFormat( {