TinyMCE per block: One enter don't split the block, two enters do (#251)

WordPress · Mar 13, 2017 · 2e55d43 · 2e55d43
1 parent db9abb9
commit 2e55d43
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/tinymce-per-block/src/blocks/heading-block/form.js b/tinymce-per-block/src/blocks/heading-block/form.js
@@ -68,6 +68,7 @@ export default class HeadingBlockForm extends Component {
  ref={ this.bindForm }
  { ...this.props }
  setToolbarState={ this.setToolbarState }
+ single
  />
  </div>
  </div>

diff --git a/tinymce-per-block/src/blocks/inline-text-block/form.js b/tinymce-per-block/src/blocks/inline-text-block/form.js
@@ -14,7 +14,7 @@ export default class InlineTextBlockForm extends Component {
  };
 
  render() {
- const { api, block, setToolbarState, focusConfig } = this.props;
+ const { api, block, setToolbarState, focusConfig, single = false } = this.props;
 
  const splitValue = ( left, right ) => {
  api.change( { content: left } );
@@ -42,8 +42,8 @@ export default class InlineTextBlockForm extends Component {
  focusConfig={ focusConfig }
  onFocusChange={ api.focus }
  onType={ api.unselect }
+ single={ single }
  inline
- single
  />
  );
  }

diff --git a/tinymce-per-block/src/external/wp-blocks/editable/index.js b/tinymce-per-block/src/external/wp-blocks/editable/index.js
@@ -3,7 +3,7 @@
  */
 import { createElement, Component } from 'wp-elements';
 import tinymce from 'tinymce';
-import { isEqual } from 'lodash';
+import { isEqual, last } from 'lodash';
 
 function initialize( node, inline, onSetup ) {
  if ( ! node ) {
@@ -102,7 +102,7 @@ export default class EditableComponent extends Component {
  if ( range.startOffset !== 0 || ! range.collapsed ) {
  return false;
  }
- const start = this.editor.selection.getStart();
+ const start = range.startContainer;
  const body = this.editor.getBody();
  let element = start;
  do {
@@ -131,7 +131,7 @@ export default class EditableComponent extends Component {
  event.preventDefault();
  this.props.moveCursorDown();
  }
- } else if ( event.keyCode === 13 && this.props.single ) {
+ } else if ( event.keyCode === 13 ) {
  // Wait for the event to propagate
  setTimeout( () => {
  this.editor.selection.getStart();
@@ -142,14 +142,31 @@ export default class EditableComponent extends Component {
  const childNodes = Array.from( this.editor.getBody().childNodes );
  const splitIndex = childNodes.indexOf( this.editor.selection.getStart() );
  const getHtml = ( nodes ) => nodes.reduce( ( memo, node ) => memo + node.outerHTML, '' );
- const before = getHtml( childNodes.slice( 0, splitIndex ) );
+ const beforeNodes = childNodes.slice( 0, splitIndex );
+ const lastNodeBeforeCursor = last( beforeNodes );
+ let before = getHtml( beforeNodes );
  const after = getHtml( childNodes.slice( splitIndex ) );
  const hasAfter = !! childNodes.slice( splitIndex )
  .reduce( ( memo, node ) => memo + node.textContent, '' );
- this.editor.setContent( this.props.content );
- if ( before ) {
- this.props.splitValue( before, hasAfter ? after : '' );
+
+ // Single enter adds a new inline
+ // Double enter adds a new block
+ if (
+ ! this.props.single &&
+ !! lastNodeBeforeCursor &&
+ lastNodeBeforeCursor.innerHTML !== '<br>'
+ ) {
+ return;
+ } else if (
+ ! this.props.single &&
+ !! lastNodeBeforeCursor &&
+ lastNodeBeforeCursor.innerHTML === '<br>'
+ ) {
+ before = getHtml( beforeNodes.slice( 0, beforeNodes.length - 1 ) );
  }
+
+ this.editor.setContent( this.props.content );
+ this.props.splitValue( before, hasAfter ? after : '' );
  } );
  } else if ( event.keyCode === 8 ) {
  if ( this.isStartOfEditor() ) {

diff --git a/tinymce-per-block/src/renderers/block/updater.js b/tinymce-per-block/src/renderers/block/updater.js
@@ -61,8 +61,11 @@ const blockLevelUpdater = ( state, command ) => {
 
  mergeWithPrevious: () => {
  const previousBlock = state.blocks[ currentIndex - 1 ];
+ if ( ! previousBlock ) {
+ return state;
+ }
  const previousBlockDefinition = getBlock( previousBlock.blockType );
- if ( ! previousBlock || ! previousBlockDefinition.merge ) {
+ if ( ! previousBlockDefinition.merge ) {
  return state;
  }
  const mergeDefinition = isArray( previousBlockDefinition.merge )