Revert React tree

Author: ellatrix

packages/rich-text/src/component/content.js

@@ -23,7 +23,6 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import FormatEdit from './format-edit';
-import Editable from './editable';
 import { create } from '../create';
 import { apply } from '../to-dom';
 import { toHTMLString } from '../to-html-string';
@@ -57,6 +56,24 @@ const INSERTION_INPUT_TYPES_TO_IGNORE = new Set( [
 	'insertLink',
 ] );
 
+// In HTML, leading and trailing spaces are not visible, and multiple spaces
+// elsewhere are visually reduced to one space. This rule prevents spaces from
+// collapsing so all space is visible in the editor and can be removed. It also
+// prevents some browsers from inserting non-breaking spaces at the end of a
+// line to prevent the space from visually disappearing. Sometimes these non
+// breaking spaces can linger in the editor causing unwanted non breaking spaces
+// in between words. If also prevent Firefox from inserting a trailing `br` node
+// to visualise any trailing space, causing the element to be saved.
+//
+// > Authors are encouraged to set the 'white-space' property on editing hosts
+// > and on markup that was originally created through these editing mechanisms
+// > to the value 'pre-wrap'. Default HTML whitespace handling is not well
+// > suited to WYSIWYG editing, and line wrapping will not work correctly in
+// > some corner cases if 'white-space' is left at its default value.
+// >
+// > https://html.spec.whatwg.org/multipage/interaction.html#best-practices-for-in-page-editors
+const whiteSpace = 'pre-wrap';
+
 /**
  * Global stylesheet.
  */
@@ -143,6 +160,8 @@ class RichText extends Component {
 				console.warn( 'RichText cannot be used with an inline container. Please use a different tagName.' );
 			}
 		}
+
+		this.applyRecord( this.record, { domOnly: true } );
 	}
 
 	createRecord() {
@@ -814,9 +833,11 @@ class RichText extends Component {
 			__unstableIsSelected: isSelected,
 		} = this.props;
 
+		// Check if tag name changed.
+		let shouldReapply = tagName !== prevProps.tagName;
+
 		// Check if the content changed.
-		let shouldReapply = (
-			tagName === prevProps.tagName &&
+		shouldReapply = shouldReapply || (
 			value !== prevProps.value &&
 			value !== this.value
 		);
@@ -935,25 +956,21 @@ class RichText extends Component {
 
 	Editable( props ) {
 		const {
-			tagName,
-			style,
+			tagName: TagName = 'div',
+			style = {},
 			className,
 			placeholder,
 			forwardedRef,
-			__unstableMultilineTag: multilineTag,
 		} = this.props;
 		const ariaProps = pickBy( this.props, ( value, key ) =>
 			startsWith( key, 'aria-' ) );
 
 		return (
-			<Editable
+			<TagName
 				{ ...props }
 				{ ...ariaProps }
 				ref={ forwardedRef }
-				tagName={ tagName }
-				style={ style }
-				value={ this.record }
-				placeholder={ placeholder }
+				style={ { ...style, whiteSpace } }
 				className={ classnames( 'rich-text', className ) }
 				onPaste={ this.onPaste }
 				onInput={ this.onInput }
@@ -973,8 +990,11 @@ class RichText extends Component {
 				onKeyUp={ this.onSelectionChange }
 				onMouseUp={ this.onSelectionChange }
 				onTouchEnd={ this.onSelectionChange }
-				multilineTag={ multilineTag }
-				prepareEditableTree={ createPrepareEditableTree( this.props, 'format_prepare_functions' ) }
+				role="textbox"
+				aria-multiline
+				aria-label={ placeholder }
+				contentEditable
+				suppressContentEditableWarning
 			/>
 		);
 	}

packages/rich-text/src/component/editable.js

@@ -12,7 +12,7 @@ import {
  * Internal dependencies
  */
 
-import { toObjectTree } from './to-object-tree';
+import { toTree } from './to-tree';
 
 /**
  * Create an HTML string from a Rich Text value. If a `multilineTag` is
@@ -25,10 +25,67 @@ import { toObjectTree } from './to-object-tree';
  * @return {string} HTML string.
  */
 export function toHTMLString( { value, multilineTag } ) {
-	const tree = toObjectTree( { value, multilineTag } );
+	const tree = toTree( {
+		value,
+		multilineTag,
+		createEmpty,
+		append,
+		getLastChild,
+		getParent,
+		isText,
+		getText,
+		remove,
+		appendText,
+	} );
+
 	return createChildrenHTML( tree.children );
 }
 
+function createEmpty() {
+	return {};
+}
+
+function getLastChild( { children } ) {
+	return children && children[ children.length - 1 ];
+}
+
+function append( parent, object ) {
+	if ( typeof object === 'string' ) {
+		object = { text: object };
+	}
+
+	object.parent = parent;
+	parent.children = parent.children || [];
+	parent.children.push( object );
+	return object;
+}
+
+function appendText( object, text ) {
+	object.text += text;
+}
+
+function getParent( { parent } ) {
+	return parent;
+}
+
+function isText( { text } ) {
+	return typeof text === 'string';
+}
+
+function getText( { text } ) {
+	return text;
+}
+
+function remove( object ) {
+	const index = object.parent.children.indexOf( object );
+
+	if ( index !== -1 ) {
+		object.parent.children.splice( index, 1 );
+	}
+
+	return object;
+}
+
 function createElementHTML( { type, attributes, object, children } ) {
 	let attributeString = '';
 

packages/rich-text/src/component/index.js

@@ -258,7 +258,7 @@ export function toTree( {
 						// Necessary to prevent the placeholder from catching
 						// selection. The placeholder is also not editable after
 						// all.
-						contentEditable: 'false',
+						contenteditable: 'false',
 					},
 				} );
 			}