Represent Editable value as array tree

WordPress · Mar 29, 2018 · 5ba4eae · 5ba4eae
1 parent 5cab7a3
commit 5ba4eae
Show file tree

Hide file tree

Showing 19 changed files with 533 additions and 335 deletions.
diff --git a/blocks/api/index.js b/blocks/api/index.js
@@ -42,3 +42,4 @@ export {
 	doBlocksMatchTemplate,
 	synchronizeBlocksWithTemplate,
 } from './templates';
+export { nodeListToTree } from './matchers';
diff --git a/blocks/api/matchers.js b/blocks/api/matchers.js
@@ -1,14 +1,61 @@
-/**
- * WordPress dependencies
- */
-import { createElement } from '@wordpress/element';
-
 /**
  * External dependencies
  */
-import { nodeListToReact, nodeToReact } from 'dom-react';
 export { attr, prop, html, text, query } from 'hpq';
 
+export function buildTree( type, attributes, ...children ) {
+	children = children.map( ( child ) => {
+		if ( 'boolean' === typeof child ) {
+			child = null;
+		}
+
+		if ( null === child || undefined === child ) {
+			child = '';
+		} else if ( 'number' === typeof child ) {
+			child = String( child );
+		}
+
+		if ( 'string' === typeof child ) {
+			return child;
+		}
+
+		return buildTree( child );
+	} );
+
+	return [ type, attributes, children ];
+}
+
+export function nodeListToTree( nodeList, createElement ) {
+	return [ ...nodeList ].map( ( node ) => nodeToTree( node, createElement ) );
+}
+
+export function elementAsArray( type, attributes, children ) {
+	return [ type, attributes, children ];
+}
+
+export function nodeToTree( node, createElement = elementAsArray ) {
+	if ( ! node ) {
+		return null;
+	}
+
+	if ( node.nodeType === 3 ) {
+		return node.nodeValue;
+	}
+
+	if ( node.nodeType !== 1 ) {
+		return null;
+	}
+
+	const type = node.nodeName.toLowerCase();
+	const attributes = [ ...node.attributes ].reduce( ( result, { name, value } ) => {
+		result[ name ] = value;
+		return result;
+	}, {} );
+	const children = nodeListToTree( node.childNodes );
+
+	return createElement( type, attributes, children );
+}
+
 export const children = ( selector ) => {
 	return ( domNode ) => {
 		let match = domNode;
@@ -18,7 +65,7 @@ export const children = ( selector ) => {
 		}
 
 		if ( match ) {
-			return nodeListToReact( match.childNodes || [], createElement );
+			return nodeListToTree( match.childNodes );
 		}
 
 		return [];
@@ -33,6 +80,6 @@ export const node = ( selector ) => {
 			match = domNode.querySelector( selector );
 		}
 
-		return nodeToReact( match, createElement );
+		return nodeToTree( match );
 	};
 };
