Add support for markdown in Callout. Fixes #91

packages/api-explorer/__tests__/block-types/CallOut.test.jsx

@@ -66,5 +66,27 @@ test('should render body', () => {
   };
 
   const callout = shallow(<CallOut block={block} />);
-  expect(callout.find('div.callout-body').text()).toBe('body');
+  expect(
+    callout
+      .render()
+      .find('.callout-body')
+      .html(),
+  ).toMatchSnapshot();
+});
+
+test('should render markdown in body', () => {
+  const block = {
+    data: {
+      type: 'info',
+      body: '# heading\n`test`',
+    },
+  };
+
+  const callout = shallow(<CallOut block={block} />);
+  expect(
+    callout
+      .render()
+      .find('.callout-body')
+      .html(),
+  ).toMatchSnapshot();
 });

packages/api-explorer/__tests__/block-types/__snapshots__/CallOut.test.jsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render body 1`] = `
+"<p>body</p>
+"
+`;
+
+exports[`should render markdown in body 1`] = `
+"<h1 class=\\"header-scroll\\"><div class=\\"anchor waypoint\\" id=\\"section-heading\\"></div>heading<a class=\\"fa fa-anchor\\" href=\\"#section-heading\\"></a></h1>
+<p><code>test</code></p>
+"
+`;

packages/api-explorer/src/block-types/CallOut.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-// import Marked from '../lib/marked';
+const markdown = require('../lib/markdown');
 
 function Icon({ type }) {
   switch (type) {
@@ -17,7 +17,7 @@ function Icon({ type }) {
   }
 }
 
-const CallOut = ({ block }) => {
+const CallOut = ({ block, flags }) => {
   return (
     <div
       className={`magic-block-callout type-${block.data.type} ${block.data.title
@@ -36,7 +36,15 @@ const CallOut = ({ block }) => {
           <Icon type={block.data.type} />
         </span>
       )}
-      {block.data && block.data.body && <div className="callout-body">{block.data.body}</div>}
+      {/* eslint-disable react/no-danger */}
+      {block.data &&
+      block.data.body && (
+        <div
+          className="callout-body"
+          dangerouslySetInnerHTML={{ __html: markdown(block.data.body, flags) }}
+        />
+      )}
+      {/* eslint-enable react/no-danger */}
     </div>
   );
 };
@@ -49,8 +57,11 @@ CallOut.propTypes = {
       body: PropTypes.string,
     }),
   }).isRequired,
+  flags: PropTypes.shape({}),
 };
 
+CallOut.defaultProps = { flags: {} };
+
 Icon.propTypes = {
   type: PropTypes.string.isRequired,
 };