HTML email addresses get rendered as nested links, ignoring `href` attribute

janine-c commented 7 months ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] I have tried the npm run clear or yarn clear command.
[X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[X] I have tried creating a repro with https://new.docusaurus.io.
[X] 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.

slorber commented 7 months ago

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:

help@email.com

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>

janine-c commented 7 months ago

Thanks, @slorber , that opt-out syntax was exactly what I needed!

facebook / docusaurus