Port heading block to mobile (#8774)

* Adds tagName prop to RichText

Instead of forcing a paragraph, make the wrapper tag logic more generic
and allow for customization

* Adds React Native implementation of heading block

* Fix lint issues

* Remove RichText tagName default value

* Remove unused (for now) class name props

core-blocks/heading/edit.native.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { RichText } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const minHeight = 50;
+
+class HeadingEdit extends Component {
+	render() {
+		const {
+			attributes,
+			setAttributes,
+		} = this.props;
+
+		const {
+			level,
+			placeholder,
+		} = attributes;
+
+		const tagName = 'h' + level;
+
+		return (
+			<View>
+				<RichText
+					tagName={ tagName }
+					content={ { contentTree: attributes.content, eventCount: attributes.eventCount } }
+					style={ {
+						minHeight: Math.max( minHeight, typeof attributes.aztecHeight === 'undefined' ? 0 : attributes.aztecHeight ),
+					} }
+					onChange={ ( value ) => {
+						setAttributes( value );
+					} }
+					onContentSizeChange={ ( event ) => {
+						setAttributes( { aztecHeight: event.aztecHeight } );
+					} }
+					placeholder={ placeholder || __( 'Write heading…' ) }
+				/>
+			</View>
+		);
+	}
+}
+export default HeadingEdit;

core-blocks/index.native.js

@@ -9,12 +9,14 @@ import {
  * Internal dependencies
  */
 import * as code from './code';
+import * as heading from './heading';
 import * as more from './more';
 import * as paragraph from './paragraph';
 
 export const registerCoreBlocks = () => {
 	[
 		paragraph,
+		heading,
 		code,
 		more,
 	].forEach( ( { name, settings } ) => {

core-blocks/paragraph/edit.native.js

@@ -28,6 +28,7 @@ class ParagraphEdit extends Component {
 		return (
 			<View>
 				<RichText
+					tagName="p"
 					content={ { contentTree: attributes.content, eventCount: attributes.eventCount } }
 					style={ {
 						...style,

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

@@ -30,8 +30,10 @@ export class RichText extends Component {
 		this.lastEventCount = event.nativeEvent.eventCount;
 		// The following method just cleans up any <p> tags produced by aztec and replaces them with a br tag
 		// This should be removed on a later version when aztec doesn't return the top tag of the text being edited
-		const contentWithoutP = event.nativeEvent.text.replace( /<p>/gi, '' ).replace( /<\/p>/gi, '<br>' );
-		this.lastContent = contentWithoutP;
+		const openingTagRegexp = RegExp( '^<' + this.props.tagName + '>', 'gi' );
+		const closingTagRegexp = RegExp( '</' + this.props.tagName + '>$', 'gi' );
+		const contentWithoutRootTag = event.nativeEvent.text.replace( openingTagRegexp, '' ).replace( closingTagRegexp, '' );
+		this.lastContent = contentWithoutRootTag;
 
 		this.currentTimer = setTimeout( function() {
 			this.props.onChange( {
@@ -68,13 +70,15 @@ export class RichText extends Component {
 	}
 
 	render() {
-		// Save back to HTML from React tree
-		const html = renderToString( this.props.content.contentTree );
 		const {
+			tagName,
 			style,
 			eventCount,
 		} = this.props;
 
+		// Save back to HTML from React tree
+		const html = '<' + tagName + '>' + renderToString( this.props.content.contentTree ) + '</' + tagName + '>';
+
 		return (
 			<RCTAztecView
 				text={ { text: html, eventCount: eventCount } }