React-markdown: Is it possible to customize rendering of anchor elements?

[togakangaroo]

I have a situation where the Markdown is rendered inside of a div with contenteditable="true". This isn't as dumb as it sounds - I simply need the view to be focus-able and tab-able, once it gains focus the component actually transforms into a completely different view.

The problem I am having is that if I am rendering markdown that contains a link, it is not clickable. Links inside of contenteditable="true" are not triggered unless they have contenteditable="false" as an attribute. I have verified that indeed this works, but now I need to modify react-markdown to spit out this extra attribute on all anchor links.

Is there anything built in that would allow me to extend react-markdown to add contenteditable="false" to all anchor tags?

[rexxars]

Sure, just pass a different renderer for the link-type:

<ReactMarkdown
  source="... some markdown ..."
  renderers={{link: props => <a {...props} contentEditable="false" />}}
/>

[erosenberg]

Is it possible to pass other props into the link renderer?
For instance, what if I only want to style links with a specific data-attribute?

And on that same note, I'm having some issues rendering HTML and not sure if it's related to anything in this thread or if it's a config issue, but when I go to render the following as my source,

<a href="https://en.wikipedia.org/wiki/HTML" data-target="post-link">HTML Text</a>

and this is rendered instead...

<p>
    <a href="https://en.wikipedia.org/wiki/HTML" data-target="post-link"></a>HTML Text
</p>

Why is the "HTML Text" rendered outside of the anchor tag and not in between like I specified in my markdown?