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"