From e0724aa1bd71b5c1f473fb4d9003bff32e22eadf Mon Sep 17 00:00:00 2001
From: Andrey Okonetchnikov <andrej.okonetschnikow@gmail.com>
Date: Tue, 27 Sep 2016 11:26:28 +0200
Subject: [PATCH] Use react-htmlparser2 to render HTML to React VDOM

---
 package.json                                        |  1 +
 src/components/Widgets/MarkitupReactRenderer.js     |  7 ++-----
 .../Widgets/__tests__/MarkitupReactRenderer.spec.js | 13 +++++++++----
 .../MarkitupReactRenderer.spec.js.snap              | 12 +++++++++++-
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index fe2099a5..8c9df5af 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,7 @@
     "prismjs": "^1.5.1",
     "react-addons-css-transition-group": "^15.3.1",
     "react-datetime": "^2.6.0",
+    "react-htmlparser2": "^0.1.0",
     "react-portal": "^2.2.1",
     "react-simple-dnd": "^0.1.2",
     "react-toolbox": "^1.2.1",
diff --git a/src/components/Widgets/MarkitupReactRenderer.js b/src/components/Widgets/MarkitupReactRenderer.js
index 40923448..a2e79bfd 100644
--- a/src/components/Widgets/MarkitupReactRenderer.js
+++ b/src/components/Widgets/MarkitupReactRenderer.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
+import reactParser from 'react-htmlparser2';
 import MarkupIt, { Syntax, BLOCKS, STYLES, ENTITIES } from 'markup-it';
 import { pick } from 'lodash';
-import htmlSyntax from 'markup-it/syntaxes/html';
 
 const defaultSchema = {
   [BLOCKS.DOCUMENT]: 'article',
@@ -11,10 +11,7 @@ const defaultSchema = {
   [BLOCKS.PARAGRAPH]: 'p',
   [BLOCKS.FOOTNOTE]: 'footnote',
   [BLOCKS.HTML]: ({ token }) => {
-    return <MarkitupReactRenderer
-        value={token.get('raw')}
-        syntax={htmlSyntax}
-           />;
+    return reactParser(token.get('raw'), React);
   },
   [BLOCKS.HR]: 'hr',
   [BLOCKS.HEADING_1]: 'h1',
diff --git a/src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js b/src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js
index a7e351a8..d38f2719 100644
--- a/src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js
+++ b/src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js
@@ -170,10 +170,15 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]
         const value = `
 # Title
 
-<ul>
-    <li>Test HTML content</li>
-    <li>Testing HTML in Markdown</li>
-</ul>
+<form action="test">
+  <label for="input">
+    <input type="checkbox" checked="checked" id="input"/> My label
+  </label> 
+  <dl class="test-class another-class" style="width: 100%">
+      <dt data-attr="test">Test HTML content</dt>
+      <dt>Testing HTML in Markdown</dt>
+  </dl>
+</form>
 `;
         const component = shallow(
           <MarkitupReactRenderer
diff --git a/src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap b/src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap
index 9562819e..c9428b8f 100644
--- a/src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap
+++ b/src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap
@@ -6,7 +6,17 @@ exports[`MarkitupReactRenderer Markdown rendering Code should render code 2 1`]
 
 exports[`MarkitupReactRenderer Markdown rendering General should render markdown 1`] = `"<article><h1>H1</h1><p>Text with <strong>bold</strong> &amp; <em>em</em> elements</p><h2>H2</h2><ul><li>ul item 1</li><li>ul item 2</li></ul><h3>H3</h3><ol><li>ol item 1</li><li>ol item 2</li><li>ol item 3</li></ol><h4>H4</h4><p><a href=\"http://google.com\">link title</a></p><h5>H5</h5><p><img src=\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\" alt=\"alt text\"/></p><h6>H6</h6></article>"`;
 
-exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is using Markdown 1`] = `"<article><h1>Title</h1><article><ul><li>Test HTML content</li><li>Testing HTML in Markdown</li></ul></article></article>"`;
+exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is using Markdown 1`] = `
+"<article><h1>Title</h1><form action=\"test\">
+  <label for=\"input\">
+    <input type=\"checkbox\" checked=\"\" id=\"input\"/> My label
+  </label> 
+  <dl class=\"test-class another-class\" style=\"width: 100%;\">
+      <dt data-attr=\"test\">Test HTML content</dt>
+      <dt>Testing HTML in Markdown</dt>
+  </dl>
+</form></article>"
+`;
 
 exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 1 1`] = `"<article><h1>Title</h1></article>"`;