Resyncs RichText mobile components with web counterparts.

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

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlobURL } from '@wordpress/blob';
+
+export function filePasteHandler(images, html) {
+	if (!html && images.length > 0) {
+		let filesHTML = '';
+		images.forEach((image) => {
+			const file = image.getAsFile ? image.getAsFile() : image;
+			window.console.log('Received item:\n\n', file);
+			filesHTML += `<img src="${createBlobURL(file)}">`
+		});
+		return filesHTML;		
+	} else {
+		return undefined
+	}
+}

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

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlobURL } from '@wordpress/blob';
+
+export function filePasteHandler(images, html) {
+	if (images && images.length > 0) {
+		// Allows us to ask for this information when we get a report.
+		window.console.log( 'Received items:\n\n', images );
+		const uploadId = Number.MAX_SAFE_INTEGER;
+		let filesHTML = '';
+		images.forEach((file) => {
+			filesHTML += `<img src="${file}" class="wp-image-${uploadId}">`;
+		});
+		return filesHTML;
+	} else { 
+		return undefined;
+	}
+
+}

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,
@@ -26,7 +26,6 @@ import {
 	slice,
 } from '@wordpress/rich-text';
 import { withFilters, Popover } from '@wordpress/components';
-import { createBlobURL } from '@wordpress/blob';
 import deprecated from '@wordpress/deprecated';
 import { isURL } from '@wordpress/url';
 
@@ -38,6 +37,7 @@ 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';
 
 const wrapperClasses = 'editor-rich-text block-editor-rich-text';
 const classes = 'editor-rich-text__editable block-editor-rich-text__editable';
@@ -124,7 +124,7 @@ class RichTextWrapper extends Component {
 		}
 	}
 
-	onPaste( { value, onChange, html, plainText, image } ) {
+	onPaste( { value, onChange, html, plainText, images } ) {
 		const {
 			onReplace,
 			onSplit,
@@ -134,16 +134,13 @@ class RichTextWrapper extends Component {
 			__unstableEmbedURLOnPaste,
 		} = this.props;
 
-		if ( image && ! html ) {
-			const file = image.getAsFile ? image.getAsFile() : image;
+		let imagesHTML = filePasteHandler(images, html)
+		if ( imagesHTML ) {			
 			const content = pasteHandler( {
-				HTML: `<img src="${ createBlobURL( file ) }">`,
+				HTML: imagesHTML,
 				mode: 'BLOCKS',
 				tagName,
-			} );
-
-			// Allows us to ask for this information when we get a report.
-			window.console.log( 'Received item:\n\n', file );
+			} );			
 
 			if ( onReplace && isEmpty( value ) ) {
 				onReplace( content );
@@ -429,7 +426,7 @@ class RichTextWrapper extends Component {
 								<FormatToolbar />
 							</BlockFormatControls>
 						) }
-						{ isSelected && inlineToolbar && hasFormats && (
+						{ Platform.OS === 'web' && isSelected && inlineToolbar && hasFormats && (
 							<Popover
 								noArrow
 								position="top center"
@@ -440,25 +437,27 @@ class RichTextWrapper extends Component {
 								<FormatToolbar />
 							</Popover>
 						) }
-						{ isSelected && <RemoveBrowserShortcuts /> }
-						<Autocomplete
-							onReplace={ onReplace }
-							completers={ autocompleters }
-							record={ value }
-							onChange={ onChange }
-							isSelected={ isSelected }
-						>
-							{ ( { listBoxId, activeId, onKeyDown } ) =>
-								<Editable
-									aria-autocomplete={ listBoxId ? 'list' : undefined }
-									aria-owns={ listBoxId }
-									aria-activedescendant={ activeId }
-									start={ start }
-									reversed={ reversed }
-									onKeyDown={ onKeyDown }
-								/>
-							}
-						</Autocomplete>
+						{ Platform.OS === 'web' && isSelected && <RemoveBrowserShortcuts /> }
+						{ Platform.OS === 'web' && (
+							<Autocomplete
+								onReplace={onReplace}
+								completers={autocompleters}
+								record={value}
+								onChange={onChange}
+								isSelected={isSelected}
+							>
+								{({ listBoxId, activeId, onKeyDown }) =>
+									<Editable
+										aria-autocomplete={listBoxId ? 'list' : undefined}
+										aria-owns={listBoxId}
+										aria-activedescendant={activeId}
+										start={start}
+										reversed={reversed}
+										onKeyDown={onKeyDown}
+									/>
+								}
+							</Autocomplete>
+						) }
 					</>
 				}
 			</RichText>
@@ -482,19 +481,31 @@ class RichTextWrapper extends Component {
 
 const RichTextContainer = compose( [
 	withInstanceId,
-	withBlockEditContext( ( { clientId } ) => ( { clientId } ) ),
+	withBlockEditContext(({ clientId, onCaretVerticalPositionChange, isSelected }, ownProps) => {
+		if ( Platform.OS === 'web' ) {
+			return { clientId }
+		} else {
+			return {
+				clientId,
+				blockIsSelected: ownProps.isSelected !== undefined ? ownProps.isSelected : isSelected,
+				onCaretVerticalPositionChange,
+			};
+		}
+	} ),
 	withSelect( ( select, {
 		clientId,
 		instanceId,
 		identifier = instanceId,
 		isSelected,
+		blockIsSelected,
 	} ) => {
 		const {
 			isCaretWithinFormattedText,
 			getSelectionStart,
 			getSelectionEnd,
 			getSettings,
 			didAutomaticChange,
+			__unstableGetBlockWithoutInnerBlocks,
 		} = select( 'core/block-editor' );
 
 		const selectionStart = getSelectionStart();
@@ -509,13 +520,27 @@ const RichTextContainer = compose( [
 			isSelected = selectionStart.clientId === clientId;
 		}
 
+		let extraProps = {}
+		if ( Platform.OS !== 'web' ) {
+			// 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 = {
+				blockIsSelected,
+				shouldBlurOnUnmount,
+			}
+		}
+
 		return {
 			canUserUseUnfilteredHTML: __experimentalCanUserUseUnfilteredHTML,
 			isCaretWithinFormattedText: isCaretWithinFormattedText(),
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
 			didAutomaticChange: didAutomaticChange(),
+			...extraProps,
 		};
 	} ),
 	withDispatch( ( dispatch, {