From d59da64bb529771024a4a77eb97a44401eb57263 Mon Sep 17 00:00:00 2001
From: Dom Harrington <dom@harrington-mail.com>
Date: Fri, 19 Jan 2018 16:27:19 -0800
Subject: [PATCH] Add support for markdown in Callout. Fixes #91

---
 .../__tests__/block-types/CallOut.test.jsx    | 24 ++++++++++++++++++-
 .../__snapshots__/CallOut.test.jsx.snap       | 12 ++++++++++
 .../api-explorer/src/block-types/CallOut.jsx  | 17 ++++++++++---
 3 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 packages/api-explorer/__tests__/block-types/__snapshots__/CallOut.test.jsx.snap

diff --git a/packages/api-explorer/__tests__/block-types/CallOut.test.jsx b/packages/api-explorer/__tests__/block-types/CallOut.test.jsx
index bb0d0131a..58a6f4877 100644
--- a/packages/api-explorer/__tests__/block-types/CallOut.test.jsx
+++ b/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();
 });
diff --git a/packages/api-explorer/__tests__/block-types/__snapshots__/CallOut.test.jsx.snap b/packages/api-explorer/__tests__/block-types/__snapshots__/CallOut.test.jsx.snap
new file mode 100644
index 000000000..c8fa04ecf
--- /dev/null
+++ b/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>
+"
+`;
diff --git a/packages/api-explorer/src/block-types/CallOut.jsx b/packages/api-explorer/src/block-types/CallOut.jsx
index 8dddcadcb..ade76a856 100644
--- a/packages/api-explorer/src/block-types/CallOut.jsx
+++ b/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,
 };