Revert format types hook refactor (#56859)

packages/block-editor/src/components/rich-text/use-format-types.js

@@ -1,9 +1,14 @@
 /**
  * WordPress dependencies
  */
+import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as richTextStore } from '@wordpress/rich-text';
 
+function formatTypesSelector( select ) {
+	return select( richTextStore ).getFormatTypes();
+}
+
 /**
  * Set of all interactive content tags.
  *
@@ -59,50 +64,45 @@ export function useFormatTypes( {
 	withoutInteractiveFormatting,
 	allowedFormats,
 } ) {
-	const { formatTypes, ...keyedSelected } = useSelect(
-		( select ) => {
-			const _formatTypes = select( richTextStore )
-				.getFormatTypes()
-				.filter( ( { name, interactive, tagName } ) => {
-					if ( allowedFormats && ! allowedFormats.includes( name ) ) {
-						return false;
-					}
+	const allFormatTypes = useSelect( formatTypesSelector, [] );
+	const formatTypes = useMemo( () => {
+		return allFormatTypes.filter( ( { name, interactive, tagName } ) => {
+			if ( allowedFormats && ! allowedFormats.includes( name ) ) {
+				return false;
+			}
 
-					if (
-						withoutInteractiveFormatting &&
-						( interactive || interactiveContentTags.has( tagName ) )
-					) {
-						return false;
-					}
+			if (
+				withoutInteractiveFormatting &&
+				( interactive || interactiveContentTags.has( tagName ) )
+			) {
+				return false;
+			}
 
-					return true;
-				} );
-			return _formatTypes.reduce(
-				( accumulator, type ) => {
-					if (
-						! type.__experimentalGetPropsForEditableTreePreparation
-					) {
-						return accumulator;
-					}
+			return true;
+		} );
+	}, [ allFormatTypes, allowedFormats, withoutInteractiveFormatting ] );
+	const keyedSelected = useSelect(
+		( select ) =>
+			formatTypes.reduce( ( accumulator, type ) => {
+				if ( ! type.__experimentalGetPropsForEditableTreePreparation ) {
+					return accumulator;
+				}
 
-					return {
-						...accumulator,
-						...prefixSelectKeys(
-							type.__experimentalGetPropsForEditableTreePreparation(
-								select,
-								{
-									richTextIdentifier: identifier,
-									blockClientId: clientId,
-								}
-							),
-							type.name
+				return {
+					...accumulator,
+					...prefixSelectKeys(
+						type.__experimentalGetPropsForEditableTreePreparation(
+							select,
+							{
+								richTextIdentifier: identifier,
+								blockClientId: clientId,
+							}
 						),
-					};
-				},
-				{ formatTypes: _formatTypes }
-			);
-		},
-		[ clientId, identifier, allowedFormats, withoutInteractiveFormatting ]
+						type.name
+					),
+				};
+			}, {} ),
+		[ formatTypes, clientId, identifier ]
 	);
 	const dispatch = useDispatch();
 	const prepareHandlers = [];