RichText: move useFormatTypes to rich-text package

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

@@ -11,16 +11,14 @@ import {
 	useRef,
 	useState,
 	useCallback,
+	useMemo,
 	forwardRef,
 	createContext,
 	useContext,
 } from '@wordpress/element';
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useMergeRefs, useInstanceId } from '@wordpress/compose';
-import {
-	__unstableUseRichText as useRichText,
-	removeFormat,
-} from '@wordpress/rich-text';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
 import { getBlockBindingsSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
@@ -35,13 +33,15 @@ import { blockBindingsKey, isPreviewModeKey } from '../block-edit/context';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useMarkPersistent } from './use-mark-persistent';
-import { useFormatTypes } from './use-format-types';
 import { useEventListeners } from './event-listeners';
 import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
 import BlockContext from '../block-context';
+import { unlock } from '../../lock-unlock';
+
+const { useRichText } = unlock( richTextPrivateApis );
 
 export const keyboardShortcutContext = createContext();
 keyboardShortcutContext.displayName = 'keyboardShortcutContext';
@@ -339,73 +339,32 @@ export function RichTextWrapper(
 		]
 	);
 
-	const {
-		formatTypes,
-		prepareHandlers,
-		valueHandlers,
-		changeHandlers,
-		dependencies,
-	} = useFormatTypes( {
-		clientId,
-		identifier,
-		withoutInteractiveFormatting,
-		allowedFormats: adjustedAllowedFormats,
-	} );
-
-	function addEditorOnlyFormats( value ) {
-		return valueHandlers.reduce(
-			( accumulator, fn ) => fn( accumulator, value.text ),
-			value.formats
-		);
-	}
-
-	function removeEditorOnlyFormats( value ) {
-		formatTypes.forEach( ( formatType ) => {
-			// Remove formats created by prepareEditableTree, because they are editor only.
-			if ( formatType.__experimentalCreatePrepareEditableTree ) {
-				value = removeFormat(
-					value,
-					formatType.name,
-					0,
-					value.text.length
-				);
-			}
-		} );
-
-		return value.formats;
-	}
-
-	function addInvisibleFormats( value ) {
-		return prepareHandlers.reduce(
-			( accumulator, fn ) => fn( accumulator, value.text ),
-			value.formats
-		);
-	}
-
 	const {
 		value,
 		getValue,
 		onChange,
 		ref: richTextRef,
+		formatTypes,
 	} = useRichText( {
 		value: adjustedValue,
-		onChange( html, { __unstableFormats, __unstableText } ) {
-			adjustedOnChange( html );
-			Object.values( changeHandlers ).forEach( ( changeHandler ) => {
-				changeHandler( __unstableFormats, __unstableText );
-			} );
-		},
+		onChange: adjustedOnChange,
 		selectionStart,
 		selectionEnd,
 		onSelectionChange,
 		placeholder: bindingsPlaceholder || placeholder,
 		__unstableIsSelected: isSelected,
 		__unstableDisableFormats: disableFormats,
 		preserveWhiteSpace,
-		__unstableDependencies: [ ...dependencies, tagName ],
-		__unstableAfterParse: addEditorOnlyFormats,
-		__unstableBeforeSerialize: removeEditorOnlyFormats,
-		__unstableAddInvisibleFormats: addInvisibleFormats,
+		__unstableDependencies: [ tagName ],
+		allowedFormats: adjustedAllowedFormats,
+		withoutInteractiveFormatting,
+		__unstableFormatTypeHandlerContext: useMemo(
+			() => ( {
+				richTextIdentifier: identifier,
+				blockClientId: clientId,
+			} ),
+			[ identifier, clientId ]
+		),
 	} );
 	const autocompleteProps = useBlockEditorAutocompleteProps( {
 		onReplace,
@@ -490,7 +449,6 @@ export function RichTextWrapper(
 						pastePlainText,
 						onMerge,
 						onRemove,
-						removeEditorOnlyFormats,
 						disableLineBreaks,
 						onSplitAtEnd,
 						onSplitAtDoubleLineEnd,

packages/block-editor/src/hooks/block-fields/rich-text/index.js

@@ -4,23 +4,22 @@
 import { BaseControl, useBaseControlProps } from '@wordpress/components';
 import { useMergeRefs } from '@wordpress/compose';
 import { useRegistry } from '@wordpress/data';
-import { useRef, useState } from '@wordpress/element';
-import {
-	__unstableUseRichText as useRichText,
-	removeFormat,
-} from '@wordpress/rich-text';
+import { useMemo, useRef, useState } from '@wordpress/element';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
-import { useFormatTypes } from '../../../components/rich-text/use-format-types';
 import { getAllowedFormats } from '../../../components/rich-text/utils';
 import { useEventListeners } from '../../../components/rich-text/event-listeners';
 import FormatEdit from '../../../components/rich-text/format-edit';
 import {
 	keyboardShortcutContext,
 	inputEventContext,
 } from '../../../components/rich-text';
+import { unlock } from '../../../lock-unlock';
+
+const { useRichText } = unlock( richTextPrivateApis );
 
 export default function RichTextControl( {
 	data,
@@ -47,50 +46,6 @@ export default function RichTextControl( {
 		disableFormats: fieldConfig?.disableFormats,
 	} );
 
-	const {
-		formatTypes,
-		prepareHandlers,
-		valueHandlers,
-		changeHandlers,
-		dependencies,
-	} = useFormatTypes( {
-		clientId,
-		identifier: field.id,
-		allowedFormats: adjustedAllowedFormats,
-		withoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,
-		disableNoneEssentialFormatting: true,
-	} );
-
-	function addEditorOnlyFormats( value ) {
-		return valueHandlers.reduce(
-			( accumulator, fn ) => fn( accumulator, value.text ),
-			value.formats
-		);
-	}
-
-	function removeEditorOnlyFormats( value ) {
-		formatTypes.forEach( ( formatType ) => {
-			// Remove formats created by prepareEditableTree, because they are editor only.
-			if ( formatType.__experimentalCreatePrepareEditableTree ) {
-				value = removeFormat(
-					value,
-					formatType.name,
-					0,
-					value.text.length
-				);
-			}
-		} );
-
-		return value.formats;
-	}
-
-	function addInvisibleFormats( value ) {
-		return prepareHandlers.reduce(
-			( accumulator, fn ) => fn( accumulator, value.text ),
-			value.formats
-		);
-	}
-
 	function onFocus() {
 		anchorRef.current?.focus();
 	}
@@ -100,13 +55,11 @@ export default function RichTextControl( {
 		getValue,
 		onChange: onRichTextChange,
 		ref: richTextRef,
+		formatTypes,
 	} = useRichText( {
 		value: attrValue,
-		onChange( html, { __unstableFormats, __unstableText } ) {
+		onChange( html ) {
 			onChange( field.setValue( { item: data, value: html } ) );
-			Object.values( changeHandlers ).forEach( ( changeHandler ) => {
-				changeHandler( __unstableFormats, __unstableText );
-			} );
 		},
 		selectionStart: selection.start,
 		selectionEnd: selection.end,
@@ -115,10 +68,12 @@ export default function RichTextControl( {
 		preserveWhiteSpace: !! fieldConfig?.preserveWhiteSpace,
 		placeholder: fieldConfig?.placeholder,
 		__unstableDisableFormats: fieldConfig?.disableFormats,
-		__unstableDependencies: dependencies,
-		__unstableAfterParse: addEditorOnlyFormats,
-		__unstableBeforeSerialize: removeEditorOnlyFormats,
-		__unstableAddInvisibleFormats: addInvisibleFormats,
+		allowedFormats: adjustedAllowedFormats,
+		withoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,
+		__unstableFormatTypeHandlerContext: useMemo(
+			() => ( { richTextIdentifier: field.id, blockClientId: clientId } ),
+			[ field.id, clientId ]
+		),
 	} );
 
 	const { baseControlProps, controlProps } = useBaseControlProps( {
@@ -161,7 +116,6 @@ export default function RichTextControl( {
 							disableFormats: fieldConfig?.disableFormats,
 							value,
 							tagName: 'div',
-							removeEditorOnlyFormats,
 							disableLineBreaks: fieldConfig?.disableLineBreaks,
 							keyboardShortcuts,
 							inputEvents,

packages/editor/src/components/post-title/index.js

@@ -13,7 +13,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { ENTER } from '@wordpress/keycodes';
 import { pasteHandler } from '@wordpress/blocks';
 import {
-	__unstableUseRichText as useRichText,
+	privateApis as richTextPrivateApis,
 	create,
 	insert,
 } from '@wordpress/rich-text';
@@ -30,6 +30,8 @@ import PostTypeSupportCheck from '../post-type-support-check';
 
 import { unlock } from '../../lock-unlock';
 
+const { useRichText } = unlock( richTextPrivateApis );
+
 const PostTitle = forwardRef( ( _, forwardedRef ) => {
 	const { placeholder, isEditingContentOnlySection, isPreview } = useSelect(
 		( select ) => {

packages/private-apis/src/implementation.ts

@@ -31,6 +31,7 @@ const CORE_MODULES_USING_PRIVATE_APIS = [
 	'@wordpress/patterns',
 	'@wordpress/preferences',
 	'@wordpress/reusable-blocks',
+	'@wordpress/rich-text',
 	'@wordpress/route',
 	'@wordpress/router',
 	'@wordpress/routes',

packages/rich-text/README.md

@@ -299,6 +299,10 @@ _Returns_
 
 -   `RichTextValue`: A new combined value.
 
+### privateApis
+
+Private @wordpress/rich-text APIs.
+
 ### registerFormatType
 
 Registers a new format provided a unique name and an object defining its behavior.

packages/rich-text/package.json

@@ -61,6 +61,7 @@
 		"@wordpress/escape-html": "file:../escape-html",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/keycodes": "file:../keycodes",
+		"@wordpress/private-apis": "file:../private-apis",
 		"colord": "2.9.3",
 		"memize": "^2.1.0"
 	},