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

CHANGELOG.md

@@ -4,6 +4,7 @@ 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` (dccLink) and nested `dcc.Markdown` (dccMarkdown) react components inside of `dcc.Markdown`
 - [#706](https://github.com/plotly/dash-core-components/pull/706)
  - Added new `responsive` property that overrides the underlying Plotly.js graph responsiveness from Dash-land
  - Added responsiveness on graph parent element resize (previously only worked on window.resize)

package.json

@@ -85,6 +85,8 @@
  "prettier": "^1.14.2",
  "react": "^16.8.6",
  "react-dom": "^16.8.6",
+ "react-jsx-parser": "^1.21.0",
+ "react-resize-detector": "^4.2.1",
  "style-loader": "^0.23.1",
  "styled-jsx": "^3.1.1",
  "terser-webpack-plugin": "^2.3.0",

src/fragments/Markdown.react.js

@@ -1,10 +1,13 @@
 import React, {Component} from 'react';
-import {type} from 'ramda';
+import {mergeDeepRight, pick, type} from 'ramda';
+import JsxParser from 'react-jsx-parser';
 import Markdown from 'react-markdown';
 
 import MarkdownHighlighter from '../utils/MarkdownHighlighter';
 import {propTypes, defaultProps} from '../components/Markdown.react';
 
+import DccLink from './../components/Link.react';
+
 export default class DashMarkdown extends Component {
  constructor(props) {
  super(props);
@@ -91,6 +94,18 @@ export default class DashMarkdown extends Component {
  const displayText =
  dedent && textProp ? this.dedent(textProp) : textProp;
 
+ const componentTransforms = {
+ dccLink: props => <DccLink {...props} />,
+ dccMarkdown: props => (
+ <Markdown
+ {...mergeDeepRight(
+ pick(['dangerously_allow_html', 'dedent'], this.props),
+ pick(['children'], props)
+ )}
+ />
+ ),
+ };
+
  return (
  <div
  id={id}
@@ -116,6 +131,18 @@ export default class DashMarkdown extends Component {
  <Markdown
  source={displayText}
  escapeHtml={!dangerously_allow_html}
+ renderers={{
+ html: props =>
+ props.escapeHtml ? (
+ props.value
+ ) : (
+ <JsxParser
+ jsx={props.value}
+ components={componentTransforms}
+ renderInWrapper={false}
+ />
+ ),
+ }}
  />
  </div>
  );

tests/integration/markdown/test_markdown.py

@@ -0,0 +1,98 @@
+import os
+import pytest
+from selenium.common.exceptions import WebDriverException
+
+import dash
+from dash.dependencies import Input, Output
+import dash_core_components as dcc
+import dash_html_components as html
+
+
+def test_mkdw001_img(dash_dcc):
+ app = dash.Dash(__name__, eager_loading=True)
+
+ app.layout = html.Div(
+ [
+ html.Div('Markdown img'),
+ dcc.Markdown(
+ ['<img src="assets/image.png" />'], dangerously_allow_html=True
+ ),
+ html.Div('Markdown img - requires dangerously_allow_html'),
+ dcc.Markdown(['<img src="assets/image.png" />']),
+ ]
+ )
+
+ dash_dcc.start_server(app)
+ dash_dcc.percy_snapshot("mkdw001 - image display")
+
+
+def test_mkdw002_dcclink(dash_dcc):
+ app = dash.Dash(__name__, eager_loading=True)
+
+ app.layout = html.Div(
+ [
+ html.Div(['Markdown link']),
+ dcc.Markdown(['[Title](title_crumb)']),
+ html.Div(['Markdown dccLink']),
+ dcc.Markdown(
+ ['<dccLink href="title_crumb" children="Title" />'],
+ dangerously_allow_html=True,
+ ),
+ html.Div(['Markdown dccLink - explicit children']),
+ dcc.Markdown(
+ [
+ '''
+ <dccLink href="title_crumb">
+ Title
+ </dccLink>
+ '''
+ ],
+ dangerously_allow_html=True,
+ ),
+ html.Div('Markdown dccLink = inlined'),
+ dcc.Markdown(
+ [
+ 'This is an inlined <dccLink href="title_crumb" children="Title" /> with text on both sides'
+ ],
+ dangerously_allow_html=True,
+ ),
+ html.Div('Markdown dccLink - nested image'),
+ dcc.Markdown(
+ [
+ '''
+ <dccLink href="title_crumb">
+ <img src="assets/image.png" />
+ </dccLink>
+ '''
+ ],
+ dangerously_allow_html=True,
+ ),
+ html.Div('Markdown dccLink - nested markdown'),
+ dcc.Markdown(
+ [
+ '''
+ <dccLink href="title_crumb">
+ <dccMarkdown children="## Title" />
+ </dccLink>
+ '''
+ ],
+ dangerously_allow_html=True,
+ ),
+ html.Div('Markdown dccLink - nested markdown image'),
+ dcc.Markdown(
+ [
+ '''
+ <dccLink href="title_crumb">
+ <dccMarkdown children="![Image](assets/image.png)" />
+ </dccLink>
+ '''
+ ],
+ dangerously_allow_html=True,
+ ),
+ html.Div('Markdown dccLink - requires dangerously_allow_html'),
+ dcc.Markdown(['<dccLink href="title_crumb" children="Title" />']),
+ ]
+ )
+
+ dash_dcc.start_server(app)
+ dash_dcc.percy_snapshot("mkdw002 - markdowns display")

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