[RNMobile] Fix crash editing More blocks (#12620)

* Use onChange instead of onChangeText in PlainText updates. * Convert the More block to Component, and re-use the same logic of the web when the field is empty. * Remove unsed variable, and format code * Move `);` to a new line
WordPress · Dec 6, 2018 · d442d65 · d442d65
1 parent d5a8767
commit d442d65
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 24 deletions.
diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js
@@ -7,35 +7,57 @@ import { View, Text } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { PlainText } from '@wordpress/editor';
 import styles from './editor.scss';
 
-export default function MoreEdit( props ) {
-	const { attributes, setAttributes, onFocus, onBlur } = props;
-	const { customText } = attributes;
-	const defaultText = __( 'Read more' );
-	const value = customText !== undefined ? customText : defaultText;
+export default class MoreEdit extends Component {
+	constructor() {
+		super( ...arguments );
+		this.onChangeInput = this.onChangeInput.bind( this );
 
-	return (
-		<View style={ styles[ 'block-library-more__container' ] }>
-			<View style={ styles[ 'block-library-more__sub-container' ] }>
-				<Text style={ styles[ 'block-library-more__left-marker' ] }>&lt;!--</Text>
-				<PlainText
-					style={ styles[ 'block-library-more__plain-text' ] }
-					value={ value }
-					multiline={ true }
-					underlineColorAndroid="transparent"
-					onChange={ ( newValue ) => setAttributes( { customText: newValue } ) }
-					placeholder={ defaultText }
-					isSelected={ props.isSelected }
-					onFocus={ onFocus }
-					onBlur={ onBlur }
-				/>
-				<Text style={ styles[ 'block-library-more__right-marker' ] }>--&gt;</Text>
+		this.state = {
+			defaultText: __( 'Read more' ),
+		};
+	}
+
+	onChangeInput( newValue ) {
+		// Set defaultText to an empty string, allowing the user to clear/replace the input field's text
+		this.setState( {
+			defaultText: '',
+		} );
+		const value = newValue.length === 0 ? undefined : newValue;
+		this.props.setAttributes( { customText: value } );
+	}
+
+	render() {
+		const { attributes, onFocus, onBlur } = this.props;
+		const { customText } = attributes;
+		const defaultText = __( 'Read more' );
+		const value = customText !== undefined ? customText : defaultText;
+
+		return (
+			<View style={ styles[ 'block-library-more__container' ] }>
+				<View style={ styles[ 'block-library-more__sub-container' ] }>
+					<Text style={ styles[ 'block-library-more__left-marker' ] }>&lt;!--</Text>
+					<PlainText
+						style={ styles[ 'block-library-more__plain-text' ] }
+						value={ value }
+						multiline={ true }
+						underlineColorAndroid="transparent"
+						onChange={ this.onChangeInput }
+						placeholder={ defaultText }
+						isSelected={ this.props.isSelected }
+						onFocus={ onFocus }
+						onBlur={ onBlur }
+					/>
+					<Text style={ styles[ 'block-library-more__right-marker' ] }>--&gt;</Text>
+				</View>
 			</View>
-		</View> );
+		);
+	}
 }
diff --git a/packages/editor/src/components/plain-text/index.native.js b/packages/editor/src/components/plain-text/index.native.js
@@ -28,12 +28,14 @@ export default class PlainText extends Component {
 	render() {
 		return (
 			<TextInput
+				{ ...this.props }
 				ref={ ( x ) => this._input = x }
 				className={ [ styles[ 'editor-plain-text' ], this.props.className ] }
-				onChangeText={ ( text ) => this.props.onChange( text ) }
+				onChange={ ( event ) => {
+					this.props.onChange( event.nativeEvent.text );
+				} }
 				onFocus={ this.props.onFocus } // always assign onFocus as a props
 				onBlur={ this.props.onBlur } // always assign onBlur as a props
-				{ ...this.props }
 			/>
 		);
 	}