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

Marc-Andre-Rivet · 2019-12-03T01:08:57Z

Fixes #250

Adds additional node type for dcc.Link (vs. link) and the general mechanism to extend markdown syntax with any React Component of our choosing. Leaves the existing link syntax untouched.

~~Works as-is, no need to set dangerously_allow_html=True -- which I'm not sure makes sense? Need to investigate / make sure we're not doing something wrong..~~

Requires dangerously_allow_html=True to work correctly.

Todo

changelog
tests (dccLink w/ & w/o dangerouslySetInnerHtml, link works, html child/text, img child, dcc.Link vs link styling, inline dccLink, etc.)
docs (https://github.com/plotly/dash-docs/issues/721) -- tagged for v1.8 also

import dash
import dash_core_components as dcc

app = dash.Dash(__name__)
app.layout = dcc.Markdown("""
    # Link
    [Outside Link](https://www.google.com)
    # DCC Link!
    <dccLink href="potato" children="potato" />
    <dccLink href="with_gravy" children="with gravy" />
""")

app.run_server(debug=True)

Marc-Andre-Rivet · 2019-12-03T01:09:39Z

webpack.config.js

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


Sadly not transpiled to ES5 so needs to be re-transpiled.

Marc-Andre-Rivet · 2019-12-03T01:12:26Z

src/fragments/Markdown.react.js

@@ -85,6 +88,10 @@ export default class DashMarkdown extends Component {
        const displayText =
            dedent && textProp ? this.dedent(textProp) : textProp;

+        const componentTransforms = {
+            DccLink: props => <DccLink {...props} />,
+        };


Here we define the list of components we want to support are their name in markdown + props customization as needed.

chriddyp · 2019-12-03T01:28:59Z

Very cool syntax. Should we do <DccLink or <dccLink? The latter is similar to the Python and R (cc ~~@sudburyrob~~ @rpkyle ) syntax but maybe less semantic in terms of XML

chriddyp · 2019-12-03T01:30:14Z

src/fragments/Markdown.react.js

@@ -110,6 +117,14 @@ export default class DashMarkdown extends Component {
                <Markdown
                    source={displayText}
                    escapeHtml={!dangerously_allow_html}
+                    renderers={{
+                        html: props => (


should we toss in a danderous HTML / XSS test for future sanity?

chriddyp · 2019-12-03T01:30:50Z

I like it. Nice general solution. 💃

chriddyp · 2019-12-03T01:31:58Z

Does this work?

<DccLink href="/lahlah">
Test
</DccLink>

Also, does this work?

<DccLink href="/lahlah">
![Alt text for an image](https://plot.ly~chris/1638.png)
</DccLink>

What about this?

<DccLink href="/lahlah" children="![Alt text for an image](https://plot.ly~chris/1638.png)">
</DccLink>

chriddyp · 2019-12-03T01:34:11Z

Also could we do a image test that our CSS is OK? That is, that inline dcc.Link is rendered the same way as an inline markdown link?

This is a [regular html link](/test) within a line of text.

This is a <DccLink href="/test">special dcc link</DccLink> within a line of text.

You can't tell them apart!

chriddyp · 2019-12-03T01:35:10Z

Sorry @sudburyrob I meant to tag @rpkyle

Marc-Andre-Rivet · 2019-12-03T01:39:07Z

@chriddyp We're in html land now so this does not work:

<DccLink href="/lahlah">
![Alt text for an image](https://plot.ly/~chris/1638.png)
</DccLink>

But this works:

<dccLink href="lots_of_cheese">
    <img src="https://plot.ly/~chris/1638.png"/>
</dccLink>

And this works too

<DccLink href="/lahlah">
Test
</DccLink>

That said, nothing would prevent us from going all in and allowing nested markdowns inside the markdown:

<dccLink href="really_lots_of_cheese">
    <dccMarkdown source="![Alt text for an image](https://plot.ly/~chris/1638.png)" />
</dccLink>

Not advocating this, but... it works... who am I to say nested markdowns shouldn't be a thing? 🤷‍♂️

Marc-Andre-Rivet · 2019-12-03T01:42:27Z

Should we do DccLink or dccLink? The latter is similar to the Python and R

dccLink does make more sense, and it works (does not suffer React's capitalization limitations). Updating.

- add link vs. dccLink tests

- additional html tests - formating & black

Marc-Andre-Rivet · 2019-12-03T19:38:54Z

One difference between using dccLink through the html renderer and link (e.g. [Link](/link-path)) gets wrapped in a <p>...</p> along with everything else in the line.

chriddyp · 2019-12-03T19:43:01Z

Another nice enhancement (down the line) would be to enable end users to specify the properties of their html.A like target="blank", so:

dcc.Markdown('''
Long string of text with a <a href="https://plot.ly" target="blank">absolute link</a> in it.
''')

chriddyp · 2019-12-03T19:45:36Z

One difference between using dccLink through the html renderer and link (e.g. Link) gets wrapped in a
...
along with everything else in the line.

Does this mean that using <dccLink/> in markdown will bring the content into a new line rather than keeping it with the text? If so, then that would reduce the ease of use of this enhancement.

Marc-Andre-Rivet · 2019-12-03T19:59:53Z

Does this mean that using in markdown will bring the content into a new line rather than keeping it with the text?

Testing it...

dcc.Markdown(['This is an inlined <dccLink href="title_crumb" children="Title" /> with text on both sides'], dangerously_allow_html=True,),

Currently renders as:

Checking if something can be done about it.

With some tweaking (https://github.com/TroyAlford/react-jsx-parser renderInWrapper=False) now renders html without a wrapper, so the above is now:

Added a test for the inline case.

- add inline test

alexcjohnson

For dash-docs this will work fine - we can update reusable_components.Markdown to automatically convert [title](url) to <dccLink children="title" href="url" /> or whatever, and add dangerously_allow_html=True. Given that this implementation is pretty easy (and done), let's put it in 💃(once tests pass again)

If anyone else besides dash-docs is interested in this, we still may want to explore a syntax like [title](%url) that should work without dangerously_allow_html and should allow markdown within the link text without re-wrapping it.

…ponents#711

support dcc.link in markdown

39c5524

Marc-Andre-Rivet commented Dec 3, 2019

View reviewed changes

changelog

31ff730

Marc-Andre-Rivet marked this pull request as ready for review December 3, 2019 01:27

Marc-Andre-Rivet requested a review from alexcjohnson as a code owner December 3, 2019 01:27

Marc-Andre-Rivet requested a review from chriddyp December 3, 2019 01:27

chriddyp reviewed Dec 3, 2019

View reviewed changes

Marc-Andre-Rivet and others added 5 commits December 2, 2019 20:43

rename to dccLink

ff282f3

- add support for nested dccMarkdown

a2df8b1

- add link vs. dccLink tests

black

814227e

eager loading

c85a9a0

- escape html if dangerously_allow_html==False

19cffd3

- additional html tests - formating & black

Marc-Andre-Rivet added this to the Dash v1.8 milestone Dec 3, 2019

update changelog

b2fc924

Marc-André Rivet added 4 commits December 3, 2019 15:19

- remove jsx wrapper

eeffbbb

- add inline test

update snapshot name

9db2a08

correctly assign assets folder

8924637

move assets

4fefe13

Marc-Andre-Rivet added 6 commits December 12, 2019 15:23

Update CHANGELOG.md

ce2cba3

Merge branch 'dev' into 250-markdown-link

6fb5a0a

Merge branch 'dev' into 250-markdown-link

8c3a57c

Merge branch 'dev' into 250-markdown-link

e79f453

Merge branch 'dev' into 250-markdown-link

4c41f86

Merge branch 'dev' into 250-markdown-link

4e3c613

alexcjohnson approved these changes Jan 7, 2020

View reviewed changes

Marc-André Rivet added 6 commits January 8, 2020 12:46

transpile react-jsx-parser / override provided babel options

1d771a2

slight test improvement - make sure there is a code block

d9e7654

update build to chunk out resources shared by async and initial chunks

b731fe1

lint

05778a4

update manifest

b487931

fix regression

959a11c

Marc-Andre-Rivet merged commit 718ae50 into dev Jan 9, 2020

Marc-Andre-Rivet deleted the 250-markdown-link branch January 9, 2020 13:55

alexcjohnson mentioned this pull request Jan 30, 2020

[BUG] Breaking change in Markdown between Dash 1.7 and 1.8 #746

Open

chriddyp mentioned this pull request Jun 2, 2020

<dccLink-like links in markdown in cells plotly/dash-table#786

Open

hdoupe added a commit to hdoupe/ccc-widget that referenced this pull request Aug 10, 2020

Fix links using idea from dcclink discussed here plotly/dash-core-com…

83e0216

…ponents#711

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Marc-Andre-Rivet commented Dec 3, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 3, 2019

Marc-Andre-Rivet Dec 3, 2019 •

edited

Loading

chriddyp commented Dec 3, 2019 •

edited

Loading

chriddyp Dec 3, 2019

chriddyp commented Dec 3, 2019

chriddyp commented Dec 3, 2019 •

edited

Loading

chriddyp commented Dec 3, 2019

chriddyp commented Dec 3, 2019

Marc-Andre-Rivet commented Dec 3, 2019 •

edited

Loading

Marc-Andre-Rivet commented Dec 3, 2019

Marc-Andre-Rivet commented Dec 3, 2019

chriddyp commented Dec 3, 2019

chriddyp commented Dec 3, 2019

Marc-Andre-Rivet commented Dec 3, 2019 •

edited

Loading

alexcjohnson left a comment

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

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

Conversation

Marc-Andre-Rivet commented Dec 3, 2019 • edited Loading

Marc-Andre-Rivet Dec 3, 2019

Choose a reason for hiding this comment

Marc-Andre-Rivet Dec 3, 2019 • edited Loading

Choose a reason for hiding this comment

chriddyp commented Dec 3, 2019 • edited Loading

chriddyp Dec 3, 2019

Choose a reason for hiding this comment

chriddyp commented Dec 3, 2019

chriddyp commented Dec 3, 2019 • edited Loading

chriddyp commented Dec 3, 2019

chriddyp commented Dec 3, 2019

Marc-Andre-Rivet commented Dec 3, 2019 • edited Loading

Marc-Andre-Rivet commented Dec 3, 2019

Marc-Andre-Rivet commented Dec 3, 2019

chriddyp commented Dec 3, 2019

chriddyp commented Dec 3, 2019

Marc-Andre-Rivet commented Dec 3, 2019 • edited Loading

alexcjohnson left a comment

Choose a reason for hiding this comment

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

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

Marc-Andre-Rivet commented Dec 3, 2019 •

edited

Loading

Marc-Andre-Rivet Dec 3, 2019 •

edited

Loading

chriddyp commented Dec 3, 2019 •

edited

Loading

chriddyp commented Dec 3, 2019 •

edited

Loading

Marc-Andre-Rivet commented Dec 3, 2019 •

edited

Loading

Marc-Andre-Rivet commented Dec 3, 2019 •

edited

Loading