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

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- [#711](https://github.com/plotly/dash-core-components/pull/711) Added support for `dcc.Link` react component inside of `dcc.Markdown`
+
 ## [1.6.0] - 2019-11-27
 ### Updated
 - Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)

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',
  },