Issue 250 - Support for rendering links inside dcc.Markdown as dcc.Link

package.json

@@ -78,6 +78,7 @@
     "prettier": "^1.14.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-jsx-parser": "^1.21.0",
     "style-loader": "^0.23.1",
     "styled-jsx": "^3.1.1",
     "webpack": "^4.37.0",
@@ -91,4 +92,4 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   }
-}
+}

src/fragments/Markdown.react.js

@@ -1,10 +1,13 @@
 import React, {Component} from 'react';
 import {type} from 'ramda';
+import JsxParser from 'react-jsx-parser';
 import Markdown from 'react-markdown';
 
 import {propTypes, defaultProps} from '../components/Markdown.react';
 import '../components/css/highlight.css';
 
+import DccLink from './../components/Link.react';
+
 export default class DashMarkdown extends Component {
     constructor(props) {
         super(props);
@@ -85,6 +88,10 @@ export default class DashMarkdown extends Component {
         const displayText =
             dedent && textProp ? this.dedent(textProp) : textProp;
 
+        const componentTransforms = {
+            DccLink: props => <DccLink {...props} />,
+        };
+
         return (
             <div
                 id={id}
@@ -110,6 +117,14 @@ export default class DashMarkdown extends Component {
                 <Markdown
                     source={displayText}
                     escapeHtml={!dangerously_allow_html}
+                    renderers={{
+                        html: props => (
+                            <JsxParser
+                                jsx={props.value}
+                                components={componentTransforms}
+                            />
+                        ),
+                    }}
                 />
             </div>
         );

webpack.config.js

@@ -58,7 +58,7 @@ module.exports = (env, argv) => {
             rules: [
                 {
                     test: /\.jsx?$/,
-                    exclude: /node_modules/,
+                    exclude: /node_modules\/(?!react-jsx-parser\/)/,
                     use: {
                         loader: 'babel-loader',
                     },