Markdown links do not work after using JSX in the same line

[Farrser]

🐛 Bug Report

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.

Description

After using a JSX component, it is not possible to use markdown links within the same line. The plain markdown text is shown instead.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

https://codesandbox.io/s/link-bug-99smz
Navigate to the docs page /docs/intro

(Write your steps here:)

1. Use a JSX component e.g. <tag>jsx</tag>
2. Use a markdown link in the same line [link](page.md)
3. The link is not rendered as a link

Expected behavior

The link would be a clickable link as usual.

Actual Behavior

The link was not converted to HTML

Reproducible Demo

https://codesandbox.io/s/link-bug-99smz
Navigate to the docs page /docs/intro

[slorber]

So, your doc is:

---
sidebar_position: 1
---

# Example

export const Hello = function() {
return <span>Hello</span>
}

<Hello />! [link](./tutorial-basics/create-a-page.md) <Hello />!

It also fails in the MDX playground: https://mdxjs.com/playground/

It is not a Docusaurus bug, but a MDX limitation, and you should discuss that on the MDX repo instead.

---

You can use a <a> tag instead, not sure there's another solution if you want everything on the same line

If you don't mind having a line break (additional markdown paragraph), it's still possible to interleave markdown inside mdx by using line breaks:

# Example

export const Hello = function({children}) {
  return (
    <>
      <span>Hello</span>
      {children}
      <span>Hello</span>
    </>
  );
}

<Hello>

[link](./tutorial-basics/create-a-page.md)

</Hello>

We use something like that to display code blocks in tabs for example:
https://docusaurus.io/docs/markdown-features/code-blocks#multi-language-support-code-blocks

[slorber]

Something worth mentionning: using text before your JSX will make MDX work 😅 not sure how to remove the text prefix

Hey <Hello />! [link](./tutorial-basics/create-a-page.md) <Hello />!

[Farrser]

@slorber Ah good to know. It seems that   at the start of the line is enough to fix it, so I will do that. Definitely sounds like a bug in MDX though so I have opened an issue on the MDX repo

[ChristianMurphy]

This is how MDX 1 is intended to work (more context at mdx-js/mdx#1571 (comment)).
MDX 2 changes the behavior, if docusaurus wants the new behavior, this can be addressed with #4029