Fix initial selection RichText field

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

@@ -118,6 +118,14 @@ export class RichText extends Component {
 		this.deprecatedMultilineArrayFormat = Array.isArray( value );
 	}
 
+	componentDidMount() {
+		document.addEventListener( 'selectionchange', this.onSelectionChange );
+	}
+
+	componentWillUnmount() {
+		document.removeEventListener( 'selectionchange', this.onSelectionChange );
+	}
+
 	/**
 	 * Retrieves the settings for this block.
 	 *
@@ -160,10 +168,8 @@ export class RichText extends Component {
 		editor.on( 'keyup', this.onKeyUp );
 		editor.on( 'BeforeExecCommand', this.onPropagateUndo );
 		editor.on( 'focus', this.onFocus );
-		editor.on( 'input', this.onInput );
 		// The change event in TinyMCE fires every time an undo level is added.
 		editor.on( 'change', this.onCreateUndoLevel );
-		editor.on( 'selectionchange', this.onSelectionChange );
 
 		const { unstableOnSetup } = this.props;
 		if ( unstableOnSetup ) {
@@ -916,6 +922,7 @@ export class RichText extends Component {
 								className={ className }
 								key={ key }
 								onPaste={ this.onPaste }
+								onInput={ this.onInput }
 								multilineTag={ MultilineTag }
 							/>
 							{ isPlaceholderVisible &&

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

@@ -190,8 +190,17 @@ export default class TinyMCE extends Component {
 	}
 
 	render() {
-		const { tagName = 'div', style, defaultValue, className, isPlaceholderVisible, onPaste, multilineTag } = this.props;
 		const ariaProps = pickAriaProps( this.props );
+		const {
+			tagName = 'div',
+			style,
+			defaultValue,
+			className,
+			isPlaceholderVisible,
+			onPaste,
+			onInput,
+			multilineTag,
+		} = this.props;
 
 		/*
 		 * The role=textbox and aria-multiline=true must always be used together
@@ -238,6 +247,7 @@ export default class TinyMCE extends Component {
 			suppressContentEditableWarning: true,
 			dangerouslySetInnerHTML: { __html: initialHTML },
 			onPaste,
+			onInput,
 		} );
 	}
 }

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

@@ -160,6 +160,7 @@ function createRecord( element, range, settings = {} ) {
 	const accumulator = getEmptyRecord();
 
 	if ( ! element || ! element.hasChildNodes() ) {
+		accumulateSelection( accumulator, element, range, getEmptyRecord() );
 		return accumulator;
 	}
 

packages/rich-text-structure/src/test/create.js

@@ -36,10 +36,12 @@ describe( 'create', () => {
 			createRange: ( element ) => ( {
 				startOffset: 0,
 				startContainer: element,
-				endOffset: 1,
+				endOffset: 0,
 				endContainer: element,
 			} ),
 			record: {
+				start: 0,
+				end: 0,
 				formats: [],
 				text: '',
 			},