Get markdown rendering in blocks

Author: Dom Harrington

packages/api-explorer-ui/lib/create-docs.js

@@ -32,7 +32,7 @@ module.exports = (oas, apiSetting) => {
           body: `
           [block:textarea]
           {
-            "text": "This is text area"
+            "text": "# This is text area"
           }
           [/block]
           [block:html]
@@ -82,7 +82,7 @@ module.exports = (oas, apiSetting) => {
                   1136,
                   "#9e918d"
                 ],
-                "caption": "doggo"
+                "caption": "*doggo*"
               }
             ]
           }
@@ -108,7 +108,7 @@ module.exports = (oas, apiSetting) => {
           [block:parameters]
           {
             "data": {
-              "0-0": "arbitrary",
+              "0-0": "*arbitrary*",
               "0-1": "info",
               "0-2": "test",
               "h-0": "test",

packages/api-explorer-ui/src/block-types/Image.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-// const Marked = require('../lib/marked');
+const markdown = require('../lib/markdown');
 
 const ImageBlock = ({ block }) => {
   const myImage = block.data.images.map((image, i) => {
@@ -23,14 +23,8 @@ const ImageBlock = ({ block }) => {
               </a>
             </figure>
             {image.caption && (
-              <figcaption>
-                <p>
-                  {
-                    // TODO add marked
-                    image.caption
-                  }
-                </p>
-              </figcaption>
+              // eslint-disable-next-line react/no-danger
+              <figcaption dangerouslySetInnerHTML={{ __html: markdown(image.caption) }} />
             )}
           </div>
         )}

packages/api-explorer-ui/src/block-types/Parameters.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-// import Marked from '../lib/marked';
+const markdown = require('../lib/markdown');
 
 const Parameters = ({ block }) => {
   const columns = block.data.cols;
@@ -23,10 +23,8 @@ const Parameters = ({ block }) => {
 
     for (let c = 0; c < columns; c += 1) {
       tdCells.push(
-        <div className="td" key={c}>
-          {// TODO add marked
-          block.data.data[`${r}-${c}`] || ''}
-        </div>,
+        // eslint-disable-next-line react/no-danger
+        <div className="td" key={c} dangerouslySetInnerHTML={{ __html: markdown(block.data.data[`${r}-${c}`] || '') }} />
       );
     }
     return tdCells;

packages/api-explorer-ui/src/block-types/TextArea.jsx

@@ -1,15 +1,11 @@
-// import Marked from '../lib/marked';
 const React = require('react');
 const PropTypes = require('prop-types');
+const markdown = require('../lib/markdown');
 
 const Textarea = ({ block }) => {
   return (
-    <div className="magic-block-textarea">
-      {
-        // TODO add marked
-        block.text
-      }
-    </div>
+    // eslint-disable-next-line react/no-danger
+    <div className="magic-block-textarea" dangerouslySetInnerHTML={{ __html: markdown(block.text) }} />
   );
 };