diff --git a/blocks/library/pullquote/index.js b/blocks/library/pullquote/index.js
@@ -120,9 +120,7 @@ export const settings = {
 
 		return (
 			<blockquote className={ `align${ align }` }>
-				{ value && value.map( ( paragraph, i ) =>
-					<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
-				) }
+				{ value.map( ( paragraph ) => paragraph.children ) }
 				{ citation && citation.length > 0 && (
 					<cite>{ citation }</cite>
 				) }
@@ -145,9 +143,7 @@ export const settings = {
 
 			return (
 				<blockquote className={ `align${ align }` }>
-					{ value && value.map( ( paragraph, i ) =>
-						<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
-					) }
+					{ value.map( ( paragraph ) => paragraph.children ) }
 					{ citation && citation.length > 0 && (
 						<footer>{ citation }</footer>
 					) }

diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js
@@ -242,9 +242,7 @@ export const settings = {
 				className={ style === 2 ? 'is-large' : '' }
 				style={ { textAlign: align ? align : null } }
 			>
-				{ value.map( ( paragraph, i ) => (
-					<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
-				) ) }
+				{ value.map( ( paragraph ) => paragraph.children ) }
 				{ citation && citation.length > 0 && (
 					<cite>{ citation }</cite>
 				) }
@@ -271,9 +269,7 @@ export const settings = {
 						className={ `blocks-quote-style-${ style }` }
 						style={ { textAlign: align ? align : null } }
 					>
-						{ value.map( ( paragraph, i ) => (
-							<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
-						) ) }
+						{ value.map( ( paragraph ) => paragraph.children ) }
 						{ citation && citation.length > 0 && (
 							<footer>{ citation }</footer>
 						) }

diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js
@@ -14,7 +14,6 @@ import {
 	noop,
 	reject,
 } from 'lodash';
-import { nodeListToReact } from 'dom-react';
 import 'element-closest';
 
 /**
@@ -28,7 +27,7 @@ import { withSafeTimeout, Slot, Fill } from '@wordpress/components';
  * Internal dependencies
  */
 import './style.scss';
-import { rawHandler } from '../api';
+import { rawHandler, nodeListToTree } from '../api';
 import FormatToolbar from './format-toolbar';
 import TinyMCE from './tinymce';
 import { pickAriaProps } from './aria';
@@ -37,6 +36,23 @@ import { EVENTS } from './constants';
 
 const { BACKSPACE, DELETE, ENTER } = keycodes;
 
+function toElement( value ) {
+	if ( ! value ) {
+		return null;
+	}
+
+	if ( ! Array.isArray( value ) ) {
+		return value;
+	}
+
+	const [ type, attributes, children ] = value;
+	if ( ! attributes || attributes.constructor !== Object ) {
+		return value.map( toElement );
+	}
+
+	return createElement( type, attributes, children.map( toElement ) );
+}
+
 export function createTinyMCEElement( type, props, ...children ) {
 	if ( props[ 'data-mce-bogus' ] === 'all' ) {
 		return null;
@@ -46,11 +62,11 @@ export function createTinyMCEElement( type, props, ...children ) {
 		return children;
 	}
 
-	return createElement(
+	return [
 		type,
 		omitBy( props, ( value, key ) => key.indexOf( 'data-mce-' ) === 0 ),
-		...children
-	);
+		children,
+	];
 }
 
 /**
@@ -530,8 +546,8 @@ export class RichText extends Component {
 				const index = dom.nodeIndex( selectedNode );
 				const beforeNodes = childNodes.slice( 0, index );
 				const afterNodes = childNodes.slice( index + 1 );
-				const beforeElement = nodeListToReact( beforeNodes, createTinyMCEElement );
-				const afterElement = nodeListToReact( afterNodes, createTinyMCEElement );
+				const beforeElement = nodeListToTree( beforeNodes, createTinyMCEElement );
+				const afterElement = nodeListToTree( afterNodes, createTinyMCEElement );
 
 				this.restoreContentAndSplit( beforeElement, afterElement );
 			} else {
@@ -590,8 +606,8 @@ export class RichText extends Component {
 			const beforeFragment = beforeRange.extractContents();
 			const afterFragment = afterRange.extractContents();
 
-			const beforeElement = nodeListToReact( beforeFragment.childNodes, createTinyMCEElement );
-			const afterElement = nodeListToReact( filterEmptyNodes( afterFragment.childNodes ), createTinyMCEElement );
+			const beforeElement = nodeListToTree( beforeFragment.childNodes, createTinyMCEElement );
+			const afterElement = nodeListToTree( filterEmptyNodes( afterFragment.childNodes ), createTinyMCEElement );
 
 			this.restoreContentAndSplit( beforeElement, afterElement, blocks );
 		} else {
@@ -642,8 +658,8 @@ export class RichText extends Component {
 		this.setContent( this.props.value );
 
 		this.restoreContentAndSplit(
-			nodeListToReact( before, createTinyMCEElement ),
-			nodeListToReact( after, createTinyMCEElement )
+			nodeListToTree( before, createTinyMCEElement ),
+			nodeListToTree( after, createTinyMCEElement )
 		);
 	}
 
@@ -682,7 +698,7 @@ export class RichText extends Component {
 	}
 
 	getContent() {
-		return nodeListToReact( this.editor.getBody().childNodes || [], createTinyMCEElement );
+		return nodeListToTree( this.editor.getBody().childNodes || [], createTinyMCEElement );
 	}
 
 	componentWillUnmount() {
@@ -823,7 +839,7 @@ export class RichText extends Component {
 					getSettings={ this.getSettings }
 					onSetup={ this.onSetup }
 					style={ style }
-					defaultValue={ value }
+					defaultValue={ toElement( value ) }
 					isPlaceholderVisible={ isPlaceholderVisible }
 					aria-label={ placeholder }
 					{ ...ariaProps }

diff --git a/blocks/rich-text/test/__snapshots__/index.js.snap b/blocks/rich-text/test/__snapshots__/index.js.snap
@@ -1,11 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`createTinyMCEElement should render a TinyMCE element 1`] = `
-<p
-  a-prop="hi"
->
-  <p>
-    Child
-  </p>
-</p>
+Array [
+  "p",
+  Object {
+    "a-prop": "hi",
+  },
+  Array [
+    Array [
+      "p",
+      Object {},
+      Array [
+        "Child",
+      ],
+    ],
+  ],
+]
 `;
diff --git a/blocks/rich-text/test/index.js b/blocks/rich-text/test/index.js
@@ -18,7 +18,7 @@ import { diffAriaProps, pickAriaProps } from '../aria';
 
 describe( 'createTinyMCEElement', () => {
 	const type = 'p';
-	const children = <p>Child</p>;
+	const children = createTinyMCEElement( 'p', {}, 'Child' );
 
 	test( 'should return null', () => {
 		const props = {
@@ -42,7 +42,7 @@ describe( 'createTinyMCEElement', () => {
 			'a-prop': 'hi',
 		};
 
-		const wrapper = shallow( createTinyMCEElement( type, props, children ) );
+		const wrapper = createTinyMCEElement( type, props, children );
 		expect( wrapper ).toMatchSnapshot();
 	} );
 } );

diff --git a/blocks/test/fixtures/core__heading__h2-em.json b/blocks/test/fixtures/core__heading__h2-em.json
@@ -6,10 +6,13 @@
         "attributes": {
             "content": [
                 "The ",
-                {
-                    "type": "em",
-                    "children": "Inserter"
-                },
+                [
+                    "em",
+                    {},
+                    [
+                        "Inserter"
+                    ]
+                ],
                 " Tool"
             ],
             "nodeName": "H2"

diff --git a/blocks/test/fixtures/core__list__ul.json b/blocks/test/fixtures/core__list__ul.json
@@ -6,37 +6,56 @@
         "attributes": {
             "nodeName": "UL",
             "values": [
-                {
-                    "type": "li",
-                    "children": "Text & Headings"
-                },
-                {
-                    "type": "li",
-                    "children": "Images & Videos"
-                },
-                {
-                    "type": "li",
-                    "children": "Galleries"
-                },
-                {
-                    "type": "li",
-                    "children": "Embeds, like YouTube, Tweets, or other WordPress posts."
-                },
-                {
-                    "type": "li",
-                    "children": "Layout blocks, like Buttons, Hero Images, Separators, etc."
-                },
-                {
-                    "type": "li",
-                    "children": [
+                [
+                    "li",
+                    {},
+                    [
+                        "Text & Headings"
+                    ]
+                ],
+                [
+                    "li",
+                    {},
+                    [
+                        "Images & Videos"
+                    ]
+                ],
+                [
+                    "li",
+                    {},
+                    [
+                        "Galleries"
+                    ]
+                ],
+                [
+                    "li",
+                    {},
+                    [
+                        "Embeds, like YouTube, Tweets, or other WordPress posts."
+                    ]
+                ],
+                [
+                    "li",
+                    {},
+                    [
+                        "Layout blocks, like Buttons, Hero Images, Separators, etc."
+                    ]
+                ],
+                [
+                    "li",
+                    {},
+                    [
                         "And ",
-                        {
-                            "type": "em",
-                            "children": "Lists"
-                        },
+                        [
+                            "em",
+                            {},
+                            [
+                                "Lists"
+                            ]
+                        ],
                         " like this one of course :)"
                     ]
-                }
+                ]
             ]
         },
         "innerBlocks": [],