@wordpress/block-editor 12.13.0 → 12.14.0

package/src/components/rich-text/native/index.native.js

@@ -0,0 +1,1363 @@
+/* eslint no-console: ["error", { allow: ["warn"] }] */
+
+/**
+ * External dependencies
+ */
+import { View, Platform, Dimensions } from 'react-native';
+import memize from 'memize';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+import {
+	showUserSuggestions,
+	showXpostSuggestions,
+} from '@wordpress/react-native-bridge';
+import { BlockFormatControls, getPxFromCssUnit } from '@wordpress/block-editor';
+import { Component } from '@wordpress/element';
+import {
+	compose,
+	debounce,
+	withPreferredColorScheme,
+} from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+import { childrenBlock } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
+import { BACKSPACE, DELETE, ENTER } from '@wordpress/keycodes';
+import { isURL } from '@wordpress/url';
+import { atSymbol, plus } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import {
+	applyFormat,
+	getActiveFormat,
+	getActiveFormats,
+	insert,
+	getTextContent,
+	isEmpty,
+	create,
+	toHTMLString,
+	isCollapsed,
+	remove,
+} from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import { useFormatTypes } from './use-format-types';
+import FormatEdit from './format-edit';
+import { getFormatColors } from './get-format-colors';
+import styles from './style.scss';
+import ToolbarButtonWithOptions from './toolbar-button-with-options';
+
+const unescapeSpaces = ( text ) => {
+	return text.replace( / | /gi, ' ' );
+};
+
+// The flattened color palettes array is memoized to ensure that the same array instance is
+// returned for the colors palettes. This value might be used as a prop, so having the same
+// instance will prevent unnecessary re-renders of the RichText component.
+const flatColorPalettes = memize( ( colorsPalettes ) => [
+	...( colorsPalettes?.theme || [] ),
+	...( colorsPalettes?.custom || [] ),
+	...( colorsPalettes?.default || [] ),
+] );
+
+const getSelectionColor = memize(
+	(
+		currentSelectionColor,
+		defaultSelectionColor,
+		baseGlobalStyles,
+		isBlockBasedTheme
+	) => {
+		let selectionColor = defaultSelectionColor;
+		if ( currentSelectionColor ) {
+			selectionColor = currentSelectionColor;
+		}
+
+		if ( isBlockBasedTheme ) {
+			const colordTextColor = colord( selectionColor );
+			const colordBackgroundColor = colord(
+				baseGlobalStyles?.color?.background
+			);
+			const isColordTextReadable = colordTextColor.isReadable(
+				colordBackgroundColor
+			);
+			if ( ! isColordTextReadable ) {
+				selectionColor = baseGlobalStyles?.color?.text;
+			}
+		}
+
+		return selectionColor;
+	}
+);
+
+const gutenbergFormatNamesToAztec = {
+	'core/bold': 'bold',
+	'core/italic': 'italic',
+	'core/strikethrough': 'strikethrough',
+	'core/text-color': 'mark',
+};
+
+const EMPTY_PARAGRAPH_TAGS = '<p></p>';
+const DEFAULT_FONT_SIZE = 16;
+const MIN_LINE_HEIGHT = 1;
+
+export class RichText extends Component {
+	constructor( {
+		value,
+		selectionStart,
+		selectionEnd,
+		__unstableMultilineTag: multiline,
+	} ) {
+		super( ...arguments );
+
+		this.isMultiline = false;
+		if ( multiline === true || multiline === 'p' || multiline === 'li' ) {
+			this.multilineTag = multiline === true ? 'p' : multiline;
+			this.isMultiline = true;
+		}
+
+		if ( this.multilineTag === 'li' ) {
+			this.multilineWrapperTags = [ 'ul', 'ol' ];
+		}
+
+		this.isIOS = Platform.OS === 'ios';
+		this.createRecord = this.createRecord.bind( this );
+		this.restoreParagraphTags = this.restoreParagraphTags.bind( this );
+		this.onChangeFromAztec = this.onChangeFromAztec.bind( this );
+		this.onKeyDown = this.onKeyDown.bind( this );
+		this.handleEnter = this.handleEnter.bind( this );
+		this.handleDelete = this.handleDelete.bind( this );
+		this.onPaste = this.onPaste.bind( this );
+		this.onFocus = this.onFocus.bind( this );
+		this.onBlur = this.onBlur.bind( this );
+		this.onTextUpdate = this.onTextUpdate.bind( this );
+		this.onContentSizeChange = this.onContentSizeChange.bind( this );
+		this.onFormatChange = this.onFormatChange.bind( this );
+		this.formatToValue = memize( this.formatToValue.bind( this ), {
+			maxSize: 1,
+		} );
+		this.debounceCreateUndoLevel = debounce( this.onCreateUndoLevel, 1000 );
+		// This prevents a bug in Aztec which triggers onSelectionChange twice on format change.
+		this.onSelectionChange = this.onSelectionChange.bind( this );
+		this.onSelectionChangeFromAztec =
+			this.onSelectionChangeFromAztec.bind( this );
+		this.valueToFormat = this.valueToFormat.bind( this );
+		this.getHtmlToRender = this.getHtmlToRender.bind( this );
+		this.handleSuggestionFunc = this.handleSuggestionFunc.bind( this );
+		this.handleUserSuggestion = this.handleSuggestionFunc(
+			showUserSuggestions,
+			'@'
+		).bind( this );
+		this.handleXpostSuggestion = this.handleSuggestionFunc(
+			showXpostSuggestions,
+			'+'
+		).bind( this );
+		this.suggestionOptions = this.suggestionOptions.bind( this );
+		this.insertString = this.insertString.bind( this );
+		this.manipulateEventCounterToForceNativeToRefresh =
+			this.manipulateEventCounterToForceNativeToRefresh.bind( this );
+		this.shouldDropEventFromAztec =
+			this.shouldDropEventFromAztec.bind( this );
+		this.state = {
+			activeFormats: [],
+			selectedFormat: null,
+			height: 0,
+			currentFontSize: this.getFontSize( arguments[ 0 ] ),
+		};
+		this.needsSelectionUpdate = false;
+		this.savedContent = '';
+		this.isTouched = false;
+		this.lastAztecEventType = null;
+
+		this.lastHistoryValue = value;
+
+		// Internal values that are update synchronously, unlike props.
+		this.value = value;
+		this.selectionStart = selectionStart;
+		this.selectionEnd = selectionEnd;
+	}
+
+	/**
+	 * Get the current record (value and selection) from props and state.
+	 *
+	 * @return {Object} The current record (value and selection).
+	 */
+	getRecord() {
+		const {
+			selectionStart: start,
+			selectionEnd: end,
+			colorPalette,
+		} = this.props;
+		const { value } = this.props;
+		const currentValue = this.formatToValue( value );
+
+		const { formats, replacements, text } = currentValue;
+		const { activeFormats } = this.state;
+		const newFormats = getFormatColors( value, formats, colorPalette );
+
+		return {
+			formats: newFormats,
+			replacements,
+			text,
+			start,
+			end,
+			activeFormats,
+		};
+	}
+
+	/**
+	 * Creates a RichText value "record" from the current content and selection
+	 * information
+	 *
+	 *
+	 * @return {Object} A RichText value with formats and selection.
+	 */
+	createRecord() {
+		const { preserveWhiteSpace } = this.props;
+		const value = {
+			start: this.selectionStart,
+			end: this.selectionEnd,
+			...create( {
+				html: this.value,
+				range: null,
+				multilineTag: this.multilineTag,
+				multilineWrapperTags: this.multilineWrapperTags,
+				preserveWhiteSpace,
+			} ),
+		};
+		const start = Math.min( this.selectionStart, value.text.length );
+		const end = Math.min( this.selectionEnd, value.text.length );
+		return { ...value, start, end };
+	}
+
+	valueToFormat( value ) {
+		// Remove the outer root tags.
+		return this.removeRootTagsProducedByAztec(
+			toHTMLString( {
+				value,
+				multilineTag: this.multilineTag,
+			} )
+		);
+	}
+
+	getActiveFormatNames( record ) {
+		const { formatTypes } = this.props;
+
+		return formatTypes
+			.map( ( { name } ) => name )
+			.filter( ( name ) => {
+				return getActiveFormat( record, name ) !== undefined;
+			} )
+			.map( ( name ) => gutenbergFormatNamesToAztec[ name ] )
+			.filter( Boolean );
+	}
+
+	onFormatChange( record ) {
+		const { start = 0, end = 0, activeFormats = [] } = record;
+		const changeHandlers = Object.fromEntries(
+			Object.entries( this.props ).filter( ( [ key ] ) =>
+				key.startsWith( 'format_on_change_functions_' )
+			)
+		);
+
+		Object.values( changeHandlers ).forEach( ( changeHandler ) => {
+			changeHandler( record.formats, record.text );
+		} );
+
+		this.value = this.valueToFormat( record );
+		this.props.onChange( this.value );
+		this.setState( { activeFormats } );
+		this.props.onSelectionChange( start, end );
+		this.selectionStart = start;
+		this.selectionEnd = end;
+
+		this.onCreateUndoLevel();
+
+		this.lastAztecEventType = 'format change';
+	}
+
+	insertString( record, string ) {
+		if ( record && string ) {
+			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			const toInsert = insert( record, string );
+			this.onFormatChange( toInsert );
+		}
+	}
+
+	onCreateUndoLevel() {
+		const { __unstableOnCreateUndoLevel: onCreateUndoLevel } = this.props;
+		// If the content is the same, no level needs to be created.
+		if ( this.lastHistoryValue === this.value ) {
+			return;
+		}
+
+		onCreateUndoLevel();
+		this.lastHistoryValue = this.value;
+	}
+
+	/*
+	 * Cleans up any root tags produced by aztec.
+	 * TODO: This should be removed on a later version when aztec doesn't return the top tag of the text being edited
+	 */
+	removeRootTagsProducedByAztec( html ) {
+		let result = this.removeRootTag( this.props.tagName, html );
+
+		if ( this.props.tagsToEliminate ) {
+			this.props.tagsToEliminate.forEach( ( element ) => {
+				result = this.removeTag( element, result );
+			} );
+		}
+
+		return result;
+	}
+
+	removeRootTag( tag, html ) {
+		const openingTagRegexp = RegExp( '^<' + tag + '[^>]*>', 'gim' );
+		const closingTagRegexp = RegExp( '</' + tag + '>$', 'gim' );
+
+		return html
+			.replace( openingTagRegexp, '' )
+			.replace( closingTagRegexp, '' );
+	}
+
+	removeTag( tag, html ) {
+		const openingTagRegexp = RegExp( '<' + tag + '>', 'gim' );
+		const closingTagRegexp = RegExp( '</' + tag + '>', 'gim' );
+		return html
+			.replace( openingTagRegexp, '' )
+			.replace( closingTagRegexp, '' );
+	}
+
+	/*
+	 * Handles any case where the content of the AztecRN instance has changed
+	 */
+	onChangeFromAztec( event ) {
+		if ( this.shouldDropEventFromAztec( event, 'onChange' ) ) {
+			return;
+		}
+
+		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
+			unescapeSpaces( event.nativeEvent.text )
+		);
+		// On iOS, onChange can be triggered after selection changes, even though there are no content changes.
+		if ( contentWithoutRootTag === this.value ) {
+			return;
+		}
+		this.lastEventCount = event.nativeEvent.eventCount;
+		this.comesFromAztec = true;
+		this.firedAfterTextChanged = true; // The onChange event always fires after the fact.
+		this.onTextUpdate( event );
+		this.lastAztecEventType = 'input';
+	}
+
+	onTextUpdate( event ) {
+		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
+			unescapeSpaces( event.nativeEvent.text )
+		);
+		let formattedContent = contentWithoutRootTag;
+		if ( ! this.isIOS ) {
+			formattedContent = this.restoreParagraphTags(
+				contentWithoutRootTag,
+				this.multilineTag
+			);
+		}
+
+		this.debounceCreateUndoLevel();
+		const refresh = this.value !== formattedContent;
+		this.value = formattedContent;
+
+		// We don't want to refresh if our goal is just to create a record.
+		if ( refresh ) {
+			this.props.onChange( formattedContent );
+		}
+	}
+
+	restoreParagraphTags( value, tag ) {
+		if ( tag === 'p' && ( ! value || ! value.startsWith( '<p>' ) ) ) {
+			return '<p>' + value + '</p>';
+		}
+		return value;
+	}
+
+	/*
+	 * Handles any case where the content of the AztecRN instance has changed in size
+	 */
+	onContentSizeChange( contentSize ) {
+		this.setState( contentSize );
+		this.lastAztecEventType = 'content size change';
+	}
+
+	onKeyDown( event ) {
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		// Add stubs for conformance in downstream autocompleters logic.
+		this.customEditableOnKeyDown?.( {
+			preventDefault: () => undefined,
+			...event,
+			key: RCTAztecView.KeyCodes[ event?.keyCode ],
+		} );
+
+		this.handleDelete( event );
+		this.handleEnter( event );
+		this.handleTriggerKeyCodes( event );
+	}
+
+	handleEnter( event ) {
+		if ( event.keyCode !== ENTER ) {
+			return;
+		}
+		const { onEnter } = this.props;
+
+		if ( ! onEnter ) {
+			return;
+		}
+
+		onEnter( {
+			value: this.createRecord(),
+			onChange: this.onFormatChange,
+			shiftKey: event.shiftKey,
+		} );
+		this.lastAztecEventType = 'input';
+	}
+
+	handleDelete( event ) {
+		if ( this.shouldDropEventFromAztec( event, 'handleDelete' ) ) {
+			return;
+		}
+
+		const { keyCode } = event;
+
+		if ( keyCode !== DELETE && keyCode !== BACKSPACE ) {
+			return;
+		}
+		const isReverse = keyCode === BACKSPACE;
+
+		const { onDelete } = this.props;
+		this.lastEventCount = event.nativeEvent.eventCount;
+		this.comesFromAztec = true;
+		this.firedAfterTextChanged = event.nativeEvent.firedAfterTextChanged;
+		const value = this.createRecord();
+		const { start, end, text } = value;
+		let newValue;
+
+		// Always handle full content deletion ourselves.
+		if ( start === 0 && end !== 0 && end >= text.length ) {
+			newValue = remove( value );
+			this.onFormatChange( newValue );
+			event.preventDefault();
+			return;
+		}
+
+		// Only process delete if the key press occurs at an uncollapsed edge.
+		if (
+			! onDelete ||
+			! isCollapsed( value ) ||
+			( isReverse && start !== 0 ) ||
+			( ! isReverse && end !== text.length )
+		) {
+			return;
+		}
+
+		onDelete( { isReverse, value } );
+
+		event.preventDefault();
+		this.lastAztecEventType = 'input';
+	}
+
+	handleTriggerKeyCodes( event ) {
+		const { keyCode } = event;
+		const triggeredOption = this.suggestionOptions().find( ( option ) => {
+			const triggeredKeyCode = option.triggerChar.charCodeAt( 0 );
+			return triggeredKeyCode === keyCode;
+		} );
+
+		if ( triggeredOption ) {
+			const record = this.getRecord();
+			const text = getTextContent( record );
+			// Only respond to the trigger if the selection is on the start of text or line
+			// or if the character before is a space.
+			const useTrigger =
+				text.length === 0 ||
+				record.start === 0 ||
+				text.charAt( record.start - 1 ) === '\n' ||
+				text.charAt( record.start - 1 ) === ' ';
+
+			if ( useTrigger && triggeredOption.onClick ) {
+				triggeredOption.onClick();
+			} else {
+				this.insertString( record, triggeredOption.triggerChar );
+			}
+		}
+	}
+
+	suggestionOptions() {
+		const { areMentionsSupported, areXPostsSupported } = this.props;
+		const allOptions = [
+			{
+				supported: areMentionsSupported,
+				title: __( 'Insert mention' ),
+				onClick: this.handleUserSuggestion,
+				triggerChar: '@',
+				value: 'mention',
+				label: __( 'Mention' ),
+				icon: atSymbol,
+			},
+			{
+				supported: areXPostsSupported,
+				title: __( 'Insert crosspost' ),
+				onClick: this.handleXpostSuggestion,
+				triggerChar: '+',
+				value: 'crosspost',
+				label: __( 'Crosspost' ),
+				icon: plus,
+			},
+		];
+		return allOptions.filter( ( op ) => op.supported );
+	}
+
+	handleSuggestionFunc( suggestionFunction, prefix ) {
+		return () => {
+			const record = this.getRecord();
+			suggestionFunction()
+				.then( ( suggestion ) => {
+					this.insertString( record, `${ prefix }${ suggestion } ` );
+				} )
+				.catch( () => {} );
+		};
+	}
+
+	/**
+	 * Handles a paste event from the native Aztec Wrapper.
+	 *
+	 * @param {Object} event The paste event which wraps `nativeEvent`.
+	 */
+	onPaste( event ) {
+		const { onPaste, onChange } = this.props;
+		const { activeFormats = [] } = this.state;
+
+		const { pastedText, pastedHtml, files } = event.nativeEvent;
+		const currentRecord = this.createRecord();
+
+		event.preventDefault();
+
+		// There is a selection, check if a URL is pasted.
+		if ( ! isCollapsed( currentRecord ) ) {
+			const trimmedText = ( pastedHtml || pastedText )
+				.replace( /<[^>]+>/g, '' )
+				.trim();
+
+			// A URL was pasted, turn the selection into a link.
+			if ( isURL( trimmedText ) ) {
+				const linkedRecord = applyFormat( currentRecord, {
+					type: 'a',
+					attributes: {
+						href: decodeEntities( trimmedText ),
+					},
+				} );
+				this.value = this.valueToFormat( linkedRecord );
+				onChange( this.value );
+
+				// Allows us to ask for this information when we get a report.
+				window.console.log( 'Created link:\n\n', trimmedText );
+
+				return;
+			}
+		}
+
+		if ( onPaste ) {
+			onPaste( {
+				value: currentRecord,
+				onChange: this.onFormatChange,
+				html: pastedHtml,
+				plainText: pastedText,
+				files,
+				activeFormats,
+			} );
+		}
+	}
+
+	onFocus() {
+		this.isTouched = true;
+
+		const { unstableOnFocus, onSelectionChange } = this.props;
+
+		if ( unstableOnFocus ) {
+			unstableOnFocus();
+		}
+
+		// We know for certain that on focus, the old selection is invalid. It
+		// will be recalculated on `selectionchange`.
+
+		onSelectionChange( this.selectionStart, this.selectionEnd );
+
+		this.lastAztecEventType = 'focus';
+	}
+
+	onBlur( event ) {
+		this.isTouched = false;
+
+		// Check if value is up to date with latest state of native AztecView.
+		if (
+			event.nativeEvent.text &&
+			event.nativeEvent.text !== this.props.value
+		) {
+			this.onTextUpdate( event );
+		}
+
+		if ( this.props.onBlur ) {
+			this.props.onBlur( event );
+		}
+
+		this.lastAztecEventType = 'blur';
+	}
+
+	onSelectionChange( start, end ) {
+		const hasChanged =
+			this.selectionStart !== start || this.selectionEnd !== end;
+
+		this.selectionStart = start;
+		this.selectionEnd = end;
+
+		// This is a manual selection change event if onChange was not triggered just before
+		// and we did not just trigger a text update
+		// `onChange` could be the last event and could have been triggered a long time ago so
+		// this approach is not perfectly reliable.
+		const isManual =
+			this.lastAztecEventType !== 'input' &&
+			this.props.value === this.value;
+		if ( hasChanged && isManual ) {
+			const value = this.createRecord();
+			const activeFormats = getActiveFormats( value );
+			this.setState( { activeFormats } );
+		}
+
+		this.props.onSelectionChange( start, end );
+	}
+
+	shouldDropEventFromAztec( event, logText ) {
+		const shouldDrop =
+			! this.isIOS && event.nativeEvent.eventCount <= this.lastEventCount;
+		if ( shouldDrop ) {
+			window.console.log(
+				`Dropping ${ logText } from Aztec as its event counter is older than latest sent to the native side. Got ${ event.nativeEvent.eventCount } but lastEventCount is ${ this.lastEventCount }.`
+			);
+		}
+		return shouldDrop;
+	}
+
+	onSelectionChangeFromAztec( start, end, text, event ) {
+		if ( this.shouldDropEventFromAztec( event, 'onSelectionChange' ) ) {
+			return;
+		}
+
+		// `end` can be less than `start` on iOS
+		// Let's fix that here so `rich-text/slice` can work properly.
+		const realStart = Math.min( start, end );
+		const realEnd = Math.max( start, end );
+
+		// Check and dicsard stray event, where the text and selection is equal to the ones already cached.
+		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
+			unescapeSpaces( event.nativeEvent.text )
+		);
+		if (
+			contentWithoutRootTag === this.value &&
+			realStart === this.selectionStart &&
+			realEnd === this.selectionEnd
+		) {
+			return;
+		}
+
+		this.comesFromAztec = true;
+		this.firedAfterTextChanged = true; // Selection change event always fires after the fact.
+
+		// Update text before updating selection
+		// Make sure there are changes made to the content before upgrading it upward.
+		this.onTextUpdate( event );
+
+		// Aztec can send us selection change events after it has lost focus.
+		// For instance the autocorrect feature will complete a partially written
+		// word when resigning focus, causing a selection change event.
+		// Forwarding this selection change could cause this RichText to regain
+		// focus and start a focus loop.
+		//
+		// See https://github.com/wordpress-mobile/gutenberg-mobile/issues/1696
+		if ( this.props.__unstableIsSelected ) {
+			this.onSelectionChange( realStart, realEnd );
+		}
+		// Update lastEventCount to prevent Aztec from re-rendering the content it just sent.
+		this.lastEventCount = event.nativeEvent.eventCount;
+
+		this.lastAztecEventType = 'selection change';
+	}
+
+	isEmpty() {
+		return isEmpty( this.formatToValue( this.props.value ) );
+	}
+
+	formatToValue( value ) {
+		const { preserveWhiteSpace } = this.props;
+		// Handle deprecated `children` and `node` sources.
+		if ( Array.isArray( value ) ) {
+			return create( {
+				html: childrenBlock.toHTML( value ),
+				multilineTag: this.multilineTag,
+				multilineWrapperTags: this.multilineWrapperTags,
+				preserveWhiteSpace,
+			} );
+		}
+
+		if ( this.props.format === 'string' ) {
+			return create( {
+				html: value,
+				multilineTag: this.multilineTag,
+				multilineWrapperTags: this.multilineWrapperTags,
+				preserveWhiteSpace,
+			} );
+		}
+
+		// Guard for blocks passing `null` in onSplit callbacks. May be removed
+		// if onSplit is revised to not pass a `null` value.
+		if ( value === null ) {
+			return create();
+		}
+
+		return value;
+	}
+
+	manipulateEventCounterToForceNativeToRefresh() {
+		if ( this.isIOS ) {
+			this.lastEventCount = undefined;
+			return;
+		}
+
+		if ( typeof this.lastEventCount !== 'undefined' ) {
+			this.lastEventCount += 100; // bump by a hundred, hopefully native hasn't bombarded the JS side in the meantime.
+		} // no need to bump when 'undefined' as native side won't receive the key when the value is undefined, and that will cause force updating anyway,
+		//   see https://github.com/WordPress/gutenberg/blob/82e578dcc75e67891c750a41a04c1e31994192fc/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java#L213-L215
+	}
+
+	shouldComponentUpdate( nextProps, nextState ) {
+		if (
+			nextProps.tagName !== this.props.tagName ||
+			nextProps.reversed !== this.props.reversed ||
+			nextProps.start !== this.props.start
+		) {
+			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			this.value = undefined;
+			return true;
+		}
+
+		// TODO: Please re-introduce the check to avoid updating the content right after an `onChange` call.
+		// It was removed in https://github.com/WordPress/gutenberg/pull/12417 to fix undo/redo problem.
+
+		// If the component is changed React side (undo/redo/merging/splitting/custom text actions)
+		// we need to make sure the native is updated as well.
+
+		// Also, don't trust the "this.lastContent" as on Android, incomplete text events arrive
+		//  with only some of the text, while the virtual keyboard's suggestion system does its magic.
+		// ** compare with this.lastContent for optimizing performance by not forcing Aztec with text it already has
+		// , but compare with props.value to not lose "half word" text because of Android virtual keyb autosuggestion behavior
+		if (
+			typeof nextProps.value !== 'undefined' &&
+			typeof this.props.value !== 'undefined' &&
+			( ! this.comesFromAztec || ! this.firedAfterTextChanged ) &&
+			nextProps.value !== this.props.value
+		) {
+			// Gutenberg seems to try to mirror the caret state even on events that only change the content so,
+			//  let's force caret update if state has selection set.
+			if (
+				typeof nextProps.selectionStart !== 'undefined' &&
+				typeof nextProps.selectionEnd !== 'undefined'
+			) {
+				this.needsSelectionUpdate = true;
+			}
+
+			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+		}
+
+		if ( ! this.comesFromAztec ) {
+			if (
+				typeof nextProps.selectionStart !== 'undefined' &&
+				typeof nextProps.selectionEnd !== 'undefined' &&
+				nextProps.selectionStart !== this.props.selectionStart &&
+				nextProps.selectionStart !== this.selectionStart &&
+				nextProps.__unstableIsSelected
+			) {
+				this.needsSelectionUpdate = true;
+				this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			}
+
+			// For font size changes from a prop value a force refresh
+			// is needed without the selection update.
+			if ( nextProps?.fontSize !== this.props?.fontSize ) {
+				this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			}
+
+			if (
+				( nextProps?.style?.fontSize !== this.props?.style?.fontSize &&
+					nextState.currentFontSize !==
+						this.state.currentFontSize ) ||
+				nextState.currentFontSize !== this.state.currentFontSize ||
+				nextProps?.style?.lineHeight !== this.props?.style?.lineHeight
+			) {
+				this.needsSelectionUpdate = true;
+				this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			}
+		}
+
+		return true;
+	}
+
+	componentDidMount() {
+		// Request focus if wrapping block is selected and parent hasn't inhibited the focus request. This method of focusing
+		//  is trying to implement the web-side counterpart of BlockList's `focusTabbable` where the BlockList is focusing an
+		//  inputbox by searching the DOM. We don't have the DOM in RN so, using the combination of blockIsSelected and __unstableMobileNoFocusOnMount
+		//  to determine if we should focus the RichText.
+		if (
+			this.props.blockIsSelected &&
+			! this.props.__unstableMobileNoFocusOnMount
+		) {
+			this._editor.focus();
+			this.onSelectionChange(
+				this.props.selectionStart || 0,
+				this.props.selectionEnd || 0
+			);
+		}
+	}
+
+	componentWillUnmount() {
+		if ( this._editor.isFocused() ) {
+			this._editor.blur();
+		}
+	}
+
+	componentDidUpdate( prevProps ) {
+		const { style, tagName } = this.props;
+		const { currentFontSize } = this.state;
+
+		if ( this.props.value !== this.value ) {
+			this.value = this.props.value;
+		}
+		const { __unstableIsSelected: isSelected } = this.props;
+
+		const { __unstableIsSelected: prevIsSelected } = prevProps;
+
+		if ( isSelected && ! prevIsSelected ) {
+			this._editor.focus();
+			// Update selection props explicitly when component is selected as Aztec won't call onSelectionChange
+			// if its internal value hasn't change. When created, default value is 0, 0.
+			this.onSelectionChange(
+				this.props.selectionStart || 0,
+				this.props.selectionEnd || 0
+			);
+		} else if ( ! isSelected && prevIsSelected ) {
+			this._editor.blur();
+		}
+
+		// For font size values changes from the font size picker
+		// we compare previous values to refresh the selected font size,
+		// this is also used when the tag name changes
+		// e.g Heading block and a level change like h1->h2.
+		const currentFontSizeStyle = this.getParsedFontSize( style?.fontSize );
+		const prevFontSizeStyle = this.getParsedFontSize(
+			prevProps?.style?.fontSize
+		);
+		const isDifferentTag = prevProps.tagName !== tagName;
+		if (
+			( currentFontSize &&
+				( currentFontSizeStyle || prevFontSizeStyle ) &&
+				currentFontSizeStyle !== currentFontSize ) ||
+			isDifferentTag
+		) {
+			this.setState( {
+				currentFontSize: this.getFontSize( this.props ),
+			} );
+		}
+	}
+
+	getHtmlToRender( record, tagName ) {
+		// Save back to HTML from React tree.
+		let value = this.valueToFormat( record );
+
+		if ( value === undefined ) {
+			this.manipulateEventCounterToForceNativeToRefresh(); // force a refresh on the native side
+			value = '';
+		}
+		// On android if content is empty we need to send no content or else the placeholder will not show.
+		if (
+			! this.isIOS &&
+			( value === '' || value === EMPTY_PARAGRAPH_TAGS )
+		) {
+			return '';
+		}
+
+		if ( tagName ) {
+			let extraAttributes = ``;
+			if ( tagName === `ol` ) {
+				if ( this.props.reversed ) {
+					extraAttributes += ` reversed`;
+				}
+				if ( this.props.start ) {
+					extraAttributes += ` start=${ this.props.start }`;
+				}
+			}
+			value = `<${ tagName }${ extraAttributes }>${ value }</${ tagName }>`;
+		}
+		return value;
+	}
+
+	getEditableProps() {
+		return {
+			// Overridable props.
+			style: {},
+			className: 'rich-text',
+			onKeyDown: () => null,
+		};
+	}
+
+	getParsedFontSize( fontSize ) {
+		const { height, width } = Dimensions.get( 'window' );
+		const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };
+
+		if ( ! fontSize ) {
+			return fontSize;
+		}
+
+		const selectedPxValue =
+			getPxFromCssUnit( fontSize, cssUnitOptions ) ?? DEFAULT_FONT_SIZE;
+
+		return parseFloat( selectedPxValue );
+	}
+
+	getFontSize( props ) {
+		const { baseGlobalStyles, tagName, fontSize, style } = props;
+		const tagNameFontSize =
+			baseGlobalStyles?.elements?.[ tagName ]?.typography?.fontSize;
+
+		let newFontSize = DEFAULT_FONT_SIZE;
+
+		// Disables line-height rendering for pre elements until we fix some issues with AztecAndroid.
+		if ( tagName === 'pre' && ! this.isIOS ) {
+			return undefined;
+		}
+
+		// For block-based themes, get the default editor font size.
+		if ( baseGlobalStyles?.typography?.fontSize && tagName === 'p' ) {
+			newFontSize = baseGlobalStyles?.typography?.fontSize;
+		}
+
+		// For block-based themes, get the default element font size
+		// e.g h1, h2.
+		if ( tagNameFontSize ) {
+			newFontSize = tagNameFontSize;
+		}
+
+		// For font size values provided from the styles,
+		// usually from values set from the font size picker.
+		if ( style?.fontSize ) {
+			newFontSize = style.fontSize;
+		}
+
+		// Fall-back to a font size provided from its props (if there's any)
+		// and there are no other default values to use.
+		if ( fontSize && ! tagNameFontSize && ! style?.fontSize ) {
+			newFontSize = fontSize;
+		}
+
+		// We need to always convert to px units because the selected value
+		// could be coming from the web where it could be stored as a different unit.
+		const selectedPxValue = this.getParsedFontSize( newFontSize );
+
+		return selectedPxValue;
+	}
+
+	getLineHeight() {
+		const { baseGlobalStyles, tagName, lineHeight, style } = this.props;
+		const tagNameLineHeight =
+			baseGlobalStyles?.elements?.[ tagName ]?.typography?.lineHeight;
+		let newLineHeight;
+
+		// Disables line-height rendering for pre elements until we fix some issues with AztecAndroid.
+		if ( tagName === 'pre' && ! this.isIOS ) {
+			return undefined;
+		}
+
+		if ( ! this.getIsBlockBasedTheme() ) {
+			return;
+		}
+
+		// For block-based themes, get the default editor line height.
+		if ( baseGlobalStyles?.typography?.lineHeight && tagName === 'p' ) {
+			newLineHeight = parseFloat(
+				baseGlobalStyles?.typography?.lineHeight
+			);
+		}
+
+		// For block-based themes, get the default element line height
+		// e.g h1, h2.
+		if ( tagNameLineHeight ) {
+			newLineHeight = parseFloat( tagNameLineHeight );
+		}
+
+		// For line height values provided from the styles,
+		// usually from values set from the line height picker.
+		if ( style?.lineHeight ) {
+			newLineHeight = parseFloat( style.lineHeight );
+		}
+
+		// Fall-back to a line height provided from its props (if there's any)
+		// and there are no other default values to use.
+		if ( lineHeight && ! tagNameLineHeight && ! style?.lineHeight ) {
+			newLineHeight = lineHeight;
+		}
+
+		// Check the final value is not over the minimum supported value.
+		if ( newLineHeight && newLineHeight < MIN_LINE_HEIGHT ) {
+			newLineHeight = MIN_LINE_HEIGHT;
+		}
+
+		// Until we parse CSS values correctly, avoid passing NaN values to Aztec
+		if ( isNaN( newLineHeight ) ) {
+			return undefined;
+		}
+
+		return newLineHeight;
+	}
+
+	getIsBlockBasedTheme() {
+		const { baseGlobalStyles } = this.props;
+
+		return (
+			baseGlobalStyles && Object.entries( baseGlobalStyles ).length !== 0
+		);
+	}
+
+	getBlockUseDefaultFont() {
+		// For block-based themes it enables using the defaultFont
+		// in Aztec for iOS so it allows customizing the font size
+		// for the Preformatted/Code and Heading blocks.
+		if ( ! this.isIOS ) {
+			return;
+		}
+
+		const { tagName } = this.props;
+		const isBlockBasedTheme = this.getIsBlockBasedTheme();
+		const tagsToMatch = /pre|h([1-6])$/gm;
+
+		return isBlockBasedTheme && tagsToMatch.test( tagName );
+	}
+
+	getLinkTextColor( defaultColor ) {
+		const { style } = this.props;
+		const customColor = style?.linkColor && colord( style.linkColor );
+
+		return customColor && customColor.isValid()
+			? customColor.toHex()
+			: defaultColor;
+	}
+
+	getPlaceholderTextColor() {
+		const {
+			baseGlobalStyles,
+			getStylesFromColorScheme,
+			placeholderTextColor,
+			style,
+		} = this.props;
+
+		// Default placeholder text color.
+		const placeholderStyle = getStylesFromColorScheme(
+			styles.richTextPlaceholder,
+			styles.richTextPlaceholderDark
+		);
+		const { color: defaultPlaceholderTextColor } = placeholderStyle;
+		// Custom 63% opacity for theme and inherited colors.
+		const placeholderOpacity = 'A1';
+
+		// Determine inherited placeholder color if available.
+		const inheritPlaceholderColor = style?.placeholderColor
+			? `${ style.placeholderColor }${ placeholderOpacity }`
+			: undefined;
+
+		// If using block-based themes, derive the placeholder color from global styles.
+		const globalStylesPlaceholderColor = baseGlobalStyles?.color?.text
+			? `${ baseGlobalStyles.color.text }${ placeholderOpacity }`
+			: undefined;
+
+		return (
+			inheritPlaceholderColor ??
+			placeholderTextColor ??
+			globalStylesPlaceholderColor ??
+			defaultPlaceholderTextColor
+		);
+	}
+
+	render() {
+		const {
+			tagName,
+			style,
+			__unstableIsSelected: isSelected,
+			children,
+			getStylesFromColorScheme,
+			minWidth,
+			maxWidth,
+			formatTypes,
+			parentBlockStyles,
+			accessibilityLabel,
+			disableEditingMenu = false,
+			baseGlobalStyles,
+			selectionStart,
+			selectionEnd,
+			disableSuggestions,
+			containerWidth,
+		} = this.props;
+		const { currentFontSize } = this.state;
+
+		const record = this.getRecord();
+		const html = this.getHtmlToRender( record, tagName );
+		const editableProps = this.getEditableProps();
+		const blockUseDefaultFont = this.getBlockUseDefaultFont();
+
+		const fontSize = currentFontSize;
+		const lineHeight = this.getLineHeight();
+
+		const {
+			color: defaultColor,
+			textDecorationColor: defaultTextDecorationColor,
+			fontFamily: defaultFontFamily,
+		} = getStylesFromColorScheme( styles.richText, styles.richTextDark );
+		const linkTextColor = this.getLinkTextColor(
+			defaultTextDecorationColor
+		);
+
+		const currentSelectionStart = selectionStart ?? 0;
+		const currentSelectionEnd = selectionEnd ?? 0;
+		let selection = null;
+		if ( this.needsSelectionUpdate ) {
+			this.needsSelectionUpdate = false;
+			selection = {
+				start: currentSelectionStart,
+				end: currentSelectionEnd,
+			};
+
+			// On AztecAndroid, setting the caret to an out-of-bounds position will crash the editor so, let's check for some cases.
+			if ( ! this.isIOS ) {
+				// The following regular expression is used in Aztec here:
+				// https://github.com/wordpress-mobile/AztecEditor-Android/blob/b1fad439d56fa6d4aa0b78526fef355c59d00dd3/aztec/src/main/kotlin/org/wordpress/aztec/AztecParser.kt#L656
+				const brBeforeParaMatches = html.match( /(<br>)+<\/p>$/g );
+				if ( brBeforeParaMatches ) {
+					console.warn(
+						'Oops, BR tag(s) at the end of content. Aztec will remove them, adapting the selection...'
+					);
+					const count = (
+						brBeforeParaMatches[ 0 ].match( /br/g ) || []
+					).length;
+					if ( count > 0 ) {
+						let newSelectionStart = currentSelectionStart - count;
+						if ( newSelectionStart < 0 ) {
+							newSelectionStart = 0;
+						}
+						let newSelectionEnd = currentSelectionEnd - count;
+						if ( newSelectionEnd < 0 ) {
+							newSelectionEnd = 0;
+						}
+						selection = {
+							start: newSelectionStart,
+							end: newSelectionEnd,
+						};
+					}
+				}
+			}
+		}
+
+		if ( this.comesFromAztec ) {
+			this.comesFromAztec = false;
+			this.firedAfterTextChanged = false;
+		}
+
+		// Logic below assures that `RichText` width will always have equal value when container is almost fully filled.
+		const width =
+			maxWidth && this.state.width && maxWidth - this.state.width < 10
+				? maxWidth
+				: this.state.width;
+		const containerStyles = [
+			style?.padding &&
+				style?.backgroundColor && {
+					padding: style.padding,
+					backgroundColor: style.backgroundColor,
+				},
+			containerWidth && {
+				width: containerWidth,
+			},
+		];
+
+		const defaultSelectionColor = getStylesFromColorScheme(
+			styles[ 'rich-text-selection' ],
+			styles[ 'rich-text-selection--dark' ]
+		).color;
+		const selectionColor = getSelectionColor(
+			this.props.selectionColor,
+			defaultSelectionColor,
+			baseGlobalStyles,
+			this.getIsBlockBasedTheme()
+		);
+
+		const EditableView = ( props ) => {
+			this.customEditableOnKeyDown = props?.onKeyDown;
+
+			return <></>;
+		};
+
+		return (
+			<View style={ containerStyles }>
+				{ children &&
+					children( {
+						isSelected,
+						value: record,
+						onChange: this.onFormatChange,
+						onFocus: () => {},
+						editableProps,
+						editableTagName: EditableView,
+					} ) }
+				<RCTAztecView
+					accessibilityLabel={ accessibilityLabel }
+					ref={ ( ref ) => {
+						this._editor = ref;
+
+						if ( this.props.setRef ) {
+							this.props.setRef( ref );
+						}
+					} }
+					style={ {
+						backgroundColor: styles.richText.backgroundColor,
+						...style,
+						...( this.isIOS && minWidth && maxWidth
+							? { width }
+							: { maxWidth } ),
+						minHeight: this.state.height,
+					} }
+					blockUseDefaultFont={ blockUseDefaultFont }
+					text={ {
+						text: html,
+						eventCount: this.lastEventCount,
+						selection,
+						linkTextColor,
+						tag: tagName,
+					} }
+					placeholder={ this.props.placeholder }
+					placeholderTextColor={ this.getPlaceholderTextColor() }
+					deleteEnter={ this.props.deleteEnter }
+					onChange={ this.onChangeFromAztec }
+					onFocus={ this.onFocus }
+					onBlur={ this.onBlur }
+					onKeyDown={ this.onKeyDown }
+					triggerKeyCodes={
+						disableEditingMenu
+							? []
+							: this.suggestionOptions().map(
+									( op ) => op.triggerChar
+							  )
+					}
+					onPaste={ this.onPaste }
+					activeFormats={ this.getActiveFormatNames( record ) }
+					onContentSizeChange={ this.onContentSizeChange }
+					onSelectionChange={ this.onSelectionChangeFromAztec }
+					blockType={ { tag: tagName } }
+					color={
+						( style && style.color ) ||
+						( parentBlockStyles && parentBlockStyles.color ) ||
+						( baseGlobalStyles && baseGlobalStyles?.color?.text ) ||
+						defaultColor
+					}
+					maxImagesWidth={ 200 }
+					fontFamily={ this.props.fontFamily || defaultFontFamily }
+					fontSize={ fontSize }
+					lineHeight={ lineHeight }
+					fontWeight={ this.props.fontWeight }
+					fontStyle={ this.props.fontStyle }
+					disableEditingMenu={ disableEditingMenu }
+					isMultiline={ this.isMultiline }
+					textAlign={ this.props.textAlign }
+					{ ...( this.isIOS ? { maxWidth } : {} ) }
+					minWidth={ minWidth }
+					id={ this.props.id }
+					selectionColor={ selectionColor }
+					disableAutocorrection={ this.props.disableAutocorrection }
+				/>
+				{ isSelected && (
+					<>
+						<FormatEdit
+							forwardedRef={ this._editor }
+							formatTypes={ formatTypes }
+							value={ record }
+							onChange={ this.onFormatChange }
+							onFocus={ () => {} }
+						/>
+						{ ! disableSuggestions && (
+							<BlockFormatControls>
+								<ToolbarButtonWithOptions
+									options={ this.suggestionOptions() }
+								/>
+							</BlockFormatControls>
+						) }
+					</>
+				) }
+			</View>
+		);
+	}
+}
+
+RichText.defaultProps = {
+	format: 'string',
+	value: '',
+	tagName: 'div',
+};
+
+const withFormatTypes = ( WrappedComponent ) => ( props ) => {
+	const {
+		clientId,
+		identifier,
+		withoutInteractiveFormatting,
+		allowedFormats,
+	} = props;
+	const { formatTypes } = useFormatTypes( {
+		clientId,
+		identifier,
+		withoutInteractiveFormatting,
+		allowedFormats,
+	} );
+
+	return <WrappedComponent { ...props } formatTypes={ formatTypes } />;
+};
+
+export default compose( [
+	withSelect( ( select, { clientId } ) => {
+		const { getBlockParents, getBlock, getSettings } =
+			select( 'core/block-editor' );
+		const parents = getBlockParents( clientId, true );
+		const parentBlock = parents ? getBlock( parents[ 0 ] ) : undefined;
+		const parentBlockStyles = parentBlock?.attributes?.childrenStyles;
+
+		const settings = getSettings();
+		const baseGlobalStyles = settings?.__experimentalGlobalStylesBaseStyles;
+
+		const colorPalettes = settings?.__experimentalFeatures?.color?.palette;
+		const colorPalette = colorPalettes
+			? flatColorPalettes( colorPalettes )
+			: settings?.colors;
+
+		return {
+			areMentionsSupported: settings?.capabilities?.mentions === true,
+			areXPostsSupported: settings?.capabilities?.xposts === true,
+			parentBlockStyles,
+			baseGlobalStyles,
+			colorPalette,
+		};
+	} ),
+	withPreferredColorScheme,
+	withFormatTypes,
+] )( RichText );