Use Immutable data structure without converting to JSON for speed and profit. Added more tests.

src/components/Widgets/MarkitupReactRenderer.js

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import MarkupIt, { Syntax, JSONUtils, BLOCKS, STYLES, ENTITIES } from 'markup-it';
+import MarkupIt, { Syntax, BLOCKS, STYLES, ENTITIES } from 'markup-it';
 
 const defaultRenderers = {
   [BLOCKS.DOCUMENT]: 'article',
@@ -36,14 +36,17 @@ const defaultRenderers = {
 };
 
 function renderToken(token, index = 0, key = '0') {
-  const { type, data, text, tokens } = token;
+  const type = token.get('type');
+  const data = token.get('data');
+  const text = token.get('text');
+  const tokens = token.get('tokens');
   const nodeType = defaultRenderers[type];
   key = `${key}.${index}`;
 
   // Only render if type is registered as renderer
   if (typeof nodeType !== 'undefined') {
     let children = null;
-    if (Array.isArray(tokens) && tokens.length) {
+    if (tokens.size) {
       children = tokens.map((token, idx) => renderToken(token, idx, key));
     } else if (type === 'text') {
       children = text;
@@ -52,9 +55,9 @@ function renderToken(token, index = 0, key = '0') {
       // If this is a react element
       return React.createElement(
         nodeType,
-        { key, ...data }, // Add key as a prop
+        { key, ...data.toJS() }, // Add key as a prop
-        Array.isArray(children) && children.length === 1
+        children
-          ? children[0] : children); // Pass single child if possible
+      );
     } else {
       // If this is a text node
       return children;
@@ -80,10 +83,7 @@ export default class MarkitupReactRenderer extends React.Component {
   render() {
     const { value } = this.props;
     const content = this.parser.toContent(value);
-    const json = JSONUtils.encode(content);
+    return renderToken(content.get('token'));
-    // console.log(JSON.stringify(json, null, 2));
-
-    return renderToken(json.token);
   }
 }
 

src/components/Widgets/__tests__/MarkitupReactRenderer.spec.js

@@ -81,6 +81,30 @@ Text with **bold** & _em_ elements
       });
     });
 
+    describe('Lists', () => {
+      it('should render lists', () => {
+        const value = `
+1. ol item 1
+1. ol item 2
+  * Sublist 1
+  * Sublist 2
+  * Sublist 3
+    1. Sub-Sublist 1
+    1. Sub-Sublist 2
+    1. Sub-Sublist 3
+1. ol item 3
+`;
+        const component = shallow(
+          <MarkitupReactRenderer
+              value={value}
+              syntax={markdownSyntax}
+          />
+        );
+        const tree = component.html();
+        expect(tree).toMatchSnapshot();
+      });
+    });
+
     describe('Links', () => {
       it('should render links', () => {
         const value = `

src/components/Widgets/__tests__/__snapshots__/MarkitupReactRenderer.spec.js.snap

@@ -1,7 +1,9 @@
-exports[`MarkitupReactRenderer should render HTML 1`] = `"<article><p>Paragraph with <em>inline</em> element</p></article>"`;
+exports[`MarkitupReactRenderer HTML rendering should render HTML 1`] = `"<article><p>Paragraph with <em>inline</em> element</p></article>"`;
 
-exports[`MarkitupReactRenderer should render HTML as is using Markdown 1`] = `"<article><h1>Title</h1></article>"`;
+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 alt=\"alt text\" src=\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\"/></p><h6>H6</h6></article>"`;
 
-exports[`MarkitupReactRenderer 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 alt=\"alt text\" src=\"https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg\"/></p><h6>H6</h6></article>"`;
+exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is using Markdown 1`] = `"<article><h1>Title</h1></article>"`;
 
-exports[`MarkitupReactRenderer should support custom syntax 1`] = `"<article></article>"`;
+exports[`MarkitupReactRenderer Markdown rendering Lists should render lists 1`] = `"<article><ol><li>ol item 1</li><li>ol item 2<ul><li>Sublist 1</li><li>Sublist 2</li><li>Sublist 3<ol><li>Sub-Sublist 1</li><li>Sub-Sublist 2</li><li>Sub-Sublist 3</li></ol></li></ul></li><li>ol item 3</li></ol></article>"`;
+
+exports[`MarkitupReactRenderer custom elements should support custom syntax 1`] = `"<article></article>"`;