CHORE Allow markdown component to open links in new tabs

Since the current markdown parsing package has a known issue with
rendering inline html
(rexxars/commonmark-react-renderer#9) which
has been an issue for 3 years+, we need a new markdown package. The
react-markdown package has an option to render links with target="_blank"
so this commit allows the component to pass that option through

packages/core/package.json

@@ -25,8 +25,6 @@
     "@appearhere/react-input-range": "^1.2.0",
     "@appearhere/react-stickynode": "^1.0.1",
     "classnames": "^2.2.5",
-    "commonmark": "^0.28.1",
-    "commonmark-react-renderer": "^4.3.4",
     "dedent": "^0.7.0",
     "file-loader": "^1.1.11",
     "key-mirror": "^1.0.1",
@@ -38,6 +36,7 @@
     "react-autosuggest": "^9.3.4",
     "react-container-query": "^0.11.0",
     "react-html5video": "^2.5.1",
+    "react-markdown": "^4.3.1",
     "react-moment-proptypes": "^1.5.0",
     "react-motion": "^0.5.2",
     "react-on-visible": "^1.5.0",

packages/core/rollup.config.js

@@ -102,8 +102,6 @@ export default {
     'nuka-carousel',
     'classnames',
     'classnames/bind',
-    'commonmark',
-    'commonmark-react-renderer',
     'dedent',
     'es6-symbol',
     'exenv',
@@ -125,6 +123,7 @@ export default {
     'react-container-query',
     'react-dom',
     'react-html5video',
+    'react-markdown',
     'react-moment-proptypes',
     'react-motion',
     'react-on-visible',

packages/core/src/components/Markdown/Markdown.js

@@ -1,35 +1,35 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import CommonMark from 'commonmark';
-import ReactRenderer from 'commonmark-react-renderer';
 import cx from 'classnames';
+import ReactMarkdown from 'react-markdown';
 
 import css from './Markdown.css';
 
-const parser = new CommonMark.Parser();
-const renderer = new ReactRenderer();
-
 export default class Markdown extends Component {
   static propTypes = {
     children: PropTypes.string.isRequired,
     className: PropTypes.string,
     overrideClassname: PropTypes.bool,
+    targetBlank: PropTypes.bool,
   };
 
   static defaultProps = {
     overrideClassname: false,
+    targetBlank: false,
   };
 
   render() {
-    const { children, className, overrideClassname, ...rest } = this.props;
-
-    const ast = parser.parse(children);
+    const { children, className, overrideClassname, targetBlank, ...rest } = this.props;
 
     const props = {
       className: overrideClassname ? className : cx(css.root, className),
       ...rest,
     };
 
-    return React.createElement('div', props, renderer.render(ast));
+    return React.createElement(
+      'div',
+      props,
+      <ReactMarkdown source={children} linkTarget={targetBlank ? "_blank" : "_self"} />
+    );
   }
 }