Fix line break insertion

packages/editor/src/components/rich-text/index.js

@@ -592,6 +592,8 @@ export class RichText extends Component {
 		// If we click shift+Enter on inline RichTexts, we avoid creating two contenteditables
 		// We also split the content and call the onSplit prop if provided.
 		if ( keyCode === ENTER ) {
+			event.preventDefault();
+
 			if ( this.props.onReplace ) {
 				const text = getTextContent( this.getRecord() );
 				const transformation = findTransform( this.enterPatterns, ( item ) => {
@@ -603,7 +605,6 @@ export class RichText extends Component {
 					// important that we stop other handlers (e.g. ones
 					// registered by TinyMCE) from also handling this event.
 					event.stopImmediatePropagation();
-					event.preventDefault();
 					this.props.onReplace( [
 						transformation.transform( { content: text } ),
 					] );
@@ -612,27 +613,33 @@ export class RichText extends Component {
 			}
 
 			if ( this.props.multiline ) {
-				if ( ! this.props.onSplit ) {
-					return;
-				}
-
 				const record = this.getRecord();
 
-				if ( ! isEmptyLine( record ) ) {
-					return;
+				if ( this.props.onSplit && isEmptyLine( record ) ) {
+					this.props.onSplit( ...split( record ).map( this.valueToFormat ) );
+				} else {
+					// Character is used to separate lines in multiline values.
+					this.onChange( insert( record, '\u2028' ) );
+				}
+			} else if ( event.shiftKey || ! this.props.onSplit ) {
+				const record = this.getRecord();
+				const text = getTextContent( record );
+				const length = text.length;
+				let toInsert = '\n';
+
+				// If the caret is at the end of the text, and there is no
+				// trailing line break or no text at all, we have to insert two
+				// line breaks in order to create a new line visually and place
+				// the caret there.
+				if ( record.end === length && (
+					text.charAt( length - 1 ) !== '\n' || length === 0
+				) ) {
+					toInsert = '\n\n';
 				}
 
-				event.preventDefault();
-
-				this.props.onSplit( ...split( record ).map( this.valueToFormat ) );
+				this.onChange( insert( this.getRecord(), toInsert ) );
 			} else {
-				event.preventDefault();
-
-				if ( event.shiftKey || ! this.props.onSplit ) {
-					this.editor.execCommand( 'InsertLineBreak', false, event );
-				} else {
-					this.splitContent();
-				}
+				this.splitContent();
 			}
 		}
 	}

packages/rich-text/src/create-element.js

@@ -0,0 +1,13 @@
+/**
+ * Parse the given HTML into a body element.
+ *
+ * @param {HTMLDocument} document The HTML document to use to parse.
+ * @param {string}       html     The HTML to parse.
+ *
+ * @return {HTMLBodyElement} Body element with parsed HTML.
+ */
+export function createElement( { implementation }, html ) {
+	const { body } = implementation.createHTMLDocument( '' );
+	body.innerHTML = html;
+	return body;
+}

packages/rich-text/src/create.js

@@ -4,28 +4,14 @@
 
 import { isEmpty } from './is-empty';
 import { isFormatEqual } from './is-format-equal';
+import { createElement } from './create-element';
 
 /**
  * Browser dependencies
  */
 
 const { TEXT_NODE, ELEMENT_NODE } = window.Node;
 
-/**
- * Parse the given HTML into a body element.
- *
- * @param {string} html The HTML to parse.
- *
- * @return {HTMLBodyElement} Body element with parsed HTML.
- */
-function createElement( html ) {
-	const htmlDocument = document.implementation.createHTMLDocument( '' );
-
-	htmlDocument.body.innerHTML = html;
-
-	return htmlDocument.body;
-}
-
 function createEmptyValue() {
 	return { formats: [], text: '' };
 }
@@ -74,7 +60,7 @@ export function create( {
 	}
 
 	if ( typeof html === 'string' && html.length > 0 ) {
-		element = createElement( html );
+		element = createElement( document, html );
 	}
 
 	if ( typeof element !== 'object' ) {
@@ -147,6 +133,12 @@ function accumulateSelection( accumulator, node, range, value ) {
 		node === endContainer.childNodes[ endOffset - 1 ]
 	) {
 		accumulator.end = currentLength + value.text.length;
+	// Range indicates that the selection is before the current node.
+	} else if (
+		parentNode === endContainer &&
+		node === endContainer.childNodes[ endOffset ]
+	) {
+		accumulator.end = currentLength;
 	}
 }
 

packages/rich-text/src/split.js

@@ -32,13 +32,13 @@ export function split( { formats, text, start, end }, string ) {
 		nextStart += string.length + substring.length;
 
 		if ( start !== undefined && end !== undefined ) {
-			if ( start > startIndex && start < nextStart ) {
+			if ( start >= startIndex && start < nextStart ) {
 				value.start = start - startIndex;
 			} else if ( start < startIndex && end > startIndex ) {
 				value.start = 0;
 			}
 
-			if ( end > startIndex && end < nextStart ) {
+			if ( end >= startIndex && end < nextStart ) {
 				value.end = end - startIndex;
 			} else if ( start < nextStart && end > nextStart ) {
 				value.end = substring.length;