Rnmobile/refactor rich text sizing code (#14164)

* Make richText height changes contained to the rich text block. * Remove commented out code. * Remove aztec height from state. * Allow minHeight to be optional. * Remove minHeight from postTitle. * Remove minHeight on heading block.
WordPress · Mar 4, 2019 · 4f166f4 · 4f166f4
1 parent 926ed3f
commit 4f166f4
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 48 deletions.
diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
@@ -16,26 +16,14 @@ import { Component } from '@wordpress/element';
 import { RichText, BlockControls } from '@wordpress/editor';
 import { createBlock } from '@wordpress/blocks';
 
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-
 class HeadingEdit extends Component {
-	constructor( props ) {
-		super( props );
-
-		this.state = {
-			aztecHeight: 0,
-		};
-	}
-
 	render() {
 		const {
 			attributes,
 			setAttributes,
 			mergeBlocks,
 			insertBlocksAfter,
+			style,
 		} = this.props;
 
 		const {
@@ -46,8 +34,6 @@ class HeadingEdit extends Component {
 
 		const tagName = 'h' + level;
 
-		const minHeight = styles.blockText.minHeight;
-
 		return (
 			<View>
 				<BlockControls>
@@ -57,12 +43,10 @@ class HeadingEdit extends Component {
 					tagName={ tagName }
 					value={ content }
 					isSelected={ this.props.isSelected }
+					style={ style }
 					onFocus={ this.props.onFocus } // always assign onFocus as a props
 					onBlur={ this.props.onBlur } // always assign onBlur as a props
 					onCaretVerticalPositionChange={ this.props.onCaretVerticalPositionChange }
-					style={ {
-						minHeight: Math.max( minHeight, this.state.aztecHeight ),
-					} }
 					onChange={ ( value ) => setAttributes( { content: value } ) }
 					onMerge={ mergeBlocks }
 					onSplit={
@@ -76,9 +60,6 @@ class HeadingEdit extends Component {
 							} :
 							undefined
 					}
-					onContentSizeChange={ ( event ) => {
-						this.setState( { aztecHeight: event.aztecHeight } );
-					} }
 					placeholder={ placeholder || __( 'Write heading…' ) }
 				/>
 			</View>

diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
@@ -14,7 +14,6 @@ import { RichText } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import styles from './style.scss';
 
 const name = 'core/paragraph';
 
@@ -23,10 +22,6 @@ class ParagraphEdit extends Component {
 		super( props );
 		this.splitBlock = this.splitBlock.bind( this );
 		this.onReplace = this.onReplace.bind( this );
-
-		this.state = {
-			aztecHeight: 0,
-		};
 	}
 
 	/**
@@ -99,8 +94,6 @@ class ParagraphEdit extends Component {
 			content,
 		} = attributes;
 
-		const minHeight = styles.blockText.minHeight;
-
 		return (
 			<View>
 				<RichText
@@ -110,10 +103,7 @@ class ParagraphEdit extends Component {
 					onFocus={ this.props.onFocus } // always assign onFocus as a props
 					onBlur={ this.props.onBlur } // always assign onBlur as a props
 					onCaretVerticalPositionChange={ this.props.onCaretVerticalPositionChange }
-					style={ {
-						...style,
-						minHeight: Math.max( minHeight, this.state.aztecHeight ),
-					} }
+					style={ style }
 					onChange={ ( nextContent ) => {
 						setAttributes( {
 							content: nextContent,
@@ -122,9 +112,6 @@ class ParagraphEdit extends Component {
 					onSplit={ this.splitBlock }
 					onMerge={ mergeBlocks }
 					onReplace={ this.onReplace }
-					onContentSizeChange={ ( event ) => {
-						this.setState( { aztecHeight: event.aztecHeight } );
-					} }
 					placeholder={ placeholder || __( 'Start writing…' ) }
 				/>
 			</View>

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
@@ -28,7 +28,6 @@ class PostTitle extends Component {
 
 		this.state = {
 			isSelected: false,
-			aztecHeight: 0,
 		};
 	}
 
@@ -70,8 +69,6 @@ class PostTitle extends Component {
 		const decodedPlaceholder = decodeEntities( placeholder );
 		const borderColor = this.state.isSelected ? focusedBorderColor : 'transparent';
 
-		const minHeight = styles.blockText.minHeight;
-
 		return (
 			<View style={ [ styles.titleContainer, borderStyle, { borderColor } ] }>
 				<RichText
@@ -80,17 +77,12 @@ class PostTitle extends Component {
 					onFocus={ this.onSelect }
 					onBlur={ this.props.onBlur } // always assign onBlur as a props
 					multiline={ false }
-					style={ [ style, {
-						minHeight: Math.max( minHeight, this.state.aztecHeight ),
-					} ] }
+					style={ style }
 					fontSize={ 24 }
 					fontWeight={ 'bold' }
 					onChange={ ( value ) => {
 						this.props.onUpdate( value );
 					} }
-					onContentSizeChange={ ( event ) => {
-						this.setState( { aztecHeight: event.aztecHeight } );
-					} }
 					placeholder={ decodedPlaceholder }
 					value={ title }
 					onSplit={ this.props.onEnterPress }

diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js
@@ -86,6 +86,7 @@ export class RichText extends Component {
 			start: 0,
 			end: 0,
 			formatPlaceholder: null,
+			height: 0,
 		};
 	}
 
@@ -236,9 +237,7 @@ export class RichText extends Component {
 
 	onContentSizeChange( contentSize ) {
 		const contentHeight = contentSize.height;
-		this.props.onContentSizeChange( {
-			aztecHeight: contentHeight,
-		} );
+		this.setState( { height: contentHeight } );
 	}
 
 	// eslint-disable-next-line no-unused-vars
@@ -501,6 +500,10 @@ export class RichText extends Component {
 			html = '';
 			this.lastEventCount = undefined; // force a refresh on the native side
 		}
+		let minHeight = 0;
+		if ( style && style.minHeight ) {
+			minHeight = style.minHeight;
+		}
 
 		return (
 			<View>
@@ -517,6 +520,10 @@ export class RichText extends Component {
 							this.props.setRef( ref );
 						}
 					} }
+					style={ {
+						...style,
+						minHeight: Math.max( minHeight, this.state.height ),
+					} }
 					text={ { text: html, eventCount: this.lastEventCount } }
 					placeholder={ this.props.placeholder }
 					placeholderTextColor={ this.props.placeholderTextColor || styles[ 'editor-rich-text' ].textDecorationColor }
@@ -534,7 +541,6 @@ export class RichText extends Component {
 					blockType={ { tag: tagName } }
 					color={ 'black' }
 					maxImagesWidth={ 200 }
-					style={ style }
 					fontFamily={ this.props.fontFamily || styles[ 'editor-rich-text' ].fontFamily }
 					fontSize={ this.props.fontSize }
 					fontWeight={ this.props.fontWeight }