HTML email addresses get rendered as nested links, ignoring `href` attribute
janine-c opened this issue · comments
Have you read the Contributing Guidelines on issues?
- I have read the Contributing Guidelines on issues.
Prerequisites
- I'm using the latest version of Docusaurus.
- I have tried the
npm run clear
oryarn clear
command. - I have tried
rm -rf node_modules yarn.lock package-lock.json
and re-installing packages. - I have tried creating a repro with https://new.docusaurus.io.
- I have read the console error message carefully (if applicable).
Description
When directing users to our support email address, we do so with a link that includes a suggested subject line: <a href="mailto:help@email.com%20%E2%80%9CHelp Docs inquiry%E2%80%9D" class="email">help@email.com</a>
In v2.4.3, the rendered HTML was <a href="mailto:help@email.com%20%E2%80%9CHelp Docs inquiry%E2%80%9D" target="_blank" rel="noopener noreferrer" class="email">help@email.com</a>
In 3.2.0, the rendered HTML is:
<a href="mailto:help@email.com%20%E2%80%9CHelp Docs inquiry%E2%80%9D" class="email">
<a href="mailto:help@email.com" target="_blank" rel="noopener noreferrer">help@email.com</a>
</a>
Reproducible demo
https://codesandbox.io/p/devbox/holy-cdn-f2t8nd?file=%2Fdocs%2Femail-bug-demo.md%3A5%2C119
Steps to reproduce
Add an HTML email link to any topic, like in my example: <a href="mailto:help@email.com%20%E2%80%9CHelp Docs inquiry%E2%80%9D" class="email">help@email.com</a>
To reproduce, there should be an email address in the text of the link, not just in the href
attribute.
Expected behavior
There should only be one link, and it should go to whatever was in the href
attribute, including both the email address and the specified subject line. The link text should be for display only.
Actual behavior
Regardless of what is in the href
attribute, Docusaurus seems to be parsing the link text as the email address it's supposed to show, and is ignoring the href
attribute in its favour, nesting the bad link inside the good link for some reason.
Your environment
- Public source code:
- Public site URL:
- Docusaurus version used: 3.2.0
- Environment name and version (e.g. Chrome 89, Node.js 16.4):
- Operating system and version (e.g. Ubuntu 20.04.2 LTS):
Self-service
- I'd be willing to fix this bug myself.
This is apparently a behavior of GitHub Flavored Markdown, and we use it by default through remark-gfm:
<a href="mailto:help@email.com%20%E2%80%9CHelp Docs inquiry%E2%80%9D" class="email">help@email.com</a>
This gets rendered as this on GitHub:
The email string gets auto-linked which produce a double link. Just writing help@email.com
leads to a link: help@email.com
Notice that in the mdx playground (https://mdxjs.com/playground/), if you keep remark-gfm off, it works as you expect, but not when it's on. Docusaurus uses GFM and we won't plan to diverge from this behavior so I'm going to close.
Apparently you can opt-out of this behavior in MDX by using:
<a href="mailto:help@email.com%20%E2%80%9CHelp Docs inquiry%E2%80%9D" class="email">{"help@email.com"}</a>
Thanks, @slorber , that opt-out syntax was exactly what I needed!