Remove toDom

WordPress · Feb 12, 2019 · c466ca7 · c466ca7
1 parent 4c32fc7
commit c466ca7
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 193 deletions.
diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
@@ -33,7 +33,6 @@ import {
 	insertLineBreak,
 	insertLineSeparator,
 	isEmptyLine,
-	unstableToDom,
 	getSelectionStart,
 	getSelectionEnd,
 	remove,
@@ -105,7 +104,6 @@ export class RichText extends Component {
 		this.isEmpty = this.isEmpty.bind( this );
 		this.valueToFormat = this.valueToFormat.bind( this );
 		this.setRef = this.setRef.bind( this );
-		this.valueToEditableHTML = this.valueToEditableHTML.bind( this );
 		this.handleHorizontalNavigation = this.handleHorizontalNavigation.bind( this );
 
 		this.formatToValue = memize( this.formatToValue.bind( this ), { size: 1 } );
@@ -760,15 +758,6 @@ export class RichText extends Component {
 		return value;
 	}
 
-	valueToEditableHTML( value ) {
-		return unstableToDom( {
-			value,
-			multilineTag: this.multilineTag,
-			multilineWrapperTags: this.multilineWrapperTags,
-			prepareEditableTree: this.props.prepareEditableTree,
-		} ).body.innerHTML;
-	}
-
 	/**
 	 * Removes editor only formats from the value.
 	 *
@@ -800,12 +789,15 @@ export class RichText extends Component {
 
 		// Handle deprecated `children` and `node` sources.
 		if ( this.usedDeprecatedChildrenSource ) {
-			return children.fromDOM( unstableToDom( {
+			const { body } = document.implementation.createHTMLDocument( '' );
+
+			body.innerHTML = toHTMLString( {
 				value,
 				multilineTag: this.multilineTag,
 				multilineWrapperTags: this.multilineWrapperTags,
-				isEditableTree: false,
-			} ).body.childNodes );
+			} );
+
+			return children.fromDOM( body.childNodes );
 		}
 
 		if ( this.props.format === 'string' ) {

diff --git a/packages/rich-text/src/index.js b/packages/rich-text/src/index.js
@@ -24,7 +24,7 @@ export { insertLineSeparator } from './insert-line-separator';
 export { insertObject } from './insert-object';
 export { slice } from './slice';
 export { split } from './split';
-export { toDom as unstableToDom, applySelection } from './to-dom';
+export { applySelection } from './to-dom';
 export { toElement } from './to-element';
 export { toHTMLString } from './to-html-string';
 export { toggleFormat } from './toggle-format';

diff --git a/packages/rich-text/src/to-dom.js b/packages/rich-text/src/to-dom.js
@@ -1,43 +1,3 @@
-/**
- * Internal dependencies
- */
-
-import { toTree } from './to-tree';
-import { createElement } from './create-element';
-
-/**
- * Browser dependencies
- */
-
-const { TEXT_NODE } = window.Node;
-
-/**
- * Creates a path as an array of indices from the given root node to the given
- * node.
- *
- * @param {Node}        node     Node to find the path of.
- * @param {HTMLElement} rootNode Root node to find the path from.
- * @param {Array}       path     Initial path to build on.
- *
- * @return {Array} The path from the root node to the node.
- */
-function createPathToNode( node, rootNode, path ) {
-	const parentNode = node.parentNode;
-	let i = 0;
-
-	while ( ( node = node.previousSibling ) ) {
-		i++;
-	}
-
-	path = [ i, ...path ];
-
-	if ( parentNode !== rootNode ) {
-		path = createPathToNode( parentNode, rootNode, path );
-	}
-
-	return path;
-}
-
 /**
  * Gets a node given a path (array of indices) from the given node.
  *
@@ -59,143 +19,6 @@ function getNodeByPath( node, path ) {
 	};
 }
 
-/**
- * Returns a new instance of a DOM tree upon which RichText operations can be
- * applied.
- *
- * Note: The current implementation will return a shared reference, reset on
- * each call to `createEmpty`. Therefore, you should not hold a reference to
- * the value to operate upon asynchronously, as it may have unexpected results.
- *
- * @return {WPRichTextTree} RichText tree.
- */
-const createEmpty = () => createElement( document, '' );
-
-function append( element, child ) {
-	if ( typeof child === 'string' ) {
-		child = element.ownerDocument.createTextNode( child );
-	}
-
-	const { type, attributes } = child;
-
-	if ( type ) {
-		child = element.ownerDocument.createElement( type );
-
-		for ( const key in attributes ) {
-			child.setAttribute( key, attributes[ key ] );
-		}
-	}
-
-	return element.appendChild( child );
-}
-
-function appendText( node, text ) {
-	node.appendData( text );
-}
-
-function getLastChild( { lastChild } ) {
-	return lastChild;
-}
-
-function getParent( { parentNode } ) {
-	return parentNode;
-}
-
-function isText( { nodeType } ) {
-	return nodeType === TEXT_NODE;
-}
-
-function getText( { nodeValue } ) {
-	return nodeValue;
-}
-
-function remove( node ) {
-	return node.parentNode.removeChild( node );
-}
-
-function createLinePadding( doc ) {
-	const element = doc.createElement( 'br' );
-	element.setAttribute( 'data-rich-text-padding', 'true' );
-	return element;
-}
-
-function padEmptyLines( { element, multilineWrapperTags } ) {
-	const length = element.childNodes.length;
-	const doc = element.ownerDocument;
-
-	for ( let index = 0; index < length; index++ ) {
-		const child = element.childNodes[ index ];
-
-		if ( child.nodeType === TEXT_NODE ) {
-			if ( length === 1 && ! child.nodeValue ) {
-				// Pad if the only child is an empty text node.
-				element.appendChild( createLinePadding( doc ) );
-			}
-		} else {
-			if (
-				multilineWrapperTags &&
-				! child.previousSibling &&
-				multilineWrapperTags.indexOf( child.nodeName.toLowerCase() ) !== -1
-			) {
-				// Pad the line if there is no content before a nested wrapper.
-				element.insertBefore( createLinePadding( doc ), child );
-			}
-
-			padEmptyLines( { element: child, multilineWrapperTags } );
-		}
-	}
-}
-
-function prepareFormats( prepareEditableTree = [], value ) {
-	return prepareEditableTree.reduce( ( accumlator, fn ) => {
-		return fn( accumlator, value.text );
-	}, value.formats );
-}
-
-export function toDom( {
-	value,
-	multilineTag,
-	multilineWrapperTags,
-	prepareEditableTree,
-	isEditableTree = true,
-} ) {
-	let startPath = [];
-	let endPath = [];
-
-	const tree = toTree( {
-		value: {
-			...value,
-			formats: prepareFormats( prepareEditableTree, value ),
-		},
-		multilineTag,
-		multilineWrapperTags,
-		createEmpty,
-		append,
-		getLastChild,
-		getParent,
-		isText,
-		getText,
-		remove,
-		appendText,
-		onStartIndex( body, pointer ) {
-			startPath = createPathToNode( pointer, body, [ pointer.nodeValue.length ] );
-		},
-		onEndIndex( body, pointer ) {
-			endPath = createPathToNode( pointer, body, [ pointer.nodeValue.length ] );
-		},
-		isEditableTree,
-	} );
-
-	if ( isEditableTree ) {
-		padEmptyLines( { element: tree, multilineWrapperTags } );
-	}
-
-	return {
-		body: tree,
-		selection: { startPath, endPath },
-	};
-}
-
 /**
  * Returns true if two ranges are equal, or false otherwise. Ranges are
  * considered equal if their start and end occur in the same container and

diff --git a/packages/rich-text/src/to-element.js b/packages/rich-text/src/to-element.js
@@ -38,6 +38,12 @@ function createPathToNode( node, rootNode, path ) {
 	return path;
 }
 
+function prepareFormats( prepareEditableTree = [], value ) {
+	return prepareEditableTree.reduce( ( accumlator, fn ) => {
+		return fn( accumlator, value.text );
+	}, value.formats );
+}
+
 /**
  * Create an HTML string from a Rich Text value. If a `multilineTag` is
  * provided, text separated by a line separator will be wrapped in it.
@@ -54,12 +60,16 @@ export function toElement( {
 	value,
 	multilineTag,
 	multilineWrapperTags,
+	prepareEditableTree,
 } ) {
 	let startPath = [];
 	let endPath = [];
 
 	const tree = toTree( {
-		value,
+		value: {
+			...value,
+			formats: prepareFormats( prepareEditableTree, value ),
+		},
 		multilineTag,
 		multilineWrapperTags,
 		createEmpty,