Try splitting headings

WordPress · May 16, 2017 · df11370 · df11370
1 parent 4a89530
commit df11370
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
@@ -6,6 +6,7 @@ import { last, isEqual, capitalize, omitBy, forEach, merge } from 'lodash';
 import { nodeListToReact } from 'dom-react';
 import { Fill } from 'react-slot-fill';
 import 'element-closest';
+import tinymce from 'tinymce';
 
 /**
  * WordPress dependencies
@@ -19,9 +20,6 @@ import './style.scss';
 import FormatToolbar from './format-toolbar';
 import TinyMCE from './tinymce';
 
-const KEYCODE_BACKSPACE = 8;
-const KEYCODE_DELETE = 46;
-
 const alignmentMap = {
 	alignleft: 'left',
 	alignright: 'right',
@@ -197,18 +195,40 @@ export default class Editable extends wp.element.Component {
 	}
 
 	onKeyDown( event ) {
+		const { BACKSPACE, DELETE, ENTER } = tinymce.util.VK;
+
 		if (
 			this.props.onMerge && (
-				( event.keyCode === KEYCODE_BACKSPACE && this.isStartOfEditor() ) ||
-				( event.keyCode === KEYCODE_DELETE && this.isEndOfEditor() )
+				( event.keyCode === BACKSPACE && this.isStartOfEditor() ) ||
+				( event.keyCode === DELETE && this.isEndOfEditor() )
 			)
 		) {
-			const forward = event.keyCode === KEYCODE_DELETE;
+			const forward = event.keyCode === DELETE;
 			this.onChange();
 			this.props.onMerge( forward );
 			event.preventDefault();
 			event.stopImmediatePropagation();
 		}
+
+		if ( this.props.inline && this.props.onSplit && event.keyCode === ENTER ) {
+			const isCollapsed = this.editor.selection.isCollapsed();
+			const node = this.editor.selection.getEnd();
+
+			if ( ! isCollapsed || node.nodeType !== 1 || node.nodeName !== 'BR' ) {
+				return;
+			}
+
+			event.preventDefault();
+			event.stopImmediatePropagation();
+
+			const childNodes = Array.from( this.editor.getBody().childNodes );
+			const splitIndex = childNodes.indexOf( node );
+			const before = nodeListToReact( childNodes.slice( 0, splitIndex ), createElement );
+			const after = nodeListToReact( childNodes.slice( splitIndex + 1 ), createElement );
+
+			this.setContent( before );
+			this.props.onSplit( before, after );
+		}
 	}
 
 	onNewBlock() {

diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
@@ -79,7 +79,7 @@ registerBlock( 'core/heading', {
 		};
 	},
 
-	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks } ) {
+	edit( { attributes, setAttributes, focus, setFocus, mergeBlocks, insertBlockAfter } ) {
 		const { content, nodeName = 'H2' } = attributes;
 
 		return (
@@ -91,6 +91,12 @@ registerBlock( 'core/heading', {
 				onChange={ ( value ) => setAttributes( { content: value } ) }
 				onMerge={ mergeBlocks }
 				inline
+				onSplit={ ( before, after ) => {
+					setAttributes( { content: before } );
+					insertBlockAfter( createBlock( 'core/text', {
+						content: <p>{ after }</p>,
+					} ) );
+				} }
 			/>
 		);
 	},