From 5c6e21acde9789052eef5992d8f7b671ae8c70dc Mon Sep 17 00:00:00 2001
From: Carlos Garcia <fluiddot@gmail.com>
Date: Fri, 25 Mar 2022 17:25:42 +0100
Subject: [PATCH] Unify container component within html text input

---
 .../html-text-input/container.android.js      | 23 ------
 .../mobile/html-text-input/container.ios.js   | 50 -------------
 .../mobile/html-text-input/index.native.js    | 74 +++++++++++--------
 3 files changed, 45 insertions(+), 102 deletions(-)
 delete mode 100644 packages/components/src/mobile/html-text-input/container.android.js
 delete mode 100644 packages/components/src/mobile/html-text-input/container.ios.js

diff --git a/packages/components/src/mobile/html-text-input/container.android.js b/packages/components/src/mobile/html-text-input/container.android.js
deleted file mode 100644
index 68d69783f3b9fb..00000000000000
--- a/packages/components/src/mobile/html-text-input/container.android.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * 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;
diff --git a/packages/components/src/mobile/html-text-input/container.ios.js b/packages/components/src/mobile/html-text-input/container.ios.js
deleted file mode 100644
index b40214e1eaab06..00000000000000
--- a/packages/components/src/mobile/html-text-input/container.ios.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * 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;
diff --git a/packages/components/src/mobile/html-text-input/index.native.js b/packages/components/src/mobile/html-text-input/index.native.js
index 438a1ca88ed4bc..eab8dafcbd490a 100644
--- a/packages/components/src/mobile/html-text-input/index.native.js
+++ b/packages/components/src/mobile/html-text-input/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TextInput } from 'react-native';
+import { ScrollView, TextInput } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ import {
 /**
  * Internal dependencies
  */
-import HTMLInputContainer from './container';
+import KeyboardAvoidingView from '../keyboard-avoiding-view';
 import styles from './style.scss';
 
 export class HTMLTextInput extends Component {
@@ -73,7 +73,13 @@ export class HTMLTextInput extends Component {
 	}
 
 	render() {
-		const { getStylesFromColorScheme, style } = this.props;
+		const {
+			editTitle,
+			getStylesFromColorScheme,
+			parentHeight,
+			style,
+			title,
+		} = this.props;
 		const titleStyle = [
 			styles.htmlViewTitle,
 			style?.text && { color: style.text },
@@ -90,32 +96,42 @@ export class HTMLTextInput extends Component {
 			...( style?.text && { color: style.text } ),
 		};
 		return (
-			<HTMLInputContainer parentHeight={ this.props.parentHeight }>
-				<TextInput
-					autoCorrect={ false }
-					accessibilityLabel="html-view-title"
-					textAlignVertical="center"
-					numberOfLines={ 1 }
-					style={ titleStyle }
-					value={ this.props.title }
-					placeholder={ __( 'Add title' ) }
-					placeholderTextColor={ placeholderStyle.color }
-					onChangeText={ this.props.editTitle }
-				/>
-				<TextInput
-					autoCorrect={ false }
-					accessibilityLabel="html-view-content"
-					textAlignVertical="top"
-					multiline
-					style={ htmlStyle }
-					value={ this.state.value }
-					onChangeText={ this.edit }
-					onBlur={ this.stopEditing }
-					placeholder={ __( 'Start writing…' ) }
-					placeholderTextColor={ placeholderStyle.color }
-					scrollEnabled={ HTMLInputContainer.scrollEnabled }
-				/>
-			</HTMLInputContainer>
+			<KeyboardAvoidingView
+				style={ styles.keyboardAvoidingView }
+				parentHeight={ parentHeight }
+			>
+				<ScrollView style={ styles.scrollView }>
+					<TextInput
+						autoCorrect={ false }
+						accessibilityLabel="html-view-title"
+						textAlignVertical="center"
+						numberOfLines={ 1 }
+						style={ titleStyle }
+						value={ title }
+						placeholder={ __( 'Add title' ) }
+						placeholderTextColor={ placeholderStyle.color }
+						onChangeText={ editTitle }
+					/>
+					<TextInput
+						ref={ this.contentTextInputRef }
+						autoCorrect={ false }
+						accessibilityLabel="html-view-content"
+						textAlignVertical="top"
+						multiline
+						style={ htmlStyle }
+						value={ this.state.value }
+						onChangeText={ this.edit }
+						onBlur={ this.stopEditing }
+						placeholder={ __( 'Start writing…' ) }
+						placeholderTextColor={ placeholderStyle.color }
+						scrollEnabled={ false }
+						// [Only iOS] This prop prevents the text input from
+						// automatically getting focused after scrolling
+						// content.
+						rejectResponderTermination={ false }
+					/>
+				</ScrollView>
+			</KeyboardAvoidingView>
 		);
 	}
 }