Issue 250 - Support for rendering links inside dcc.Markdown as dcc.Link (#711)

Author: Marc-Andre-Rivet

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)

MANIFEST.in

@@ -1,8 +1,9 @@
 include dash_core_components/dash_core_components.min.js
 include dash_core_components/dash_core_components.min.js.map
+include dash_core_components/dash_core_components-shared.js
+include dash_core_components/dash_core_components-shared.js.map
 include dash_core_components/async~*.js
 include dash_core_components/async~*.js.map
-include dash_core_components/highlight.pack.js
 include dash_core_components/metadata.json
 include dash_core_components/package-info.json
 include dash_core_components/plotly.min.js

babel.config.js

@@ -4,9 +4,7 @@ const presets = [
 ];
 
 const plugins = [
-    '@babel/plugin-syntax-dynamic-import',
-    '@babel/plugin-transform-async-to-generator',
-    '@babel/plugin-transform-runtime'
+    '@babel/plugin-syntax-dynamic-import'
 ];
 
 // eslint-disable-next-line no-process-env

dash_core_components_base/__init__.py

@@ -88,6 +88,23 @@
         'namespace': 'dash_core_components',
         'dynamic': True
     },
+    {
+        'relative_package_path': '{}-shared.js'.format(__name__),
+        'external_url': (
+            'https://unpkg.com/dash-core-components@{}'
+            '/dash_core_components/dash_core_components-shared.js'
+        ).format(__version__),
+        'namespace': 'dash_core_components'
+    },
+    {
+        'relative_package_path': '{}-shared.js.map'.format(__name__),
+        'external_url': (
+            'https://unpkg.com/dash-core-components@{}'
+            '/dash_core_components/dash_core_components-shared.js.map'
+        ).format(__version__),
+        'namespace': 'dash_core_components',
+        'dynamic': True
+    },
     {
         'relative_package_path': 'plotly.min.js',
         'external_url': (

package-lock.json

@@ -58,8 +58,6 @@
     "@babel/core": "^7.4.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-async-to-generator": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
     "@plotly/dash-component-plugins": "^1.0.2",
@@ -85,6 +83,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",

package.json

@@ -270,7 +270,7 @@ class PlotlyGraph extends Component {
         );
     }
 
-    async graphResize(force = false) {
+    graphResize(force = false) {
         if (!force && !this.isResponsive(this.props)) {
             return;
         }

src/fragments/Graph.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>
         );

src/fragments/Markdown.react.js

@@ -1,10 +1,12 @@
 import lazyhljs from './LazyLoader/hljs';
 
 const MarkdownHighlighter = {
-    loadhljs: async function() {
-        this.hljs = await lazyhljs();
-        this.hljsResolve();
-        this.isReady = true;
+    loadhljs: function() {
+        return lazyhljs().then(hljs => {
+            this.hljs = hljs;
+            this.hljsResolve();
+            this.isReady = true;
+        });
     },
 };