Reduce this.editor dependency

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

@@ -39,6 +39,7 @@ import {
 	createValue,
 	getTextContent,
 	join,
+	insert,
 } from '@wordpress/rich-text-structure';
 import deprecated from '@wordpress/deprecated';
 
@@ -103,6 +104,8 @@ export class RichText extends Component {
 		this.applyRecord = this.applyRecord.bind( this );
 		this.isEmpty = this.isEmpty.bind( this );
 		this.valueToFormat = this.valueToFormat.bind( this );
+		this.setRef = this.setRef.bind( this );
+		this.isActive = this.isActive.bind( this );
 
 		this.formatToValue = memize( this.formatToValue.bind( this ), { size: 1 } );
 
@@ -126,6 +129,14 @@ export class RichText extends Component {
 		document.removeEventListener( 'selectionchange', this.onSelectionChange );
 	}
 
+	setRef( node ) {
+		this.editableRef = node;
+	}
+
+	isActive() {
+		return this.editableRef === document.activeElement;
+	}
+
 	/**
 	 * Retrieves the settings for this block.
 	 *
@@ -226,17 +237,15 @@ export class RichText extends Component {
 
 	createRecord() {
 		const { multiline } = this.props;
-		const rootNode = this.editor.getBody();
-		const range = this.editor.selection.getRng();
+		const range = window.getSelection().getRangeAt( 0 );
 
-		return create( rootNode, range, multiline, richTextStructureSettings );
+		return create( this.editableRef, range, multiline, richTextStructureSettings );
 	}
 
 	applyRecord( record ) {
 		const { multiline } = this.props;
-		const rootNode = this.editor.getBody();
 
-		apply( record, rootNode, multiline );
+		apply( record, this.editableRef, multiline );
 	}
 
 	isEmpty() {
@@ -351,7 +360,7 @@ export class RichText extends Component {
 		} );
 
 		if ( typeof content === 'string' ) {
-			this.editor.insertContent( content );
+			this.onChange( insert( this.getRecord(), content ) );
 		} else if ( this.props.onSplit ) {
 			if ( ! content.length ) {
 				return;
@@ -407,7 +416,7 @@ export class RichText extends Component {
 	 */
 	onSelectionChange() {
 		// Ensure it's the active element. This is a global event.
-		if ( document.activeElement !== this.editor.getBody() ) {
+		if ( ! this.isActive() ) {
 			return;
 		}
 
@@ -491,7 +500,7 @@ export class RichText extends Component {
 		// will include a bogus TinyMCE BR node _after_ the caret, so in a
 		// forward deletion the isHorizontalEdge function will incorrectly
 		// interpret the presence of the bogus node as not being at the edge.
-		const isEdge = ( empty || isHorizontalEdge( this.editor.getBody(), isReverse ) );
+		const isEdge = ( empty || isHorizontalEdge( this.editableRef, isReverse ) );
 
 		if ( ! isEdge ) {
 			return;
@@ -568,7 +577,6 @@ export class RichText extends Component {
 	 */
 	onKeyDown( event ) {
 		const dom = this.editor.dom;
-		const rootNode = this.editor.getBody();
 		const { keyCode } = event;
 
 		const isDelete = keyCode === DELETE || keyCode === BACKSPACE;
@@ -610,7 +618,7 @@ export class RichText extends Component {
 
 				const selectedNode = this.editor.selection.getNode();
 
-				if ( selectedNode.parentNode !== rootNode ) {
+				if ( selectedNode.parentNode !== this.editableRef ) {
 					return;
 				}
 
@@ -620,7 +628,7 @@ export class RichText extends Component {
 
 				event.preventDefault();
 
-				const childNodes = Array.from( rootNode.childNodes );
+				const childNodes = Array.from( this.editableRef.childNodes );
 				const index = dom.nodeIndex( selectedNode );
 				const beforeNodes = childNodes.slice( 0, index );
 				const afterNodes = childNodes.slice( index + 1 );
@@ -674,7 +682,7 @@ export class RichText extends Component {
 
 	scrollToRect( rect ) {
 		const { top: caretTop } = rect;
-		const container = getScrollContainer( this.editor.getBody() );
+		const container = getScrollContainer( this.editableRef );
 
 		if ( ! container ) {
 			return;
@@ -748,7 +756,7 @@ export class RichText extends Component {
 	}
 
 	onNodeChange( { parents } ) {
-		if ( document.activeElement !== this.editor.getBody() ) {
+		if ( ! this.isActive() ) {
 			return;
 		}
 
@@ -774,7 +782,6 @@ export class RichText extends Component {
 		const { tagName, value } = this.props;
 
 		if (
-			this.editor &&
 			tagName === prevProps.tagName &&
 			value !== prevProps.value &&
 			value !== this.savedContent
@@ -791,7 +798,7 @@ export class RichText extends Component {
 			const record = this.formatToValue( value );
 			const { start, end } = this.state;
 
-			if ( this.editor.hasFocus() ) {
+			if ( this.isActive() ) {
 				record.start = start;
 				record.end = end;
 			}
@@ -924,6 +931,7 @@ export class RichText extends Component {
 								onPaste={ this.onPaste }
 								onInput={ this.onInput }
 								multilineTag={ MultilineTag }
+								setRef={ this.setRef }
 							/>
 							{ isPlaceholderVisible &&
 								<Tagname

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

@@ -175,6 +175,10 @@ export default class TinyMCE extends Component {
 	bindEditorNode( editorNode ) {
 		this.editorNode = editorNode;
 
+		if ( this.props.setRef ) {
+			this.props.setRef( editorNode );
+		}
+
 		/**
 		 * A ref function can be used for cleanup because React calls it with
 		 * `null` when unmounting.

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

@@ -41,7 +41,15 @@ function getEmptyRecord() {
  */
 export function create( element, range, multilineTag, settings ) {
 	if ( typeof element === 'string' ) {
-		element = createElement( element );
+		if ( element.indexOf( '<' ) !== -1 || /[^\s]+;/.test( element ) ) {
+			// May be HTML.
+			element = createElement( element );
+		} else {
+			return {
+				formats: Array( element.length ),
+				text: element,
+			};
+		}
 	}
 
 	if ( ! multilineTag ) {

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

@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+
+import { create } from './create';
+
 /**
  * Inserts the second given record into the first.
  * The value in between the start and end indices will be removed.
@@ -17,6 +23,10 @@ export function insert(
 	startIndex = start,
 	endIndex = end
 ) {
+	if ( typeof recordToInsert === 'string' ) {
+		recordToInsert = create( recordToInsert );
+	}
+
 	const index = startIndex + recordToInsert.text.length;
 
 	return {

packages/rich-text-structure/src/is-collapsed.js

@@ -3,7 +3,8 @@
  *
  * @param {Object} record The rich text record to check.
  *
- * @return {boolean} True if the selection is collapsed, false if not.
+ * @return {?boolean} True if the selection is collapsed, false if not,
+ *                    undefined if there is no selection.
  */
 export function isCollapsed( { start, end } ) {
 	if ( start === undefined || end === undefined ) {

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

@@ -1,3 +1,9 @@
+/**
+ * Internal dependencies
+ */
+
+import { create } from './create';
+
 /**
  * Combines the given records into one record, separated by the given record or
  * text.
@@ -9,15 +15,12 @@
  *
  * @return {Object} A new combined record.
  */
-export function join( records, separator ) {
-	return records.reduce( ( accumlator, { formats, text } ) => {
-		if ( typeof separator === 'string' ) {
-			separator = {
-				formats: Array( separator.length ),
-				text: separator,
-			};
-		}
+export function join( records, separator = '' ) {
+	if ( typeof separator === 'string' ) {
+		separator = create( separator );
+	}
 
+	return records.reduce( ( accumlator, { formats, text } ) => {
 		return {
 			text: accumlator.text + separator.text + text,
 			formats: accumlator.formats.concat( separator.formats, formats ),