From 7fe1a6f8b68b6512bad900786c91bb54aa68db04 Mon Sep 17 00:00:00 2001
From: Andrey Okonetchnikov <andrej.okonetschnikow@gmail.com>
Date: Thu, 22 Sep 2016 17:44:25 +0200
Subject: [PATCH] Extracted renderToken function from class. Do not render
 additional `<div>`.

---
 .../Widgets/MarkitupReactRenderer.js          |  46 +++--
 .../__tests__/MarkitupReactRenderer.spec.js   |   3 +-
 .../MarkitupReactRenderer.spec.js.snap        | 168 +++++++++---------
 3 files changed, 106 insertions(+), 111 deletions(-)

diff --git a/src/components/Widgets/MarkitupReactRenderer.js b/src/components/Widgets/MarkitupReactRenderer.js
index 26137f7d..4f291cf2 100644
--- a/src/components/Widgets/MarkitupReactRenderer.js
+++ b/src/components/Widgets/MarkitupReactRenderer.js
@@ -21,30 +21,30 @@ const defaultRenderers = {
   'unstyled': null,
 };
 
-export default class MarkitupReactRenderer extends React.Component {
+function renderToken(token) {
+  const { type, data, text, tokens } = token;
+  const element = defaultRenderers[type];
 
-  renderToken = (token) => {
-    const { type, data, text, tokens } = token;
-    const element = defaultRenderers[type];
-
-    // Only render if type is registered as renderer
-    if (typeof element !== 'undefined') {
-      let children = null;
-      if (Array.isArray(tokens) && tokens.length) {
-        children = tokens.map(this.renderToken);
-      } else if (type === 'text') {
-        children = text;
-      }
-      if (element !== null) {
-        // If this is a react element
-        return React.createElement(element, data, children);
-      } else {
-        // If this is a text node
-        return children;
-      }
+  // Only render if type is registered as renderer
+  if (typeof element !== 'undefined') {
+    let children = null;
+    if (Array.isArray(tokens) && tokens.length) {
+      children = tokens.map(renderToken);
+    } else if (type === 'text') {
+      children = text;
+    }
+    if (element !== null) {
+      // If this is a react element
+      return React.createElement(element, data, children);
+    } else {
+      // If this is a text node
+      return children;
     }
-    return null;
   }
+  return null;
+}
+
+export default class MarkitupReactRenderer extends React.Component {
 
   render() {
     const { value, syntax } = this.props;
@@ -57,9 +57,7 @@ export default class MarkitupReactRenderer extends React.Component {
     const json = JSONUtils.encode(content);
     // console.log(JSON.stringify(json, null, 2));
 
-    return (
-      <div>{this.renderToken(json.token)}</div>
-    );
+    return renderToken(json.token);
   }
 }
 
diff --git a/src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js b/src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js
index 65ede560..c8b0e396 100644
--- a/src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js
+++ b/src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js
@@ -44,8 +44,7 @@ Text with **bold** & _em_ elements
   });
 
   it('should support custom syntax', () => {
-    const value = `
-`;
+    const value = '';
     const component = renderer.create(
       <MarkitupReactRenderer
           value={value}
diff --git a/src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap b/src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap
index 2f959a8f..5b582db8 100644
--- a/src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap
+++ b/src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap
@@ -1,90 +1,88 @@
 exports[`MarkitupReactRenderer should render HTML 1`] = `
-<div>
-  <article>
-    <p>
-      Paragraph with 
-      <em>
-        inline
-      </em>
-       element
-    </p>
-  </article>
-</div>
+<article>
+  <p>
+    Paragraph with 
+    <em>
+      inline
+    </em>
+     element
+  </p>
+</article>
 `;
 
 exports[`MarkitupReactRenderer should render markdown 1`] = `
-<div>
-  <article>
-    <h1
-      id={null}>
-      H1
-    </h1>
-    <p>
-      Text with 
-      <strong>
-        bold
-      </strong>
-       & 
-      <em>
-        em
-      </em>
-       elements
-    </p>
-    <h2
-      id={null}>
-      H2
-    </h2>
-    <ul>
-      <li
-        loose={false}>
-        ul item 1
-      </li>
-      <li
-        loose={false}>
-        ul item 2
-      </li>
-    </ul>
-    <h3
-      id={null}>
-      H3
-    </h3>
-    <ol>
-      <li
-        loose={false}>
-        ol item 1
-      </li>
-      <li
-        loose={false}>
-        ol item 2
-      </li>
-      <li
-        loose={false}>
-        ol item 3
-      </li>
-    </ol>
-    <h4
-      id={null}>
-      H4
-    </h4>
-    <p>
-      <a
-        href="http://google.com">
-        link title
-      </a>
-    </p>
-    <h5
-      id={null}>
-      H5
-    </h5>
-    <p>
-      <img
-        alt="alt text"
-        src="https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg" />
-    </p>
-    <h6
-      id={null}>
-      H6
-    </h6>
-  </article>
-</div>
+<article>
+  <h1
+    id={null}>
+    H1
+  </h1>
+  <p>
+    Text with 
+    <strong>
+      bold
+    </strong>
+     & 
+    <em>
+      em
+    </em>
+     elements
+  </p>
+  <h2
+    id={null}>
+    H2
+  </h2>
+  <ul>
+    <li
+      loose={false}>
+      ul item 1
+    </li>
+    <li
+      loose={false}>
+      ul item 2
+    </li>
+  </ul>
+  <h3
+    id={null}>
+    H3
+  </h3>
+  <ol>
+    <li
+      loose={false}>
+      ol item 1
+    </li>
+    <li
+      loose={false}>
+      ol item 2
+    </li>
+    <li
+      loose={false}>
+      ol item 3
+    </li>
+  </ol>
+  <h4
+    id={null}>
+    H4
+  </h4>
+  <p>
+    <a
+      href="http://google.com">
+      link title
+    </a>
+  </p>
+  <h5
+    id={null}>
+    H5
+  </h5>
+  <p>
+    <img
+      alt="alt text"
+      src="https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg" />
+  </p>
+  <h6
+    id={null}>
+    H6
+  </h6>
+</article>
 `;
+
+exports[`MarkitupReactRenderer should support custom syntax 1`] = `<article />`;