Implement image copy paste on GB-RN mobile (#14802)

* Implement image corrector for native.

* Add paste code to detect images being copy pasted.

# Conflicts:
#	packages/block-editor/src/components/rich-text/index.native.js

* Accepts multiples files on copy paste.

* Implement media import.

* Check if array has any images.

* Add comment.

* Remove duplicate listener activation.

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

@@ -302,11 +302,35 @@ export class RichText extends Component {
 		const isPasted = true;
 		const { onSplit } = this.props;
 
-		const { pastedText, pastedHtml } = event.nativeEvent;
+		const { pastedText, pastedHtml, files } = event.nativeEvent;
 		const currentRecord = this.createRecord( event.nativeEvent );
 
 		event.preventDefault();
 
+		// Only process file if no HTML is present.
+		// Note: a pasted file may have the URL as plain text.
+		if ( files && files.length > 0 ) {
+			const uploadId = Number.MAX_SAFE_INTEGER;
+			let html = '';
+			files.forEach( ( file ) => {
+				html += `<img src="${ file }" class="wp-image-${ uploadId }">`;
+			} );
+			const content = pasteHandler( {
+				HTML: html,
+				mode: 'BLOCKS',
+				tagName: this.props.tagName,
+			} );
+			const shouldReplace = this.props.onReplace && this.isEmpty();
+
+			if ( shouldReplace ) {
+				this.props.onReplace( content );
+			} else {
+				this.splitContent( currentRecord, content, isPasted );
+			}
+
+			return;
+		}
+
 		// There is a selection, check if a URL is pasted.
 		if ( ! isCollapsed( currentRecord ) ) {
 			const trimmedText = ( pastedHtml || pastedText ).replace( /<[^>]+>/g, '' )

packages/block-library/src/image/edit.native.js

@@ -8,6 +8,7 @@ import {
 	requestMediaPickFromMediaLibrary,
 	requestMediaPickFromDeviceLibrary,
 	requestMediaPickFromDeviceCamera,
+	requestMediaImport,
 	mediaUploadSync,
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
@@ -77,9 +78,16 @@ class ImageEdit extends React.Component {
 	componentDidMount() {
 		this.addMediaUploadListener();
 
-		const { attributes } = this.props;
+		const { attributes, setAttributes } = this.props;
 
 		if ( attributes.id && ! isURL( attributes.url ) ) {
+			if ( attributes.url.indexOf( 'file:' ) === 0 ) {
+				requestMediaImport( attributes.url, ( mediaId, mediaUri ) => {
+					if ( mediaUri ) {
+						setAttributes( { url: mediaUri, id: mediaId } );
+					}
+				} );
+			}
 			mediaUploadSync();
 		}
 	}

packages/blocks/src/api/raw-handling/image-corrector.native.js

@@ -0,0 +1,18 @@
+
+/**
+ * This method check for copy pasted img elements to see if they don't have suspicious attributes.
+ *
+ * @param {Node} node The node to check.
+ *
+ * @return {void}
+*/
+export default function( node ) {
+	if ( node.nodeName !== 'IMG' ) {
+		return;
+	}
+
+	// Remove trackers and hardly visible images.
+	if ( node.height === 1 || node.width === 1 ) {
+		node.parentNode.removeChild( node );
+	}
+}