Editable: Fix splitting inline Editables using shift+enter

WordPress · Jun 20, 2017 · 583e187 · 583e187
1 parent d80189e
commit 583e187
Showing 1 changed file with 25 additions and 16 deletions.
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
@@ -206,6 +206,11 @@ export default class Editable extends wp.element.Component {
 			event.preventDefault();
 			event.stopImmediatePropagation();
 		}
+
+		if ( event.keyCode === ENTER && this.props.inline && this.props.onSplit && event.shiftKey ) {
+			event.preventDefault();
+			this.splitContent();
+		}
 	}
 
 	onKeyUp( { keyCode } ) {
@@ -229,28 +234,32 @@ 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.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() {