feat(HTML): Added support for Remarkables html: true option.

React requires a container to insert HTML into, by default this has been set to a `div` element. This can be configured by setting the `html` component inside the renderer options. See README.
HHogg · Mar 1, 2018 · 53f66da · 53f66da
1 parent a903476
commit 53f66da
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -65,7 +65,7 @@ new RemarkableReactRenderer({
     align: '',    // Default: Function that remaps to style. (For tables)
     alt: '',      // Default: true (for images)
     block: '',    // Default: false
-    content: '',  // Default: false
+    content: '',  // Default: Function that returns `dangerouslySetInnerHTML` when HTML is enabled.
     hLevel:'',    // Default: false
     href:'',      // Default: true (for links)
     level: '',    // Default: false
@@ -98,6 +98,7 @@ new RemarkableReactRenderer({
     h4: Component,          // Default: <h4 />
     h5: Component,          // Default: <h5 />
     h6: Component,          // Default: <h6 />
+    html: Component,        // Default: <div />
     img: Component,         // Default: <img />
     ins: Component,         // Default: <ins />
     li: Component,          // Default: <li />

diff --git a/demo/demo.js b/demo/demo.js
@@ -25,6 +25,7 @@ class Demo extends Component {
 
     /* eslint-disable no-empty */
     const remarkable = new Remarkable({
+      html: true,
       highlight: function (str, lang) {
         if (lang && HighlightJS.getLanguage(lang)) {
           try {

diff --git a/demo/demo.md b/demo/demo.md
@@ -133,3 +133,8 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 
 ![Minion](https://octodex.github.com/images/minion.png)
 ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+
+## HTML
+
+<p class="paragraph">HTML Paragraph</p>
diff --git a/src/renderer.js b/src/renderer.js
@@ -20,6 +20,7 @@ const defaultComponents = {
   h5: 'h5',
   h6: 'h6',
   hr: 'hr',
+  html: 'div',
   img: 'img',
   ins: 'ins',
   li: 'li',
@@ -46,12 +47,17 @@ const defaultRemarkableProps = {
   }) : false,
   alt: true,
   block: false,
-  content: false,
+  content: (content, type) => type === 'html' && ({
+    key: 'dangerouslySetInnerHTML',
+    value: { __html: content }
+  }),
   hLevel: false,
   href: true,
   level: false,
   lines: false,
-  linkTarget: (target, type) => type === 'a' && ({ key: 'target' }),
+  linkTarget: (target, type) => type === 'a' && ({
+    key: 'target'
+  }),
   order: false,
   params: false,
   src: true,
@@ -70,6 +76,7 @@ const defaultTokens = {
   hardbreak: 'br',
   heading_open: (token) => `h${token.hLevel}`,
   hr: 'hr',
+  htmlblock: (_, { html }) => html && 'html',
   image: 'img',
   ins_open: 'ins',
   link_open: 'a',

diff --git a/src/token-tree-builder.js b/src/token-tree-builder.js
@@ -31,7 +31,7 @@ const buildToken = (tokenMap, token, options) => {
   return {
     type,
     props: token,
-    children: token.content,
+    children: options.html && type === 'html' ? null : token.content,
   };
 }
 

diff --git a/test/renderer.test.js b/test/renderer.test.js
@@ -940,6 +940,37 @@ Paragraph
         }]);
       });
     });
+
+    describe('html', () => {
+      const fixture = `
+
+  <p>Hello</p>
+  <iframe src="/something.html" />
+
+  `;
+
+      it('default', () => {
+        assertStructure(render(fixture, {
+          html: true,
+        }, {}), [{
+          type: 'div',
+          children: [],
+        }]);
+      });
+
+      it('custom', () => {
+        assertStructure(render(fixture, {
+          html: true,
+        }, {
+          components: {
+            html: 'p',
+          },
+        }), [{
+          type: 'p',
+          children: [],
+        }]);
+      });
+    });
   });
 
   describe('tokens', () => {
@@ -1017,20 +1048,39 @@ Paragraph
           }]);
         });
 
-        it('[content]', () => {
-          assertProps(render(`
+        describe('[content]', () => {
+          it('default', () => {
+            assertProps(render(`
 
 \`Code\`
 
-          `), [{
-            children: [{
+            `), [{
+              children: [{
+                props: {
+                  content: undefined,
+                },
+              }],
+            }]);
+          });
+
+          it('with html', () => {
+            assertProps(render(`
+
+<p>Hello</p>
+<iframe src="/something.html" />
+
+            `, { html: true }), [{
               props: {
-                content: undefined,
+                children: null,
+                dangerouslySetInnerHTML: {
+                  __html: '<p>Hello</p>\n<iframe src="/something.html" />\n'
+                },
               },
-            }],
-          }]);
+            }]);
+          });
         });
 
+
         it('[hLevel]', () => {
           assertProps(render(`