Add native component HTMLTextInput

packages/components/src/index.native.js

@@ -21,7 +21,8 @@ export { default as withSpokenMessages } from './higher-order/with-spoken-messag
 
 // Mobile Components
 export { default as BottomSheet } from './mobile/bottom-sheet';
-export { default as Picker } from './mobile/picker';
+export { default as HTMLTextInput } from './mobile/html-text-input';
 export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view';
 export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list';
+export { default as Picker } from './mobile/picker';
 export { default as ReadableContentView } from './mobile/readable-content-view';

packages/components/src/mobile/html-text-input/container.android.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { ScrollView } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import KeyboardAvoidingView from '../keyboard-avoiding-view';
+import styles from './style.android.scss';
+
+const HTMLInputContainer = ( { children, parentHeight } ) => (
+	<KeyboardAvoidingView style={ styles.keyboardAvoidingView } parentHeight={ parentHeight }>
+		<ScrollView style={ styles.scrollView } >
+			{ children }
+		</ScrollView>
+	</KeyboardAvoidingView>
+);
+
+HTMLInputContainer.scrollEnabled = false;
+
+export default HTMLInputContainer;

packages/components/src/mobile/html-text-input/container.ios.js

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { UIManager, PanResponder } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import KeyboardAvoidingView from '../keyboard-avoiding-view';
+import styles from './style.ios.scss';
+
+class HTMLInputContainer extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.panResponder = PanResponder.create( {
+			onStartShouldSetPanResponderCapture: () => true,
+
+			onPanResponderMove: ( e, gestureState ) => {
+				if ( gestureState.dy > 100 && gestureState.dy < 110 ) {
+					//Keyboard.dismiss() and this.textInput.blur() are not working here
+					//They require to know the currentlyFocusedID under the hood but
+					//during this gesture there's no currentlyFocusedID
+					UIManager.blur( e.target );
+				}
+			},
+		} );
+	}
+
+	render() {
+		return (
+			<KeyboardAvoidingView
+				style={ styles.keyboardAvoidingView }
+				{ ...this.panResponder.panHandlers }
+				parentHeight={ this.props.parentHeight }
+			>
+				{ this.props.children }
+			</KeyboardAvoidingView>
+		);
+	}
+}
+
+HTMLInputContainer.scrollEnabled = true;
+
+export default HTMLInputContainer;

packages/components/src/mobile/html-text-input/index.native.js

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import { TextInput } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { parse } from '@wordpress/blocks';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { withInstanceId, compose } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import HTMLInputContainer from './container';
+import styles from './style.scss';
+
+export class HTMLTextInput extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.edit = this.edit.bind( this );
+		this.stopEditing = this.stopEditing.bind( this );
+
+		this.state = {
+			isDirty: false,
+			value: '',
+		};
+	}
+
+	static getDerivedStateFromProps( props, state ) {
+		if ( state.isDirty ) {
+			return null;
+		}
+
+		return {
+			value: props.value,
+			isDirty: false,
+		};
+	}
+
+	componentWillUnmount() {
+		//TODO: Blocking main thread
+		this.stopEditing();
+	}
+
+	edit( html ) {
+		this.props.onChange( html );
+		this.setState( { value: html, isDirty: true } );
+	}
+
+	stopEditing() {
+		if ( this.state.isDirty ) {
+			this.props.onPersist( this.state.value );
+			this.setState( { isDirty: false } );
+		}
+	}
+
+	render() {
+		return (
+			<HTMLInputContainer parentHeight={ this.props.parentHeight }>
+				<TextInput
+					autoCorrect={ false }
+					accessibilityLabel="html-view-title"
+					textAlignVertical="center"
+					numberOfLines={ 1 }
+					style={ styles.htmlViewTitle }
+					value={ this.props.title }
+					placeholder={ __( 'Add title' ) }
+					onChangeText={ this.props.setTitleAction }
+				/>
+				<TextInput
+					autoCorrect={ false }
+					accessibilityLabel="html-view-content"
+					textAlignVertical="top"
+					multiline
+					style={ styles.htmlView }
+					value={ this.state.value }
+					onChangeText={ this.edit }
+					onBlur={ this.stopEditing }
+					placeholder={ __( 'Start writing…' ) }
+					scrollEnabled={ HTMLInputContainer.scrollEnabled }
+				/>
+			</HTMLInputContainer>
+		);
+	}
+}
+
+export default compose( [
+	withSelect( ( select ) => {
+		const {
+			getEditedPostContent,
+		} = select( 'core/editor' );
+
+		return {
+			value: getEditedPostContent(),
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { resetBlocks } = dispatch( 'core/block-editor' );
+		const { editPost } = dispatch( 'core/editor' );
+		return {
+			onChange( content ) {
+				editPost( { content } );
+			},
+			onPersist( content ) {
+				resetBlocks( parse( content ) );
+			},
+		};
+	} ),
+	withInstanceId,
+] )( HTMLTextInput );

packages/components/src/mobile/html-text-input/style-common.native.scss

@@ -0,0 +1,15 @@
+$padding: 8;
+$backgroundColor: $white;
+$htmlFont: $default-monospace-font;
+
+.keyboardAvoidingView {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+}
+
+.container {
+	flex: 1;
+}

packages/components/src/mobile/html-text-input/style.android.scss

@@ -0,0 +1,23 @@
+@import "./style-common.scss";
+
+.htmlView {
+	font-family: $htmlFont;
+	background-color: $backgroundColor;
+	padding-left: $padding;
+	padding-right: $padding;
+	padding-top: $padding;
+	padding-bottom: $padding + 16;
+}
+
+.htmlViewTitle {
+	font-family: $htmlFont;
+	background-color: $backgroundColor;
+	padding-left: $padding;
+	padding-right: $padding;
+	padding-top: $padding;
+	padding-bottom: $padding;
+}
+
+.scrollView {
+	flex: 1;
+}

packages/components/src/mobile/html-text-input/style.ios.scss

@@ -0,0 +1,21 @@
+@import "./style-common.scss";
+
+$title-height: 32;
+
+.htmlView {
+	font-family: $htmlFont;
+	background-color: $backgroundColor;
+	padding-left: $padding;
+	padding-right: $padding;
+	padding-bottom: $title-height + $padding;
+}
+
+.htmlViewTitle {
+	font-family: $htmlFont;
+	background-color: $backgroundColor;
+	padding-left: $padding;
+	padding-right: $padding;
+	padding-top: $padding;
+	padding-bottom: $padding;
+	height: $title-height;
+}