From 5ae642a2091230f9767b8010634320393a895608 Mon Sep 17 00:00:00 2001
From: Matthew Kevins <mkevins@users.noreply.github.com>
Date: Tue, 19 Feb 2019 20:28:02 +1000
Subject: [PATCH] Implement pasting external content with plain and styled text
 (#13841)

* Refactor raw-handler and paste-handler into their own files

* Add undefined and null checks for jsdom-jscore node methods/properties

* Implement createRecord method for converting native content to RichText

* Refactor splitContent and onEnter for common interface with onPaste

* Begin implementing onPaste for plain and styled text

* Fix some lint errors and some invalid references.

* Add undefined check for jsdom-jscore node in phrasing-content-reducer

* Add onReplace method to ParagraphEdit

* Refactor raw-handler back into index.js

* Remove unused parameters from RichText create method
---
 .../src/paragraph/edit.native.js              |  16 ++
 packages/blocks/src/api/index.native.js       |   3 +-
 packages/blocks/src/api/raw-handling/index.js | 167 +-----------
 .../src/api/raw-handling/index.native.js      |   1 +
 .../src/api/raw-handling/paste-handler.js     | 240 ++++++++++++++++++
 .../raw-handling/phrasing-content-reducer.js  |   8 +-
 packages/blocks/src/api/raw-handling/utils.js |   4 +-
 packages/dom/package.json                     |   1 +
 .../src/components/rich-text/index.native.js  | 152 +++++++++--
 packages/shortcode/package.json               |   1 +
 10 files changed, 407 insertions(+), 186 deletions(-)
 create mode 100644 packages/blocks/src/api/raw-handling/paste-handler.js

diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
index b8205240d48d1..c859f5c5216c8 100644
--- a/packages/block-library/src/paragraph/edit.native.js
+++ b/packages/block-library/src/paragraph/edit.native.js
@@ -22,6 +22,7 @@ class ParagraphEdit extends Component {
 	constructor( props ) {
 		super( props );
 		this.splitBlock = this.splitBlock.bind( this );
+		this.onReplace = this.onReplace.bind( this );
 
 		this.state = {
 			aztecHeight: 0,
@@ -71,6 +72,20 @@ class ParagraphEdit extends Component {
 		}
 	}
 
+	onReplace( blocks ) {
+		const { attributes, onReplace } = this.props;
+		onReplace( blocks.map( ( block, index ) => (
+			index === 0 && block.name === name ?
+				{ ...block,
+					attributes: {
+						...attributes,
+						...block.attributes,
+					},
+				} :
+				block
+		) ) );
+	}
+
 	render() {
 		const {
 			attributes,
@@ -106,6 +121,7 @@ class ParagraphEdit extends Component {
 					} }
 					onSplit={ this.splitBlock }
 					onMerge={ mergeBlocks }
+					onReplace={ this.onReplace }
 					onContentSizeChange={ ( event ) => {
 						this.setState( { aztecHeight: event.aztecHeight } );
 					} }
diff --git a/packages/blocks/src/api/index.native.js b/packages/blocks/src/api/index.native.js
index 7b0bd10eadfd7..2f850d36108cb 100644
--- a/packages/blocks/src/api/index.native.js
+++ b/packages/blocks/src/api/index.native.js
@@ -4,6 +4,7 @@ export {
 } from './factory';
 export {
 	default as parse,
+	getBlockAttributes,
 	parseWithAttributeSchema,
 } from './parser';
 export {
@@ -28,5 +29,5 @@ export {
 export {
 	isUnmodifiedDefaultBlock,
 } from './utils';
-export { getPhrasingContentSchema } from './raw-handling';
+export { pasteHandler, getPhrasingContentSchema } from './raw-handling';
 export { default as children } from './children';
diff --git a/packages/blocks/src/api/raw-handling/index.js b/packages/blocks/src/api/raw-handling/index.js
index 2de9bff8e2059..58044375d9dc3 100644
--- a/packages/blocks/src/api/raw-handling/index.js
+++ b/packages/blocks/src/api/raw-handling/index.js
@@ -7,52 +7,20 @@ import { flatMap, filter, compact } from 'lodash';
  * Internal dependencies
  */
 import { createBlock, getBlockTransforms, findTransform } from '../factory';
-import { getBlockContent } from '../serializer';
 import { getBlockAttributes, parseWithGrammar } from '../parser';
 import normaliseBlocks from './normalise-blocks';
 import specialCommentConverter from './special-comment-converter';
-import isInlineContent from './is-inline-content';
-import phrasingContentReducer from './phrasing-content-reducer';
-import headRemover from './head-remover';
-import msListConverter from './ms-list-converter';
 import listReducer from './list-reducer';
-import imageCorrector from './image-corrector';
 import blockquoteNormaliser from './blockquote-normaliser';
 import figureContentReducer from './figure-content-reducer';
 import shortcodeConverter from './shortcode-converter';
-import markdownConverter from './markdown-converter';
-import iframeRemover from './iframe-remover';
-import { getPhrasingContentSchema } from './phrasing-content';
 import {
 	deepFilterHTML,
-	isPlain,
-	removeInvalidHTML,
 	getBlockContentSchema,
 } from './utils';
 
-/**
- * Browser dependencies
- */
-const { console } = window;
-
-export { getPhrasingContentSchema };
-
-/**
- * Filters HTML to only contain phrasing content.
- *
- * @param {string} HTML The HTML to filter.
- *
- * @return {string} HTML only containing phrasing content.
- */
-function filterInlineHTML( HTML ) {
-	HTML = deepFilterHTML( HTML, [ phrasingContentReducer ] );
-	HTML = removeInvalidHTML( HTML, getPhrasingContentSchema(), { inline: true } );
-
-	// Allows us to ask for this information when we get a report.
-	console.log( 'Processed inline HTML:\n\n', HTML );
-
-	return HTML;
-}
+export { getPhrasingContentSchema } from './phrasing-content';
+export { pasteHandler } from './paste-handler';
 
 function getRawTransformations() {
 	return filter( getBlockTransforms( 'from' ), { type: 'raw' } )
@@ -110,137 +78,6 @@ function htmlToBlocks( { html, rawTransforms } ) {
 	} );
 }
 
-/**
- * Converts an HTML string to known blocks. Strips everything else.
- *
- * @param {string}  [options.HTML]                     The HTML to convert.
- * @param {string}  [options.plainText]                Plain text version.
- * @param {string}  [options.mode]                     Handle content as blocks or inline content.
- *                                                     * 'AUTO': Decide based on the content passed.
- *                                                     * 'INLINE': Always handle as inline content, and return string.
- *                                                     * 'BLOCKS': Always handle as blocks, and return array of blocks.
- * @param {Array}   [options.tagName]                  The tag into which content will be inserted.
- * @param {boolean} [options.canUserUseUnfilteredHTML] Whether or not the user can use unfiltered HTML.
- *
- * @return {Array|string} A list of blocks or a string, depending on `handlerMode`.
- */
-export function pasteHandler( { HTML = '', plainText = '', mode = 'AUTO', tagName, canUserUseUnfilteredHTML = false } ) {
-	// First of all, strip any meta tags.
-	HTML = HTML.replace( /<meta[^>]+>/, '' );
-
-	// If we detect block delimiters, parse entirely as blocks.
-	if ( mode !== 'INLINE' && HTML.indexOf( '<!-- wp:' ) !== -1 ) {
-		return parseWithGrammar( HTML );
-	}
-
-	// Normalize unicode to use composed characters.
-	// This is unsupported in IE 11 but it's a nice-to-have feature, not mandatory.
-	// Not normalizing the content will only affect older browsers and won't
-	// entirely break the app.
-	// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize
-	// See: https://core.trac.wordpress.org/ticket/30130
-	// See: https://github.com/WordPress/gutenberg/pull/6983#pullrequestreview-125151075
-	if ( String.prototype.normalize ) {
-		HTML = HTML.normalize();
-	}
-
-	// Parse Markdown (and encoded HTML) if:
-	// * There is a plain text version.
-	// * There is no HTML version, or it has no formatting.
-	if ( plainText && ( ! HTML || isPlain( HTML ) ) ) {
-		HTML = markdownConverter( plainText );
-
-		// Switch to inline mode if:
-		// * The current mode is AUTO.
-		// * The original plain text had no line breaks.
-		// * The original plain text was not an HTML paragraph.
-		// * The converted text is just a paragraph.
-		if (
-			mode === 'AUTO' &&
-			plainText.indexOf( '\n' ) === -1 &&
-			plainText.indexOf( '<p>' ) !== 0 &&
-			HTML.indexOf( '<p>' ) === 0
-		) {
-			mode = 'INLINE';
-		}
-	}
-
-	if ( mode === 'INLINE' ) {
-		return filterInlineHTML( HTML );
-	}
-
-	// An array of HTML strings and block objects. The blocks replace matched
-	// shortcodes.
-	const pieces = shortcodeConverter( HTML );
-
-	// The call to shortcodeConverter will always return more than one element
-	// if shortcodes are matched. The reason is when shortcodes are matched
-	// empty HTML strings are included.
-	const hasShortcodes = pieces.length > 1;
-
-	if ( mode === 'AUTO' && ! hasShortcodes && isInlineContent( HTML, tagName ) ) {
-		return filterInlineHTML( HTML );
-	}
-
-	const rawTransforms = getRawTransformations();
-	const phrasingContentSchema = getPhrasingContentSchema();
-	const blockContentSchema = getBlockContentSchema( rawTransforms );
-
-	const blocks = compact( flatMap( pieces, ( piece ) => {
-		// Already a block from shortcode.
-		if ( typeof piece !== 'string' ) {
-			return piece;
-		}
-
-		const filters = [
-			msListConverter,
-			headRemover,
-			listReducer,
-			imageCorrector,
-			phrasingContentReducer,
-			specialCommentConverter,
-			figureContentReducer,
-			blockquoteNormaliser,
-		];
-
-		if ( ! canUserUseUnfilteredHTML ) {
-			// Should run before `figureContentReducer`.
-			filters.unshift( iframeRemover );
-		}
-
-		const schema = {
-			...blockContentSchema,
-			// Keep top-level phrasing content, normalised by `normaliseBlocks`.
-			...phrasingContentSchema,
-		};
-
-		piece = deepFilterHTML( piece, filters, blockContentSchema );
-		piece = removeInvalidHTML( piece, schema );
-		piece = normaliseBlocks( piece );
-
-		// Allows us to ask for this information when we get a report.
-		console.log( 'Processed HTML piece:\n\n', piece );
-
-		return htmlToBlocks( { html: piece, rawTransforms } );
-	} ) );
-
-	// If we're allowed to return inline content and there is only one block
-	// and the original plain text content does not have any line breaks, then
-	// treat it as inline paste.
-	if ( mode === 'AUTO' && blocks.length === 1 ) {
-		const trimmedPlainText = plainText.trim();
-
-		if ( trimmedPlainText !== '' && trimmedPlainText.indexOf( '\n' ) === -1 ) {
-			return removeInvalidHTML(
-				getBlockContent( blocks[ 0 ] ),
-				phrasingContentSchema
-			);
-		}
-	}
-
-	return blocks;
-}
-
 /**
  * Converts an HTML string to known blocks.
  *
diff --git a/packages/blocks/src/api/raw-handling/index.native.js b/packages/blocks/src/api/raw-handling/index.native.js
index fb0890bf2aecd..f7e468e3fe363 100644
--- a/packages/blocks/src/api/raw-handling/index.native.js
+++ b/packages/blocks/src/api/raw-handling/index.native.js
@@ -1 +1,2 @@
 export { getPhrasingContentSchema } from './phrasing-content';
+export { pasteHandler } from './paste-handler';
diff --git a/packages/blocks/src/api/raw-handling/paste-handler.js b/packages/blocks/src/api/raw-handling/paste-handler.js
new file mode 100644
index 0000000000000..cc14ace649b5a
--- /dev/null
+++ b/packages/blocks/src/api/raw-handling/paste-handler.js
@@ -0,0 +1,240 @@
+/**
+ * External dependencies
+ */
+import { flatMap, filter, compact } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { createBlock, getBlockTransforms, findTransform } from '../factory';
+import { getBlockContent } from '../serializer';
+import { getBlockAttributes, parseWithGrammar } from '../parser';
+import normaliseBlocks from './normalise-blocks';
+import specialCommentConverter from './special-comment-converter';
+import isInlineContent from './is-inline-content';
+import phrasingContentReducer from './phrasing-content-reducer';
+import headRemover from './head-remover';
+import msListConverter from './ms-list-converter';
+import listReducer from './list-reducer';
+import imageCorrector from './image-corrector';
+import blockquoteNormaliser from './blockquote-normaliser';
+import figureContentReducer from './figure-content-reducer';
+import shortcodeConverter from './shortcode-converter';
+import markdownConverter from './markdown-converter';
+import iframeRemover from './iframe-remover';
+import { getPhrasingContentSchema } from './phrasing-content';
+import {
+	deepFilterHTML,
+	isPlain,
+	removeInvalidHTML,
+	getBlockContentSchema,
+} from './utils';
+
+/**
+ * Browser dependencies
+ */
+const { console } = window;
+
+/**
+ * Filters HTML to only contain phrasing content.
+ *
+ * @param {string} HTML The HTML to filter.
+ *
+ * @return {string} HTML only containing phrasing content.
+ */
+function filterInlineHTML( HTML ) {
+	HTML = deepFilterHTML( HTML, [ phrasingContentReducer ] );
+	HTML = removeInvalidHTML( HTML, getPhrasingContentSchema(), { inline: true } );
+
+	// Allows us to ask for this information when we get a report.
+	console.log( 'Processed inline HTML:\n\n', HTML );
+
+	return HTML;
+}
+
+function getRawTransformations() {
+	return filter( getBlockTransforms( 'from' ), { type: 'raw' } )
+		.map( ( transform ) => {
+			return transform.isMatch ? transform : {
+				...transform,
+				isMatch: ( node ) => transform.selector && node.matches( transform.selector ),
+			};
+		} );
+}
+
+/**
+ * Converts HTML directly to blocks. Looks for a matching transform for each
+ * top-level tag. The HTML should be filtered to not have any text between
+ * top-level tags and formatted in a way that blocks can handle the HTML.
+ *
+ * @param  {Object} $1               Named parameters.
+ * @param  {string} $1.html          HTML to convert.
+ * @param  {Array}  $1.rawTransforms Transforms that can be used.
+ *
+ * @return {Array} An array of blocks.
+ */
+function htmlToBlocks( { html, rawTransforms } ) {
+	const doc = document.implementation.createHTMLDocument( '' );
+
+	doc.body.innerHTML = html;
+
+	return Array.from( doc.body.children ).map( ( node ) => {
+		const rawTransform = findTransform( rawTransforms, ( { isMatch } ) => isMatch( node ) );
+
+		if ( ! rawTransform ) {
+			return createBlock(
+				// Should not be hardcoded.
+				'core/html',
+				getBlockAttributes(
+					'core/html',
+					node.outerHTML
+				)
+			);
+		}
+
+		const { transform, blockName } = rawTransform;
+
+		if ( transform ) {
+			return transform( node );
+		}
+
+		return createBlock(
+			blockName,
+			getBlockAttributes(
+				blockName,
+				node.outerHTML
+			)
+		);
+	} );
+}
+
+/**
+ * Converts an HTML string to known blocks. Strips everything else.
+ *
+ * @param {string}  [options.HTML]                     The HTML to convert.
+ * @param {string}  [options.plainText]                Plain text version.
+ * @param {string}  [options.mode]                     Handle content as blocks or inline content.
+ *                                                     * 'AUTO': Decide based on the content passed.
+ *                                                     * 'INLINE': Always handle as inline content, and return string.
+ *                                                     * 'BLOCKS': Always handle as blocks, and return array of blocks.
+ * @param {Array}   [options.tagName]                  The tag into which content will be inserted.
+ * @param {boolean} [options.canUserUseUnfilteredHTML] Whether or not the user can use unfiltered HTML.
+ *
+ * @return {Array|string} A list of blocks or a string, depending on `handlerMode`.
+ */
+export function pasteHandler( { HTML = '', plainText = '', mode = 'AUTO', tagName, canUserUseUnfilteredHTML = false } ) {
+	// First of all, strip any meta tags.
+	HTML = HTML.replace( /<meta[^>]+>/, '' );
+
+	// If we detect block delimiters, parse entirely as blocks.
+	if ( mode !== 'INLINE' && HTML.indexOf( '<!-- wp:' ) !== -1 ) {
+		return parseWithGrammar( HTML );
+	}
+
+	// Normalize unicode to use composed characters.
+	// This is unsupported in IE 11 but it's a nice-to-have feature, not mandatory.
+	// Not normalizing the content will only affect older browsers and won't
+	// entirely break the app.
+	// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize
+	// See: https://core.trac.wordpress.org/ticket/30130
+	// See: https://github.com/WordPress/gutenberg/pull/6983#pullrequestreview-125151075
+	if ( String.prototype.normalize ) {
+		HTML = HTML.normalize();
+	}
+
+	// Parse Markdown (and encoded HTML) if:
+	// * There is a plain text version.
+	// * There is no HTML version, or it has no formatting.
+	if ( plainText && ( ! HTML || isPlain( HTML ) ) ) {
+		HTML = markdownConverter( plainText );
+
+		// Switch to inline mode if:
+		// * The current mode is AUTO.
+		// * The original plain text had no line breaks.
+		// * The original plain text was not an HTML paragraph.
+		// * The converted text is just a paragraph.
+		if (
+			mode === 'AUTO' &&
+			plainText.indexOf( '\n' ) === -1 &&
+			plainText.indexOf( '<p>' ) !== 0 &&
+			HTML.indexOf( '<p>' ) === 0
+		) {
+			mode = 'INLINE';
+		}
+	}
+
+	if ( mode === 'INLINE' ) {
+		return filterInlineHTML( HTML );
+	}
+
+	// An array of HTML strings and block objects. The blocks replace matched
+	// shortcodes.
+	const pieces = shortcodeConverter( HTML );
+
+	// The call to shortcodeConverter will always return more than one element
+	// if shortcodes are matched. The reason is when shortcodes are matched
+	// empty HTML strings are included.
+	const hasShortcodes = pieces.length > 1;
+
+	if ( mode === 'AUTO' && ! hasShortcodes && isInlineContent( HTML, tagName ) ) {
+		return filterInlineHTML( HTML );
+	}
+
+	const rawTransforms = getRawTransformations();
+	const phrasingContentSchema = getPhrasingContentSchema();
+	const blockContentSchema = getBlockContentSchema( rawTransforms );
+
+	const blocks = compact( flatMap( pieces, ( piece ) => {
+		// Already a block from shortcode.
+		if ( typeof piece !== 'string' ) {
+			return piece;
+		}
+
+		const filters = [
+			msListConverter,
+			headRemover,
+			listReducer,
+			imageCorrector,
+			phrasingContentReducer,
+			specialCommentConverter,
+			figureContentReducer,
+			blockquoteNormaliser,
+		];
+
+		if ( ! canUserUseUnfilteredHTML ) {
+			// Should run before `figureContentReducer`.
+			filters.unshift( iframeRemover );
+		}
+
+		const schema = {
+			...blockContentSchema,
+			// Keep top-level phrasing content, normalised by `normaliseBlocks`.
+			...phrasingContentSchema,
+		};
+
+		piece = deepFilterHTML( piece, filters, blockContentSchema );
+		piece = removeInvalidHTML( piece, schema );
+		piece = normaliseBlocks( piece );
+
+		// Allows us to ask for this information when we get a report.
+		console.log( 'Processed HTML piece:\n\n', piece );
+
+		return htmlToBlocks( { html: piece, rawTransforms } );
+	} ) );
+
+	// If we're allowed to return inline content and there is only one block
+	// and the original plain text content does not have any line breaks, then
+	// treat it as inline paste.
+	if ( mode === 'AUTO' && blocks.length === 1 ) {
+		const trimmedPlainText = plainText.trim();
+
+		if ( trimmedPlainText !== '' && trimmedPlainText.indexOf( '\n' ) === -1 ) {
+			return removeInvalidHTML(
+				getBlockContent( blocks[ 0 ] ),
+				phrasingContentSchema
+			);
+		}
+	}
+
+	return blocks;
+}
diff --git a/packages/blocks/src/api/raw-handling/phrasing-content-reducer.js b/packages/blocks/src/api/raw-handling/phrasing-content-reducer.js
index 5237c28495ee7..defdbe1eb97dc 100644
--- a/packages/blocks/src/api/raw-handling/phrasing-content-reducer.js
+++ b/packages/blocks/src/api/raw-handling/phrasing-content-reducer.js
@@ -4,7 +4,9 @@
 import { wrap, replaceTag } from '@wordpress/dom';
 
 export default function( node, doc ) {
-	if ( node.nodeName === 'SPAN' ) {
+	// In jsdom-jscore, 'node.style' can be null.
+	// TODO: Explore fixing this by patching jsdom-jscore.
+	if ( node.nodeName === 'SPAN' && node.style ) {
 		const {
 			fontWeight,
 			fontStyle,
@@ -34,7 +36,9 @@ export default function( node, doc ) {
 	} else if ( node.nodeName === 'I' ) {
 		node = replaceTag( node, 'em' );
 	} else if ( node.nodeName === 'A' ) {
-		if ( node.target.toLowerCase() === '_blank' ) {
+		// In jsdom-jscore, 'node.target' can be null.
+		// TODO: Explore fixing this by patching jsdom-jscore.
+		if ( node.target && node.target.toLowerCase() === '_blank' ) {
 			node.rel = 'noreferrer noopener';
 		} else {
 			node.removeAttribute( 'target' );
diff --git a/packages/blocks/src/api/raw-handling/utils.js b/packages/blocks/src/api/raw-handling/utils.js
index 90e6f463ad465..4395c82c429dc 100644
--- a/packages/blocks/src/api/raw-handling/utils.js
+++ b/packages/blocks/src/api/raw-handling/utils.js
@@ -203,7 +203,9 @@ function cleanNodeList( nodeList, doc, schema, inline ) {
 					} );
 
 					// Strip invalid classes.
-					if ( node.classList.length ) {
+					// In jsdom-jscore, 'node.classList' can be undefined.
+					// TODO: Explore patching this in jsdom-jscore.
+					if ( node.classList && node.classList.length ) {
 						const mattchers = classes.map( ( item ) => {
 							if ( typeof item === 'string' ) {
 								return ( className ) => className === item;
diff --git a/packages/dom/package.json b/packages/dom/package.json
index 5577a2dc31ddc..6e94a8fc0dae5 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -19,6 +19,7 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.3.1",
 		"lodash": "^4.17.11"
diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js
index a97c37f248e05..9ada8911699a0 100644
--- a/packages/editor/src/components/rich-text/index.native.js
+++ b/packages/editor/src/components/rich-text/index.native.js
@@ -12,14 +12,19 @@ import { withInstanceId, compose } from '@wordpress/compose';
 import { BlockFormatControls } from '@wordpress/editor';
 import { withSelect } from '@wordpress/data';
 import {
+	applyFormat,
 	getActiveFormat,
 	isEmpty,
 	create,
 	split,
 	toHTMLString,
+	insert,
+	isCollapsed,
 } from '@wordpress/rich-text';
+import { decodeEntities } from '@wordpress/html-entities';
 import { BACKSPACE } from '@wordpress/keycodes';
-import { children } from '@wordpress/blocks';
+import { pasteHandler, children } from '@wordpress/blocks';
+import { isURL } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -50,6 +55,7 @@ export class RichText extends Component {
 		this.onChange = this.onChange.bind( this );
 		this.onEnter = this.onEnter.bind( this );
 		this.onBackspace = this.onBackspace.bind( this );
+		this.onPaste = this.onPaste.bind( this );
 		this.onContentSizeChange = this.onContentSizeChange.bind( this );
 		this.onFormatChange = this.onFormatChange.bind( this );
 		// This prevents a bug in Aztec which triggers onSelectionChange twice on format change
@@ -84,25 +90,15 @@ export class RichText extends Component {
 	 * handler.
 	 *
 	 */
-	splitContent( htmlText, start, end ) {
+	splitContent( currentRecord, blocks = [], isPasted = false ) {
 		const { onSplit } = this.props;
 
 		if ( ! onSplit ) {
 			return;
 		}
 
-		const record = create( {
-			html: htmlText,
-			range: null,
-			multilineTag: false,
-			removeNode: null,
-			unwrapNode: null,
-			removeAttribute: null,
-			filterString: null,
-		} );
-
 		// TODO : Fix the index position in AztecNative for Android
-		let [ before, after ] = split( { start, end, ...record } );
+		let [ before, after ] = split( currentRecord );
 
 		// In case split occurs at the trailing or leading edge of the field,
 		// assume that the before/after values respectively reflect the current
@@ -110,9 +106,16 @@ export class RichText extends Component {
 		// determine whether the before/after value has changed using a trivial
 		//  strict equality operation.
 		if ( isEmpty( after ) ) {
-			before = record;
+			before = currentRecord;
 		} else if ( isEmpty( before ) ) {
-			after = record;
+			after = currentRecord;
+		}
+
+		// If pasting and the split would result in no content other than the
+		// pasted blocks, remove the before and after blocks.
+		if ( isPasted ) {
+			before = isEmpty( before ) ? null : before;
+			after = isEmpty( after ) ? null : after;
 		}
 
 		if ( before ) {
@@ -129,7 +132,7 @@ export class RichText extends Component {
 		// always update when provided with new content.
 		this.lastEventCount = undefined;
 
-		onSplit( before, after );
+		onSplit( before, after, ...blocks );
 	}
 
 	valueToFormat( { formats, text } ) {
@@ -225,7 +228,12 @@ export class RichText extends Component {
 			return;
 		}
 
-		this.splitContent( unescapeSpaces( event.nativeEvent.text ), event.nativeEvent.selectionStart, event.nativeEvent.selectionEnd );
+		const currentRecord = this.createRecord( {
+			...event.nativeEvent,
+			currentContent: unescapeSpaces( event.nativeEvent.text ),
+		} );
+
+		this.splitContent( currentRecord );
 	}
 
 	// eslint-disable-next-line no-unused-vars
@@ -253,6 +261,85 @@ export class RichText extends Component {
 		}
 	}
 
+	/**
+	 * Handles a paste event from the native Aztec Wrapper.
+	 *
+	 * @param {PasteEvent} event The paste event which wraps `nativeEvent`.
+	 */
+	onPaste( event ) {
+		const isPasted = true;
+		const { onSplit } = this.props;
+
+		const { pastedText, pastedHtml } = event.nativeEvent;
+		const currentRecord = this.createRecord( event.nativeEvent );
+
+		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.lastContent = this.valueToFormat( linkedRecord );
+				this.props.onChange( {
+					content: this.lastContent,
+				} );
+
+				// Allows us to ask for this information when we get a report.
+				window.console.log( 'Created link:\n\n', trimmedText );
+
+				return;
+			}
+		}
+
+		const shouldReplace = this.props.onReplace && this.isEmpty();
+
+		let mode = 'INLINE';
+
+		if ( shouldReplace ) {
+			mode = 'BLOCKS';
+		} else if ( onSplit ) {
+			mode = 'AUTO';
+		}
+
+		const pastedContent = pasteHandler( {
+			HTML: pastedHtml,
+			plainText: pastedText,
+			mode,
+			tagName: this.props.tagName,
+			canUserUseUnfilteredHTML: this.props.canUserUseUnfilteredHTML,
+		} );
+
+		if ( typeof pastedContent === 'string' ) {
+			const recordToInsert = create( { html: pastedContent } );
+			const insertedContent = insert( currentRecord, recordToInsert );
+			const newContent = this.valueToFormat( insertedContent );
+			this.lastEventCount = undefined;
+			this.lastContent = newContent;
+			this.props.onChange( {
+				content: this.lastContent,
+			} );
+		} else if ( onSplit ) {
+			if ( ! pastedContent.length ) {
+				return;
+			}
+
+			if ( shouldReplace ) {
+				this.props.onReplace( pastedContent );
+			} else {
+				this.splitContent( currentRecord, pastedContent, isPasted );
+			}
+		}
+	}
+
 	onSelectionChange( start, end, text, event ) {
 		// `end` can be less than `start` on iOS
 		// Let's fix that here so `rich-text/slice` can work properly
@@ -283,6 +370,36 @@ export class RichText extends Component {
 		return isEmpty( this.formatToValue( this.props.value ) );
 	}
 
+	/**
+	 * Creates a RichText value "record" from native content and selection
+	 * information
+	 *
+	 * @param {string} currentContent The content (usually an HTML string) from
+	 *                                the native component.
+	 * @param {number}    selectionStart The start of the selection.
+	 * @param {number}      selectionEnd The end of the selection (same as start if
+	 *                                cursor instead of selection).
+	 *
+   * @return {Object} A RichText value with formats and selection.
+	 */
+	createRecord( { currentContent, selectionStart, selectionEnd } ) {
+		// strip outer <p> tags
+		const innerContent = this.removeRootTagsProduceByAztec( currentContent );
+
+		// create record (with selection) from current contents
+		const currentRecord = {
+			start: selectionStart,
+			end: selectionEnd,
+			...create( {
+				html: innerContent,
+				range: null,
+				multilineTag: false,
+			} ),
+		};
+
+		return currentRecord;
+	}
+
 	formatToValue( value ) {
 		// Handle deprecated `children` and `node` sources.
 		if ( Array.isArray( value ) ) {
@@ -390,6 +507,7 @@ export class RichText extends Component {
 					onBlur={ this.props.onBlur }
 					onEnter={ this.onEnter }
 					onBackspace={ this.onBackspace }
+					onPaste={ this.onPaste }
 					activeFormats={ this.getActiveFormatNames( record ) }
 					onContentSizeChange={ this.onContentSizeChange }
 					onCaretVerticalPositionChange={ this.props.onCaretVerticalPositionChange }
diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json
index 128647ed2d35a..f110b0c3542ef 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -18,6 +18,7 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.3.1",
 		"lodash": "^4.17.11",