Resyncs RichText mobile components with web counterparts.

packages/block-editor/src/components/autocomplete/index.native.js

@@ -0,0 +1 @@
+export default () => null;

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

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlobURL } from '@wordpress/blob';
+
+export function filePasteHandler( files ) {
+	return files
+		.filter( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) )
+		.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
+		.join( '' );
+}

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

@@ -0,0 +1,3 @@
+export function filePasteHandler( files ) {
+	return files.map( ( url ) => `<img src="${ url }">` ).join( '' );
+}

packages/block-editor/src/components/rich-text/format-toolbar-container.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { Popover } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockFormatControls from '../block-format-controls';
+import FormatToolbar from './format-toolbar';
+
+function getAnchorRect( anchorObj ) {
+	const { current } = anchorObj;
+	const rect = current.getBoundingClientRect();
+
+	// Add some space.
+	const buffer = 6;
+
+	// Subtract padding if any.
+	let { paddingTop } = window.getComputedStyle( current );
+
+	paddingTop = parseInt( paddingTop, 10 );
+
+	return {
+		x: rect.left,
+		y: rect.top + paddingTop - buffer,
+		width: rect.width,
+		height: rect.height - paddingTop + buffer,
+		left: rect.left,
+		right: rect.right,
+		top: rect.top + paddingTop - buffer,
+		bottom: rect.bottom,
+	};
+}
+
+const FormatToolbarContainer = ( { inline, anchorObj } ) => {
+	if ( inline ) {
+		// Render in popover
+		return (
+			<Popover
+				noArrow
+				position="top center"
+				focusOnMount={ false }
+				getAnchorRect={ () => getAnchorRect( anchorObj ) }
+				className="block-editor-rich-text__inline-format-toolbar"
+			>
+				<FormatToolbar />
+			</Popover>
+		);
+	}
+	// Render regular toolbar
+	return (
+		<BlockFormatControls>
+			<FormatToolbar />
+		</BlockFormatControls>
+	);
+};
+
+export default FormatToolbarContainer;

packages/block-editor/src/components/rich-text/format-toolbar-container.native.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import BlockFormatControls from '../block-format-controls';
+import FormatToolbar from './format-toolbar';
+
+const FormatToolbarContainer = () => {
+	// Render regular toolbar
+	return (
+		<BlockFormatControls>
+			<FormatToolbar />
+		</BlockFormatControls>
+	);
+};
+
+export default FormatToolbarContainer;

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

