diff --git a/blocks/editable/index.js b/blocks/editable/index.js index 4b327b672ea5a..547bbc58c4086 100644 --- a/blocks/editable/index.js +++ b/blocks/editable/index.js @@ -206,6 +206,16 @@ export default class Editable extends wp.element.Component { event.preventDefault(); event.stopImmediatePropagation(); } + + // If we click shift+Enter on inline Editables, we avoid creating two contenteditables + // We also split the content and call the onSplit prop if provided. + if ( event.keyCode === ENTER && event.shiftKey && this.props.inline ) { + event.preventDefault(); + + if ( this.props.onSplit ) { + this.splitContent(); + } + } } onKeyUp( { keyCode } ) { @@ -229,28 +239,33 @@ export default class Editable extends wp.element.Component { return; } - const { dom } = this.editor; - const rootNode = this.editor.getBody(); - const beforeRange = dom.createRng(); - const afterRange = dom.createRng(); + this.editor.dom.remove( prevNode ); + this.editor.dom.remove( endNode ); + this.splitContent(); + } + } - dom.remove( prevNode ); + splitContent() { + const { dom } = this.editor; + const rootNode = this.editor.getBody(); + const beforeRange = dom.createRng(); + const afterRange = dom.createRng(); + const selectionRange = this.editor.selection.getRng(); - beforeRange.setStart( rootNode, 0 ); - beforeRange.setEnd( endNode.parentNode, dom.nodeIndex( endNode ) ); + beforeRange.setStart( rootNode, 0 ); + beforeRange.setEnd( selectionRange.startContainer, selectionRange.startOffset ); - afterRange.setStart( endNode.parentNode, dom.nodeIndex( endNode ) + 1 ); - afterRange.setEnd( rootNode, dom.nodeIndex( rootNode.lastChild ) + 1 ); + afterRange.setStart( selectionRange.endContainer, selectionRange.endOffset ); + afterRange.setEnd( rootNode, dom.nodeIndex( rootNode.lastChild ) + 1 ); - const beforeFragment = beforeRange.extractContents(); - const afterFragment = afterRange.extractContents(); + const beforeFragment = beforeRange.extractContents(); + const afterFragment = afterRange.extractContents(); - const beforeElement = nodeListToReact( beforeFragment.childNodes, createElement ); - const afterElement = nodeListToReact( afterFragment.childNodes, createElement ); + const beforeElement = nodeListToReact( beforeFragment.childNodes, createElement ); + const afterElement = nodeListToReact( afterFragment.childNodes, createElement ); - this.setContent( beforeElement ); - this.props.onSplit( beforeElement, afterElement ); - } + this.setContent( beforeElement ); + this.props.onSplit( beforeElement, afterElement ); } onNewBlock() {