Blocks: Avoid setAttributes on end-of-paragraph split

core-blocks/paragraph/index.js

@@ -78,10 +78,12 @@ const FONT_SIZES = [
 class ParagraphBlock extends Component {
  constructor() {
  super( ...arguments );
+
  this.onReplace = this.onReplace.bind( this );
  this.toggleDropCap = this.toggleDropCap.bind( this );
  this.getFontSize = this.getFontSize.bind( this );
  this.setFontSize = this.setFontSize.bind( this );
+ this.splitBlock = this.splitBlock.bind( this );
  }
 
  onReplace( blocks ) {
@@ -137,11 +139,53 @@ class ParagraphBlock extends Component {
  } );
  }
 
+ /**
+ * Split handler for RichText value, namely when content is pasted or the
+ * user presses the Enter key.
+ *
+ * @param {?Array} before Optional before value, to be used as content
+ * in place of what exists currently for the
+ * block. If undefined, the block is deleted.
+ * @param {?Array} after Optional after value, to be appended in a new
+ * paragraph block to the set of blocks passed
+ * as spread.
+ * @param {...WPBlock} blocks Optional blocks inserted between the before
+ * and after value blocks.
+ */
+ splitBlock( before, after, ...blocks ) {
+ const {
+ attributes,
+ insertBlocksAfter,
+ setAttributes,
+ onReplace,
+ } = this.props;
+
+ if ( after ) {
+ // Append "After" content as a new paragraph block to the end of
+ // any other blocks being inserted after the current paragraph.
+ blocks.push( createBlock( name, { content: after } ) );
+ }
+
+ if ( blocks.length && insertBlocksAfter ) {
+ insertBlocksAfter( blocks );
+ }
+
+ const { content } = attributes;
+ if ( ! before ) {
+ // If before content is omitted, treat as intent to delete block.
+ onReplace( [] );
+ } else if ( content !== before ) {
+ // Only update content if it has in-fact changed. In case that user
+ // has created a new paragraph at end of an existing one, the value
+ // of before will be strictly equal to the current content.
+ setAttributes( { content: before } );
+ }
+ }
+
  render() {
  const {
  attributes,
  setAttributes,
- insertBlocksAfter,
  mergeBlocks,
  onReplace,
  className,
@@ -230,22 +274,7 @@ class ParagraphBlock extends Component {
  content: nextContent,
  } );
  } }
- onSplit={ insertBlocksAfter ?
- ( before, after, ...blocks ) => {
- if ( after ) {
- blocks.push( createBlock( name, { content: after } ) );
- }
-
- insertBlocksAfter( blocks );
-
- if ( before ) {
- setAttributes( { content: before } );
- } else {
- onReplace( [] );
- }
- } :
- undefined
- }
+ onSplit={ this.splitBlock }
  onMerge={ mergeBlocks }
  onReplace={ this.onReplace }
  onRemove={ () => onReplace( [] ) }

editor/components/rich-text/index.js

@@ -573,17 +573,20 @@ export class RichText extends Component {
  * @param {Object} context The context for splitting.
  */
  splitContent( blocks = [], context = {} ) {
- if ( ! this.props.onSplit ) {
+ const { onSplit } = this.props;
+ if ( ! onSplit ) {
  return;
  }
 
- const { dom } = this.editor;
  const rootNode = this.editor.getBody();
- const beforeRange = dom.createRng();
- const afterRange = dom.createRng();
- const selectionRange = this.editor.selection.getRng();
 
+ let before, after;
  if ( rootNode.childNodes.length ) {
+ const { dom } = this.editor;
+ const beforeRange = dom.createRng();
+ const afterRange = dom.createRng();
+ const selectionRange = this.editor.selection.getRng();
+
  beforeRange.setStart( rootNode, 0 );
  beforeRange.setEnd( selectionRange.startContainer, selectionRange.startOffset );
 
@@ -594,20 +597,32 @@ export class RichText extends Component {
  const afterFragment = afterRange.extractContents();
 
  const { format } = this.props;
- let before = domToFormat( filterEmptyNodes( beforeFragment.childNodes ), format, this.editor );
- let after = domToFormat( filterEmptyNodes( afterFragment.childNodes ), format, this.editor );
+ before = domToFormat( filterEmptyNodes( beforeFragment.childNodes ), format, this.editor );
+ after = domToFormat( filterEmptyNodes( afterFragment.childNodes ), format, this.editor );
+ } else {
+ before = [];
+ after = [];
+ }
 
- if ( context.paste ) {
- before = this.isEmpty( before ) ? null : before;
- after = this.isEmpty( after ) ? null : after;
- }
+ // In case split occurs at the trailing or leading edge of the field,
+ // assume that the before/after values respectively reflect the current
+ // value. This also provides an opportunity for the parent component to
+ // determine whether the before/after value has changed using a trivial
+ // strict equality operation.
+ if ( this.isEmpty( after ) ) {
+ before = this.props.value;
+ } else if ( this.isEmpty( before ) ) {
+ after = this.props.value;
+ }
 
-  this.restoreContentAndSplit( before, after, blocks );
- } else if ( context.paste ) {
-  this.restoreContentAndSplit( null, null, blocks );
- } else {
- this.restoreContentAndSplit( [], [], blocks );
+ // If pasting and the split would result in no content other than the
+ // pasted blocks, remove the before and after blocks.
+ if ( context.paste ) {
+  before = this.isEmpty( before ) ? null : before;
+ after = this.isEmpty( after ) ? null : after;
  }
+
+ this.restoreContentAndSplit( before, after, blocks );
  }
 
  onNewBlock() {