diff --git a/client/coral-plugin-infobox/InfoBox.js b/client/coral-plugin-infobox/InfoBox.js
index db2ea22c4..dd94cfecd 100644
--- a/client/coral-plugin-infobox/InfoBox.js
+++ b/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}) =>
- {content}
+ className={`${packagename}-info ${enable ? '' : 'hidden'}` }>
+
;
export default InfoBox;
diff --git a/client/coral-plugin-infobox/Markdown.js b/client/coral-plugin-infobox/Markdown.js
new file mode 100644
index 000000000..59b63bcb0
--- /dev/null
+++ b/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 ) =>
+ `${text}`;
+
+marked.setOptions({renderer});
+
+export default class Markdown extends PureComponent {
+ render() {
+ const {content, ...rest} = this.props;
+ const __html = marked(content);
+ return ;
+ }
+}
+
+Markdown.propTypes = {
+ content: PropTypes.string,
+};
+
diff --git a/client/coral-plugin-infobox/__tests__/infoBox.spec.js b/client/coral-plugin-infobox/__tests__/infoBox.spec.js
index b8b761489..42e57f292 100644
--- a/client/coral-plugin-infobox/__tests__/infoBox.spec.js
+++ b/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();
+
describe('InfoBox', () => {
- let comment;
- let render;
- beforeEach(() => {
- comment = {};
- const postItem = (item) => {
- comment.posted = item;
- return Promise.resolve(4);
- };
- render = shallow( 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(' {
+ 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');
});
});
diff --git a/client/coral-plugin-infobox/__tests__/markdown.spec.js b/client/coral-plugin-infobox/__tests__/markdown.spec.js
new file mode 100644
index 000000000..8679a8322
--- /dev/null
+++ b/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();
+
+describe('Markdown', () => {
+ it('should convert Markdown to html', () => {
+ const wrapper = render({content: '*test*'});
+ const html = wrapper.html();
+ expect(html).to.contain('');
+ });
+
+ 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"');
+ });
+});
diff --git a/package.json b/package.json
index 1567cca75..80c0f88cd 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 1cb1e0f6e..93f9d44af 100644
--- a/yarn.lock
+++ b/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"