Rich Text: Determine emptiness by value (#5091)

* Rich Text: Determine emptiness by value * Rich Text: Filter both sets of child nodes in split * Rich Text: Consolidate isEmpty conditions
WordPress · May 2, 2018 · 5b2e500 · 5b2e500
1 parent 63cf515
commit 5b2e500
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 29 deletions.
diff --git a/blocks/rich-text/format.js b/blocks/rich-text/format.js
@@ -108,20 +108,3 @@ export function domToFormat( value, format, editor ) {
 			return domToElement( value );
 	}
 }
-
-/**
- * Checks whether the value is empty or not
- *
- * @param {Array|string}  value  Value.
- * @param {string}        format Format (string or element)
- *
- * @return {boolean} Is value empty.
- */
-export function isEmpty( value, format ) {
-	switch ( format ) {
-		case 'string':
-			return value === '';
-		default:
-			return ! value.length;
-	}
-}
diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js
@@ -43,7 +43,7 @@ import { pickAriaProps } from './aria';
 import patterns from './patterns';
 import { EVENTS } from './constants';
 import { withBlockEditContext } from '../block-edit/context';
-import { domToFormat, valueToString, isEmpty } from './format';
+import { domToFormat, valueToString } from './format';
 
 const { BACKSPACE, DELETE, ENTER } = keycodes;
 
@@ -105,7 +105,7 @@ export function getFormatProperties( formatName, parents ) {
 const DEFAULT_FORMATS = [ 'bold', 'italic', 'strikethrough', 'link' ];
 
 export class RichText extends Component {
-	constructor( { value } ) {
+	constructor() {
 		super( ...arguments );
 
 		this.onInit = this.onInit.bind( this );
@@ -127,7 +127,6 @@ export class RichText extends Component {
 			selectedNodeId: 0,
 		};
 
-		this.isEmpty = ! value || ! value.length;
 		this.containerRef = createRef();
 	}
 
@@ -284,8 +283,7 @@ export class RichText extends Component {
 		// Note: a pasted file may have the URL as plain text.
 		if ( item && ! HTML ) {
 			const blob = item.getAsFile ? item.getAsFile() : item;
-			const rootNode = this.editor.getBody();
-			const isEmptyEditor = this.editor.dom.isEmpty( rootNode );
+			const isEmptyEditor = this.isEmpty();
 			const content = rawHandler( {
 				HTML: `<img src="${ createBlobURL( blob ) }">`,
 				mode: 'BLOCKS',
@@ -348,8 +346,7 @@ export class RichText extends Component {
 			}
 		}
 
-		const rootNode = this.editor.getBody();
-		const isEmptyEditor = this.editor.dom.isEmpty( rootNode );
+		const isEmptyEditor = this.isEmpty();
 
 		let mode = 'INLINE';
 
@@ -378,7 +375,7 @@ export class RichText extends Component {
 				return;
 			}
 
-			if ( isEmpty && this.props.onReplace ) {
+			if ( isEmptyEditor && this.props.onReplace ) {
 				this.props.onReplace( content );
 			} else {
 				this.splitContent( content );
@@ -392,7 +389,6 @@ export class RichText extends Component {
 
 	onChange() {
 		this.savedContent = this.getContent();
-		this.isEmpty = isEmpty( this.savedContent, this.props.format );
 		this.props.onChange( this.savedContent );
 	}
 
@@ -449,7 +445,7 @@ export class RichText extends Component {
 				this.props.onMerge( forward );
 			}
 
-			if ( this.props.onRemove && dom.isEmpty( rootNode ) ) {
+			if ( this.props.onRemove && this.isEmpty() ) {
 				this.props.onRemove( forward );
 			}
 
@@ -583,7 +579,7 @@ export class RichText extends Component {
 			const afterFragment = afterRange.extractContents();
 
 			const { format } = this.props;
-			const before = domToFormat( beforeFragment.childNodes, format, this.editor );
+			const before = domToFormat( filterEmptyNodes( beforeFragment.childNodes ), format, this.editor );
 			const after = domToFormat( filterEmptyNodes( afterFragment.childNodes ), format, this.editor );
 
 			this.restoreContentAndSplit( before, after, blocks );
@@ -734,6 +730,16 @@ export class RichText extends Component {
 		}
 	}
 
+	/**
+	 * Returns true if the field is currently empty, or false otherwise.
+	 *
+	 * @return {boolean} Whether field is empty.
+	 */
+	isEmpty() {
+		const { value } = this.props;
+		return ! value || ! value.length;
+	}
+
 	isFormatActive( format ) {
 		return this.state.formats[ format ] && this.state.formats[ format ].isActive;
 	}
@@ -813,7 +819,7 @@ export class RichText extends Component {
 		// changes, we unmount and destroy the previous TinyMCE element, then
 		// mount and initialize a new child element in its place.
 		const key = [ 'editor', Tagname ].join();
-		const isPlaceholderVisible = placeholder && ( ! isSelected || keepPlaceholderOnFocus ) && this.isEmpty;
+		const isPlaceholderVisible = placeholder && ( ! isSelected || keepPlaceholderOnFocus ) && this.isEmpty();
 		const classes = classnames( wrapperClassName, 'blocks-rich-text' );
 
 		const formatToolbar = (