Manage Editable value as React element

blocks/api/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import * as query from 'hpq';
+import * as query from './query';
 
 export { query };
 export { createBlock, switchToBlockType } from './factory';

blocks/api/query.js

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { flow } from 'lodash';
+import { html } from 'hpq';
+import { Parser } from 'html-to-react';
+
+export * from 'hpq';
+
+const parser = new Parser();
+export function children( selector ) {
+	return flow( html( selector ), parser.parse );
+}

blocks/api/test/query.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { expect } from 'chai';
+
+/**
+ * Internal dependencies
+ */
+import { parse, children } from '../query';
+
+describe( 'query', () => {
+	describe( 'children()', () => {
+		it( 'should return a matcher function', () => {
+			const matcher = children();
+
+			expect( matcher ).to.be.a( 'function' );
+		} );
+
+		it( 'should return HTML equivalent WPElement of matched element', () => {
+			// Assumption here is that we can cleanly convert back and forth
+			// between a string and WPElement representation
+			const html = '<blockquote><p>A delicious sundae dessert</p></blockquote>';
+			const match = parse( html, children() );
+
+			expect( wp.element.renderToString( match ) ).to.equal( html );
+		} );
+	} );
+} );

blocks/components/editable/index.js

@@ -3,12 +3,15 @@
  */
 import classnames from 'classnames';
 import { last } from 'lodash';
+import { Parser as HtmlToReactParser } from 'html-to-react';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
+const htmlToReactParser = new HtmlToReactParser();
+
 export default class Editable extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
@@ -50,8 +53,7 @@ export default class Editable extends wp.element.Component {
 	}
 
 	onInit() {
-		const { value = '' } = this.props;
-		this.editor.setContent( value );
+		this.setContent( this.props.value );
 		this.focus();
 	}
 
