Refactor onSplit and insertBlockAfter in RichText component, Para…

… and Heading blocks for mobile, tryin gto stay closer to the web version. (WordPress#10690)

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

@@ -24,28 +24,11 @@ import './editor.scss';
 const minHeight = 50;
 
 class HeadingEdit extends Component {
-	constructor() {
-		super( ...arguments );
-		this.splitBlock = this.splitBlock.bind( this );
-	}
-
-	// eslint-disable-next-line no-unused-vars
-	splitBlock( htmlText, start, end ) {
-		const {
-			insertBlocksAfter,
-		} = this.props;
-
-		if ( insertBlocksAfter ) {
-			const blocks = [];
-			blocks.push( createBlock( 'core/paragraph', { content: 'Test' } ) );
-			insertBlocksAfter( blocks );
-		}
-	}
-
 	render() {
 		const {
 			attributes,
 			setAttributes,
+			insertBlocksAfter,
 		} = this.props;
 
 		const {
@@ -73,7 +56,17 @@ class HeadingEdit extends Component {
 							content: newParaBlock.attributes.content,
 						} );
 					} }
-					onSplit={ this.splitBlock }
+					onSplit={
+						insertBlocksAfter ?
+							( before, after, ...blocks ) => {
+								setAttributes( { content: before } );
+								insertBlocksAfter( [
+									...blocks,
+									createBlock( 'core/paragraph', { content: after } ),
+								] );
+							} :
+							undefined
+					}
 					onContentSizeChange={ ( event ) => {
 						setAttributes( { aztecHeight: event.aztecHeight } );
 					} }

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

@@ -13,23 +13,55 @@ import { RichText } from '@wordpress/editor';
 
 const minHeight = 50;
 
+const name = 'core/paragraph';
+
 class ParagraphEdit extends Component {
 	constructor() {
 		super( ...arguments );
 		this.splitBlock = this.splitBlock.bind( this );
 	}
 
-	// eslint-disable-next-line no-unused-vars
-	splitBlock( htmlText, start, end ) {
+	/**
+	 * Split handler for RichText value, namely when content is pasted or the
+	 * user presses the Enter key.
+	 *
+	 * @param {?Array}     before Optional before value, to be used as content
+	 *                            in place of what exists currently for the
+	 *                            block. If undefined, the block is deleted.
+	 * @param {?Array}     after  Optional after value, to be appended in a new
+	 *                            paragraph block to the set of blocks passed
+	 *                            as spread.
+	 * @param {...WPBlock} blocks Optional blocks inserted between the before
+	 *                            and after value blocks.
+	 */
+	splitBlock( before, after, ...blocks ) {
 		const {
+			attributes,
 			insertBlocksAfter,
+			setAttributes,
 		} = this.props;
 
-		if ( insertBlocksAfter ) {
-			const blocks = [];
-			blocks.push( createBlock( 'core/paragraph', { content: 'Test' } ) );
+		if ( after !== null ) {
+			// Append "After" content as a new paragraph block to the end of
+			// any other blocks being inserted after the current paragraph.
+			const newBlock = createBlock( name, { content: after } );
+			blocks.push( newBlock );
+		}
+
+		if ( blocks.length && insertBlocksAfter ) {
 			insertBlocksAfter( blocks );
 		}
+
+		const { content } = attributes;
+		if ( before === null ) {
+			// TODO : If before content is omitted, treat as intent to delete block.
+			// onReplace( [] );
+		} else if ( content !== before ) {
+			// Only update content if it has in-fact changed. In case that user
+			// has created a new paragraph at end of an existing one, the value
+			// of before will be strictly equal to the current content.
+			setAttributes( { content: before } );
+		}
 	}
 
 	render() {

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

@@ -14,6 +14,11 @@ import {
 import { Component, RawHTML } from '@wordpress/element';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { Toolbar } from '@wordpress/components';
+import {
+	create,
+	split,
+	toHTMLString,
+} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -56,12 +61,53 @@ export class RichText extends Component {
 		this.splitContent( htmlText, start, end );
 	}
 
+	/*
+	 * Splits the content at the location of the selection.
+	 *
+	 * Replaces the content of the editor inside this element with the contents
+	 * before the selection. Sends the elements after the selection to the `onSplit`
+	 * handler.
+	 *
+	 */
 	splitContent( htmlText, start, end ) {
 		const { onSplit } = this.props;
+
 		if ( ! onSplit ) {
 			return;
 		}
-		onSplit( htmlText, start, end );
+
+		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: start - 6, end: end - 6, ...record } );
+
+		// TODO : Handle here the cases when the split happens at the trailing or leading edge...
+		// See the web version for reference.
+
+		if ( before ) {
+			before = this.valueToFormat( before );
+		}
+
+		if ( after ) {
+			after = this.valueToFormat( after );
+		}
+
+		onSplit( before, after );
+	}
+
+	valueToFormat( { formats, text } ) {
+		const value = toHTMLString( { formats, text }, this.multilineTag );
+		// remove the outer p tags
+		const returningContentWithoutParaTag = value.replace( /<p>|<\/p>/gi, '' );
+		return returningContentWithoutParaTag;
 	}
 
 	onActiveFormatsChange( formats ) {