From b9e535080f81e2ebb2801c8742acfc565a20701f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 3 Mar 2017 16:38:03 +0100
Subject: [PATCH] TinyMCE per block: Adding a preview button to display the
 generated HTML (#176)

---
 tinymce-per-block/src/index.js               | 27 ++++++++++++--------
 tinymce-per-block/src/renderers/index.js     |  1 +
 tinymce-per-block/src/renderers/raw/index.js | 10 ++++++++
 3 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 tinymce-per-block/src/renderers/raw/index.js

diff --git a/tinymce-per-block/src/index.js b/tinymce-per-block/src/index.js
index b84fe2b689e1d..25e8f59b12c7e 100644
--- a/tinymce-per-block/src/index.js
+++ b/tinymce-per-block/src/index.js
@@ -27,15 +27,17 @@ class App extends Component {
 		const type = forceType ? forceType : this.state.activeRenderer;
 		switch ( type ) {
 			case 'block':
+				const html = serializers.block.serialize(
+					nextContent.map( block => {
+						const blockDefinition = getBlock( block.blockType );
+						return blockDefinition.serialize( block );
+					} )
+				);
 				this.setState( {
 					content: {
 						block: nextContent,
-						html: serializers.block.serialize(
-							nextContent.map( block => {
-								const blockDefinition = getBlock( block.blockType );
-								return blockDefinition.serialize( block );
-							} )
-						)
+						raw: html,
+						html
 					}
 				} );
 				return;
@@ -50,16 +52,17 @@ class App extends Component {
 								return parsedBlock ? parsedBlock : getBlock( 'text' ).parse( rawBlock );
 							} )
 							.map( block => Object.assign( { uid: uniqueId() }, block ) ),
-						html: nextContent
+						html: nextContent,
+						raw: nextContent
 					}
 				} );
 				return;
 		}
 	}
 
-	toggleRenderer = () => {
+	selectRenderer = ( renderer ) => () => {
 		this.setState( {
-			activeRenderer: this.state.activeRenderer === 'block' ? 'html' : 'block'
+			activeRenderer: renderer
 		} );
 	}
 
@@ -72,7 +75,11 @@ class App extends Component {
 		const Renderer = renderers[ activeRenderer ];
 		return (
 			<div className="renderers">
-				<button className="toggle-renderer" onClick={ this.toggleRenderer }>Html/Block</button>
+				<div className="toggle-renderer">
+					<button onClick={ this.selectRenderer( 'block' ) }>Block</button>
+					<button onClick={ this.selectRenderer( 'html' ) }>Html</button>
+					<button onClick={ this.selectRenderer( 'raw' ) }>Preview</button>
+				</div>
 				<div className={ `renderer-${ activeRenderer }` }>
 					<Renderer content={ content[ activeRenderer ] } onChange={ this.updateParsedContent } />
 				</div>
diff --git a/tinymce-per-block/src/renderers/index.js b/tinymce-per-block/src/renderers/index.js
index 320d43e0e62bd..acd5c1e53d68d 100644
--- a/tinymce-per-block/src/renderers/index.js
+++ b/tinymce-per-block/src/renderers/index.js
@@ -1,2 +1,3 @@
 export { default as block } from './block';
 export { default as html } from './html';
+export { default as raw } from './raw';
diff --git a/tinymce-per-block/src/renderers/raw/index.js b/tinymce-per-block/src/renderers/raw/index.js
new file mode 100644
index 0000000000000..ea6a211f4a742
--- /dev/null
+++ b/tinymce-per-block/src/renderers/raw/index.js
@@ -0,0 +1,10 @@
+/**
+ * External dependencies
+ */
+import { createElement } from 'wp-elements';
+
+export default function RawRenderer( { content } ) {
+	return (
+		<div dangerouslySetInnerHTML={ { __html: content } } />
+	);
+}