@@ -68,9 +70,9 @@ export default class Editable extends wp.element.Component {
 		if ( ! this.editor.isDirty() ) {
 			return;
 		}
-		const value = this.editor.getContent();
+
 		this.editor.save();
-		this.props.onChange( value );
+		this.props.onChange( this.getContent() );
 	}
 
 	onNewBlock() {
@@ -100,15 +102,21 @@ export default class Editable extends wp.element.Component {
 			return;
 		}
 		const before = getHtml( beforeNodes.slice( 0, beforeNodes.length - 1 ) );
-		const after = getHtml( childNodes.slice( splitIndex ) );
 
 		// Splitting into two blocks
-		this.editor.setContent( this.props.value || '' );
+		this.setContent( this.props.value );
 		const hasAfter = !! childNodes.slice( splitIndex )
 			.reduce( ( memo, node ) => memo + node.textContent, '' );
 
+		const after = hasAfter ? getHtml( childNodes.slice( splitIndex ) ) : '';
+
 		// The setTimeout fixes the focus jump to the original block
-		setTimeout( () => this.props.onSplit( before, hasAfter ? after : '' ) );
+		setTimeout( () => {
+			this.props.onSplit(
+				htmlToReactParser.parse( before ),
+				htmlToReactParser.parse( after )
+			);
+		} );
 	}
 
 	bindNode( ref ) {
@@ -117,13 +125,28 @@ export default class Editable extends wp.element.Component {
 
 	updateContent() {
 		const bookmark = this.editor.selection.getBookmark( 2, true );
-		this.editor.setContent( this.props.value );
+		this.setContent( this.props.value );
 		this.editor.selection.moveToBookmark( bookmark );
 		// Saving the editor on updates avoid unecessary onChanges calls
 		// These calls can make the focus jump
 		this.editor.save();
 	}
 
+	setContent( content ) {
+		if ( ! content ) {
+			content = '';
+		}
+
+		content = wp.element.renderToString( content );
+		this.editor.setContent( content );
+	}
+
+	getContent() {
+		const content = this.editor.getContent( { format: 'raw' } );
+
+		return htmlToReactParser.parse( content );
+	}
+
 	focus() {
 		if ( this.props.focus ) {
 			this.editor.focus();

blocks/library/embed/index.js

@@ -4,7 +4,7 @@
 import { registerBlock, query } from 'api';
 import Editable from 'components/editable';
 
-const { attr, html } = query;
+const { attr, children } = query;
 
 registerBlock( 'core/embed', {
 	title: wp.i18n.__( 'Embed' ),
@@ -16,7 +16,7 @@ registerBlock( 'core/embed', {
 	attributes: {
 		url: attr( 'iframe', 'src' ),
 		title: attr( 'iframe', 'title' ),
-		caption: html( 'figcaption' )
+		caption: children( 'figcaption' )
 	},
 
 	edit( { attributes, isSelected, setAttributes } ) {
@@ -47,7 +47,7 @@ registerBlock( 'core/embed', {
 		return (
 			<figure>
 				{ iframe }
-				<figcaption dangerouslySetInnerHTML={ { __html: caption } } />
+				<figcaption>{ caption }</figcaption>
 			</figure>
 		);
 	}

blocks/library/heading/index.js

@@ -4,7 +4,7 @@
 import { registerBlock, query } from 'api';
 import Editable from 'components/editable';
 
-const { html, prop } = query;
+const { children, prop } = query;
 
 registerBlock( 'core/heading', {
 	title: wp.i18n.__( 'Heading' ),
@@ -14,7 +14,7 @@ registerBlock( 'core/heading', {
 	category: 'common',
 
 	attributes: {
-		content: html( 'h1,h2,h3,h4,h5,h6' ),
+		content: children( 'h1,h2,h3,h4,h5,h6' ),
 		nodeName: prop( 'h1,h2,h3,h4,h5,h6', 'nodeName' ),
 		align: prop( 'h1,h2,h3,h4,h5,h6', 'style.textAlign' )
 	},
@@ -51,9 +51,9 @@ registerBlock( 'core/heading', {
 		const Tag = nodeName.toLowerCase();
 
 		return (
-			<Tag
-				style={ align ? { textAlign: align } : null }
-				dangerouslySetInnerHTML={ { __html: content } } />
+			<Tag style={ align ? { textAlign: align } : null }>
+				{ content }
+			</Tag>
 		);
 	},
 

blocks/library/image/index.js

@@ -4,7 +4,7 @@
 import { registerBlock, query } from 'api';
 import Editable from 'components/editable';
 
-const { attr, html } = query;
+const { attr, children } = query;
 
 registerBlock( 'core/image', {
 	title: wp.i18n.__( 'Image' ),
@@ -16,7 +16,7 @@ registerBlock( 'core/image', {
 	attributes: {
 		url: attr( 'img', 'src' ),
 		alt: attr( 'img', 'alt' ),
-		caption: html( 'figcaption' )
+		caption: children( 'figcaption' )
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus } ) {
@@ -49,7 +49,7 @@ registerBlock( 'core/image', {
 		return (
 			<figure>
 				{ img }
-				<figcaption dangerouslySetInnerHTML={ { __html: caption } } />
+				<figcaption>{ caption }</figcaption>
 			</figure>
 		);
 	}

blocks/library/list/index.js

@@ -5,7 +5,7 @@ import './style.scss';
 import { registerBlock, query as hpq } from 'api';
 import Editable from 'components/editable';
 
-const { html, prop, query } = hpq;
+const { children, prop, query } = hpq;
 
 registerBlock( 'core/list', {
 	title: wp.i18n.__( 'List' ),
@@ -15,7 +15,7 @@ registerBlock( 'core/list', {
 	attributes: {
 		nodeName: prop( 'ol,ul', 'nodeName' ),
 		items: query( 'li', {
-			value: html()
+			value: children()
 		} )
 	},
 
@@ -56,9 +56,9 @@ registerBlock( 'core/list', {
 
 	edit( { attributes, focus, setFocus } ) {
 		const { nodeName = 'OL', items = [], align } = attributes;
-		const content = items.map( item => {
-			return `<li>${ item.value }</li>`;
-		} ).join( '' );
+		const content = items.map( ( item, i ) => {
+			return <li key={ i }>{ item.value }</li>;
+		} );
 
 		return (
 			<Editable
@@ -73,9 +73,13 @@ registerBlock( 'core/list', {
 
 	save( { attributes } ) {
 		const { nodeName = 'OL', items = [] } = attributes;
-		const children = items.map( ( item, index ) => (
-			<li key={ index } dangerouslySetInnerHTML={ { __html: item.value } } />
-		) );
-		return wp.element.createElement( nodeName.toLowerCase(), null, children );
+
+		return wp.element.createElement(
+			nodeName.toLowerCase(),
+			null,
+			items.map( ( item, index ) => (
+				<li key={ index }>{ item.value }</li>
+			) )
+		);
 	}
 } );

blocks/library/quote/index.js

@@ -5,24 +5,21 @@ import './style.scss';
 import { registerBlock, query as hpq } from 'api';
 import Editable from 'components/editable';
 
-const { parse, html, query, attr } = hpq;
-
-const fromValueToParagraphs = ( value ) => value ? value.map( ( paragraph ) => `<p>${ paragraph }</p>` ).join( '' ) : '';
-const fromParagraphsToValue = ( paragraphs ) => parse( paragraphs, query( 'p', html() ) );
+const { children, query, attr } = hpq;
 
 registerBlock( 'core/quote', {
 	title: wp.i18n.__( 'Quote' ),
 	icon: 'format-quote',
 	category: 'common',
 
 	attributes: {
-		value: query( 'blockquote > p', html() ),
-		citation: html( 'footer' ),
+		value: query( 'blockquote > p', children() ),
+		citation: children( 'footer' ),
 		style: node => {
 			const value = attr( 'blockquote', 'class' )( node );
 			const match = value.match( /\bblocks-quote-style-(\d+)\b/ );
 			return match ? +match[ 1 ] : null;
-		},
+		}
 	},
 
 	controls: [ 1, 2 ].map( ( variation ) => ( {
@@ -42,29 +39,29 @@ registerBlock( 'core/quote', {
 		return (
 			<blockquote className={ `blocks-quote blocks-quote-style-${ style }` }>
 				<Editable
-					value={ fromValueToParagraphs( value ) }
+					value={ value }
 					onChange={
-						( paragraphs ) => setAttributes( {
-							value: fromParagraphsToValue( paragraphs )
+						( nextValue ) => setAttributes( {
+							value: nextValue
 						} )
 					}
 					focus={ focus && focus.editable === 'value' ? focus : null }
 					onFocus={ () => setFocus( { editable: 'value' } ) }
 				/>
-				{ ( citation || !! focus ) &&
+				{ ( citation || !! focus ) && (
 					<footer>
 						<Editable
 							value={ citation }
 							onChange={
-								( newValue ) => setAttributes( {
-									citation: newValue
+								( nextCitation ) => setAttributes( {
+									citation: nextCitation
 								} )
 							}
 							focus={ focus && focus.editable === 'citation' ? focus : null }
 							onFocus={ () => setFocus( { editable: 'citation' } ) }
 						/>
 					</footer>
-				}
+				) }
 			</blockquote>
 		);
 	},
@@ -76,15 +73,9 @@ registerBlock( 'core/quote', {
 		return (
 			<blockquote className={ `blocks-quote-style-${ style }` }>
 				{ value && value.map( ( paragraph, i ) => (
-					<p
-						key={ i }
-						dangerouslySetInnerHTML={ {
-							__html: paragraph
-						} } />
+					<p key={ i }>{ paragraph }</p>
 				) ) }
-				<footer dangerouslySetInnerHTML={ {
-					__html: citation
-				} } />
+				<footer>{ citation }</footer>
 			</blockquote>
 		);
 	}