import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
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="${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,
};