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)

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.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",

src/fragments/Graph.react.js

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

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>
  );

src/utils/MarkdownHighlighter.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;
+ });
  },
 };
 

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")

tests/integration/misc/test_markdown_highlight.py

@@ -17,6 +17,8 @@ def test_msmh001_no_window_variable(dash_dcc):
  app.layout = html.Div(dcc.Markdown(md_text))
  dash_dcc.start_server(app)
 
+ dash_dcc.wait_for_element('code')
+
  window_hljs = dash_dcc.driver.execute_script('return window.hljs')
  assert window_hljs is None
 

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.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",

src/fragments/Graph.react.js

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

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>
  );

src/utils/MarkdownHighlighter.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;
+ });
  },
 };
 

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")

tests/integration/misc/test_markdown_highlight.py

@@ -17,6 +17,8 @@ def test_msmh001_no_window_variable(dash_dcc):
  app.layout = html.Div(dcc.Markdown(md_text))
  dash_dcc.start_server(app)
 
+ dash_dcc.wait_for_element('code')
+
  window_hljs = dash_dcc.driver.execute_script('return window.hljs')
  assert window_hljs is None
 

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.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",

src/fragments/Graph.react.js

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

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>
  );

src/utils/MarkdownHighlighter.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;
+ });
  },
 };
 

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")

tests/integration/misc/test_markdown_highlight.py

@@ -17,6 +17,8 @@ def test_msmh001_no_window_variable(dash_dcc):
  app.layout = html.Div(dcc.Markdown(md_text))
  dash_dcc.start_server(app)
 
+ dash_dcc.wait_for_element('code')
+
  window_hljs = dash_dcc.driver.execute_script('return window.hljs')
  assert window_hljs is None
 

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.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",

src/fragments/Graph.react.js

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

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>
  );

src/utils/MarkdownHighlighter.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;
+ });
  },
 };
 

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")

tests/integration/misc/test_markdown_highlight.py

@@ -17,6 +17,8 @@ def test_msmh001_no_window_variable(dash_dcc):
  app.layout = html.Div(dcc.Markdown(md_text))
  dash_dcc.start_server(app)
 
+ dash_dcc.wait_for_element('code')
+
  window_hljs = dash_dcc.driver.execute_script('return window.hljs')
  assert window_hljs is None
 

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.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",

src/fragments/Graph.react.js

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

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>
  );

src/utils/MarkdownHighlighter.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;
+ });
  },
 };
 

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")

tests/integration/misc/test_markdown_highlight.py

@@ -17,6 +17,8 @@ def test_msmh001_no_window_variable(dash_dcc):
  app.layout = html.Div(dcc.Markdown(md_text))
  dash_dcc.start_server(app)
 
+ dash_dcc.wait_for_element('code')
+
  window_hljs = dash_dcc.driver.execute_script('return window.hljs')
  assert window_hljs is None
 

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.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",

src/fragments/Graph.react.js

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

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>
  );

src/utils/MarkdownHighlighter.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;
+ });
  },
 };
 

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")

tests/integration/misc/test_markdown_highlight.py

@@ -17,6 +17,8 @@ def test_msmh001_no_window_variable(dash_dcc):
  app.layout = html.Div(dcc.Markdown(md_text))
  dash_dcc.start_server(app)
 
+ dash_dcc.wait_for_element('code')
+
  window_hljs = dash_dcc.driver.execute_script('return window.hljs')
  assert window_hljs is None
 

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.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",

src/fragments/Graph.react.js

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

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>
  );

src/utils/MarkdownHighlighter.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;
+ });
  },
 };
 

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")

tests/integration/misc/test_markdown_highlight.py

@@ -17,6 +17,8 @@ def test_msmh001_no_window_variable(dash_dcc):
  app.layout = html.Div(dcc.Markdown(md_text))
  dash_dcc.start_server(app)
 
+ dash_dcc.wait_for_element('code')
+
  window_hljs = dash_dcc.driver.execute_script('return window.hljs')
  assert window_hljs is None
 

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.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",

src/fragments/Graph.react.js

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

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>
  );

src/utils/MarkdownHighlighter.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;
+ });
  },
 };
 

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")

tests/integration/misc/test_markdown_highlight.py

@@ -17,6 +17,8 @@ def test_msmh001_no_window_variable(dash_dcc):
  app.layout = html.Div(dcc.Markdown(md_text))
  dash_dcc.start_server(app)
 
+ dash_dcc.wait_for_element('code')
+
  window_hljs = dash_dcc.driver.execute_script('return window.hljs')
  assert window_hljs is None