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

[Marc-Andre-Rivet]

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]

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

[Marc-Andre-Rivet]

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

[chriddyp]

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]

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

[chriddyp]

I like it. Nice general solution. 💃

[chriddyp]

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]

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]

Sorry @sudburyrob I meant to tag @rpkyle

[Marc-Andre-Rivet]

@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]

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.

[Marc-Andre-Rivet]

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]

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]

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]

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.

[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.