@@ -7,9 +7,9 @@ import { omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { RawHTML, Component, createRef } from '@wordpress/element';
+import { RawHTML, Component, createRef, Platform } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { pasteHandler, children as childrenSource, getBlockTransforms, findTransform } from '@wordpress/blocks';
+import { pasteHandler, children as childrenSource, getBlockTransforms, findTransform, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { withInstanceId, compose } from '@wordpress/compose';
 import {
 	__experimentalRichText as RichText,
@@ -25,19 +25,18 @@ import {
 	toHTMLString,
 	slice,
 } from '@wordpress/rich-text';
-import { withFilters, Popover } from '@wordpress/components';
-import { createBlobURL } from '@wordpress/blob';
+import { withFilters } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
 import { isURL } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import Autocomplete from '../autocomplete';
-import BlockFormatControls from '../block-format-controls';
-import FormatToolbar from './format-toolbar';
 import { withBlockEditContext } from '../block-edit/context';
 import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
+import { filePasteHandler } from './file-paste-handler';
+import FormatToolbarContainer from './format-toolbar-container';
 
 const wrapperClasses = 'editor-rich-text block-editor-rich-text';
 const classes = 'editor-rich-text__editable block-editor-rich-text__editable';
@@ -66,7 +65,6 @@ class RichTextWrapper extends Component {
 		this.onPaste = this.onPaste.bind( this );
 		this.onDelete = this.onDelete.bind( this );
 		this.inputRule = this.inputRule.bind( this );
-		this.getAnchorRect = this.getAnchorRect.bind( this );
 	}
 
 	onEnter( { value, onChange, shiftKey } ) {
@@ -124,7 +122,7 @@ class RichTextWrapper extends Component {
 		}
 	}
 
-	onPaste( { value, onChange, html, plainText, image } ) {
+	onPaste( { value, onChange, html, plainText, files } ) {
 		const {
 			onReplace,
 			onSplit,
@@ -134,16 +132,18 @@ class RichTextWrapper extends Component {
 			__unstableEmbedURLOnPaste,
 		} = this.props;
 
-		if ( image && ! html ) {
-			const file = image.getAsFile ? image.getAsFile() : image;
+		// Only process file if no HTML is present.
+		// Note: a pasted file may have the URL as plain text.
+		if ( files && files.length && ! html ) {
 			const content = pasteHandler( {
-				HTML: `<img src="${ createBlobURL( file ) }">`,
+				HTML: filePasteHandler( files ),
 				mode: 'BLOCKS',
 				tagName,
 			} );
 
 			// Allows us to ask for this information when we get a report.
-			window.console.log( 'Received item:\n\n', file );
+			// eslint-disable-next-line no-console
+			window.console.log( 'Received items:\n\n', files );
 
 			if ( onReplace && isEmpty( value ) ) {
 				onReplace( content );
@@ -303,30 +303,6 @@ class RichTextWrapper extends Component {
 		return formattingControls.map( ( name ) => `core/${ name }` );
 	}
 
-	getAnchorRect() {
-		const { current } = this.ref;
-		const rect = current.getBoundingClientRect();
-
-		// Add some space.
-		const buffer = 6;
-
-		// Subtract padding if any.
-		let { paddingTop } = window.getComputedStyle( current );
-
-		paddingTop = parseInt( paddingTop, 10 );
-
-		return {
-			x: rect.left,
-			y: rect.top + paddingTop - buffer,
-			width: rect.width,
-			height: rect.height - paddingTop + buffer,
-			left: rect.left,
-			right: rect.right,
-			top: rect.top + paddingTop - buffer,
-			bottom: rect.bottom,
-		};
-	}
-
 	render() {
 		const {
 			children,
@@ -424,22 +400,7 @@ class RichTextWrapper extends Component {
 				{ ( { isSelected, value, onChange, Editable } ) =>
 					<>
 						{ children && children( { value, onChange } ) }
-						{ isSelected && ! inlineToolbar && hasFormats && (
-							<BlockFormatControls>
-								<FormatToolbar />
-							</BlockFormatControls>
-						) }
-						{ isSelected && inlineToolbar && hasFormats && (
-							<Popover
-								noArrow
-								position="top center"
-								focusOnMount={ false }
-								getAnchorRect={ this.getAnchorRect }
-								className="block-editor-rich-text__inline-format-toolbar"
-							>
-								<FormatToolbar />
-							</Popover>
-						) }
+						{ isSelected && hasFormats && ( <FormatToolbarContainer inline={ inlineToolbar } anchorObj={ this.ref } /> ) }
 						{ isSelected && <RemoveBrowserShortcuts /> }
 						<Autocomplete
 							onReplace={ onReplace }
@@ -482,7 +443,16 @@ class RichTextWrapper extends Component {
 
 const RichTextContainer = compose( [
 	withInstanceId,
-	withBlockEditContext( ( { clientId } ) => ( { clientId } ) ),
+	withBlockEditContext( ( { clientId, onCaretVerticalPositionChange, isSelected }, ownProps ) => {
+		if ( Platform.OS === 'web' ) {
+			return { clientId };
+		}
+		return {
+			clientId,
+			blockIsSelected: ownProps.isSelected !== undefined ? ownProps.isSelected : isSelected,
+			onCaretVerticalPositionChange,
+		};
+	} ),
 	withSelect( ( select, {
 		clientId,
 		instanceId,
@@ -495,6 +465,7 @@ const RichTextContainer = compose( [
 			getSelectionEnd,
 			getSettings,
 			didAutomaticChange,
+			__unstableGetBlockWithoutInnerBlocks,
 		} = select( 'core/block-editor' );
 
 		const selectionStart = getSelectionStart();
@@ -509,13 +480,26 @@ const RichTextContainer = compose( [
 			isSelected = selectionStart.clientId === clientId;
 		}
 
+		let extraProps = {};
+		if ( Platform.OS === 'native' ) {
+			// If the block of this RichText is unmodified then it's a candidate for replacing when adding a new block.
+			// In order to fix https://github.com/wordpress-mobile/gutenberg-mobile/issues/1126, let's blur on unmount in that case.
+			// This apparently assumes functionality the BlockHlder actually
+			const block = clientId && __unstableGetBlockWithoutInnerBlocks( clientId );
+			const shouldBlurOnUnmount = block && isSelected && isUnmodifiedDefaultBlock( block );
+			extraProps = {
+				shouldBlurOnUnmount,
+			};
+		}
+
 		return {
 			canUserUseUnfilteredHTML: __experimentalCanUserUseUnfilteredHTML,
 			isCaretWithinFormattedText: isCaretWithinFormattedText(),
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
 			didAutomaticChange: didAutomaticChange(),
+			...extraProps,
 		};
 	} ),
 	withDispatch( ( dispatch, {