Support Markdown in Infobox

client/coral-plugin-infobox/InfoBox.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import Markdown from './Markdown';
+
 const packagename = 'coral-plugin-infobox';
 
 const InfoBox = ({enable, content}) =>
 <div
-  className={`${packagename}-info ${enable ? null : ', hidden'}` }>
-  {content}
+  className={`${packagename}-info ${enable ? '' : 'hidden'}` }>
+  <Markdown content={content} />
 </div>;
 
 export default InfoBox;

client/coral-plugin-infobox/Markdown.js

@@ -0,0 +1,23 @@
+import React, {PureComponent, PropTypes} from 'react';
+import marked from 'marked';
+
+const renderer = new marked.Renderer();
+
+// Set link target to `_parent` to work properly in an embed.
+renderer.link = ( href, title, text ) =>
+  `<a target="_parent" href="${href}" title="${title}">${text}</a>`;
+
+marked.setOptions({renderer});
+
+export default class Markdown extends PureComponent {
+  render() {
+    const {content, ...rest} = this.props;
+    const __html = marked(content);
+    return <div {...rest} dangerouslySetInnerHTML={{__html}} />;
+  }
+}
+
+Markdown.propTypes = {
+  content: PropTypes.string,
+};
+

client/coral-plugin-infobox/__tests__/infoBox.spec.js

@@ -3,24 +3,27 @@ import {shallow} from 'enzyme';
 import {expect} from 'chai';
 import InfoBox from '../InfoBox';
 
+const render = props => shallow(<InfoBox {...props} />);
+
 describe('InfoBox', () => {
-  let comment;
-  let render;
-  beforeEach(() => {
-    comment = {};
-    const postItem = (item) => {
-      comment.posted = item;
-      return Promise.resolve(4);
-    };
-    render = shallow(<InfoBox
-      postItem={postItem}
-      updateItem={(e) => comment.text = e.target.value}
-      item_id={'1'}
-      comments={['1', '2', '3']}/>);
+  it('should render hidden InfoBox', () => {
+    const wrapper = render();
+    const className = wrapper.prop('className');
+    expect(className).to.include('-info');
+    expect(className).to.include('hidden');
   });
 
-  it('should render the InfoBox appropriately', () => {
-    expect(render.contains('<div class="InfoBox"')).to.be.truthy;
-    expect(render.contains('<button class="postCommentButton"')).to.be.truthy;
+  it('should render enabled InfoBox', () => {
+    const wrapper = render({enable: true});
+    const className = wrapper.prop('className');
+    expect(className).to.include('-info');
+    expect(className).to.not.include('hidden');
+  });
+
+  it('should render Markdown', () => {
+    const wrapper = render({content: 'x'});
+    const Markddown = wrapper.find('Markdown');
+    expect(Markddown).to.have.length(1);
+    expect(Markddown.prop('content')).to.equal('x');
   });
 });

client/coral-plugin-infobox/__tests__/markdown.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {expect} from 'chai';
+import Markdown from '../Markdown';
+
+const render = props => shallow(<Markdown {...props} />);
+
+describe('Markdown', () => {
+  it('should convert Markdown to html', () => {
+    const wrapper = render({content: '*test*'});
+    const html = wrapper.html();
+    expect(html).to.contain('<em>');
+  });
+
+  it('should set target="_parent" for links', () => {
+    const wrapper = render({content: '[link](https://coralproject.net)'});
+    const html = wrapper.html();
+    expect(html).to.contain('target="_parent"');
+  });
+});

package.json

@@ -74,6 +74,7 @@
     "kue": "^0.11.5",
     "linkify-it": "^2.0.3",
     "lodash": "^4.16.6",
+    "marked": "^0.3.6",
     "metascraper": "^1.0.6",
     "minimist": "^1.2.0",
     "mongoose": "^4.9.1",

yarn.lock

@@ -4792,7 +4792,7 @@ map-stream@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194"
 
-marked@*, marked@^0.3.5:
+marked@*, marked@^0.3.5, marked@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"