diff --git a/blocks/rich-text/format.js b/blocks/rich-text/format.js index 595bff937aa8d7..221966b81fa7e4 100644 --- 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 index 3e0369dc714e00..7a463ded84deeb 100644 --- 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: ``, 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 = (