From 4f166f475bf0b9d8a2d59af3bd8717e398f8173d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Est=C3=AAv=C3=A3o?= Date: Mon, 4 Mar 2019 15:44:09 +0000 Subject: [PATCH] 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. --- .../block-library/src/heading/edit.native.js | 23 ++----------------- .../src/paragraph/edit.native.js | 15 +----------- .../src/components/post-title/index.native.js | 10 +------- .../src/components/rich-text/index.native.js | 14 +++++++---- 4 files changed, 14 insertions(+), 48 deletions(-) diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js index dab8589b9c923..ba07909d3a6df 100644 --- 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 ( @@ -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…' ) } /> diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js index 4b303d489557d..a9a3e306ab578 100644 --- 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 ( { 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…' ) } /> diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js index 4874628b42284..23378470adc0e 100644 --- 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 ( { 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 index 1e3de4f168086..a13f66e85e4bf 100644 --- 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 ( @@ -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 }