Support Automatic Link Detection and Hyperlinking

[mayank1513]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

I would like to request support for automatic link detection and hyperlinking in react-markdown. This feature would automatically convert plain text URLs and email addresses into clickable links during the rendering process, without requiring manual Markdown formatting.

Currently, the official alternative requires adding bulky plugins such as remark-gfm.

Solution

Automatic link detection and hyperlinking is a common feature in many markdown parsers and text editors. It enhances user experience by simplifying the process of adding links and ensures that URLs and email addresses are always clickable, improving accessibility and usability.

Create a property autoLink. When this property is set on the ReactMarkdown component, links should be parsed and converted to a tag.

Alternatives

Currently, the official alternative requires adding bulky plugins such as remark-gfm. Another alternative could be using react-markdown-autolink

<Markdown>{autoLinkMd(md)}</Markdown>

This is a tiny library less than 1/2 kB.

[ChristianMurphy]

Welcome @mayank1513 👋 react-markdown supports commonmark out of the box, no more, no less. Autolinks are not part of commonmark.

It could be added through an plugin, like remark-gfm.

bulky plugins

If your top priority is bundle size, and you don't need to customize the syntax tree/content with plugins. Use micromark https://github.com/micromark/micromark

You can shave a lot more than the 10kb that you seem frustrated by currently.

react-markdown-autolink

I appreciate the offer. Regardless of the above thoughts on API structure. I don't think adding a pre alpha (0.0.1) library that was published an hour ago with a single test and no sanitization is such a good idea. 😅

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[mayank1513]

Thanks. One additional thing is that, I had initially used remark-gmf for achieving what I want, but it turned out that, remark-gmf does not detect - and _ at the end of the link.

[ChristianMurphy]

Right that's how auto link detection works on github, see how the autolink is handled below:

https://github.com/micromark/micromark_