Markdown admonition inside TabItem causes MDX compilation to fail

[FoxxMD]

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

Using a markdown admonition (:::tip my content :::) inside <TabItem> in an MDX file causes project compilation to fail due to Expected the closing tag </TabItem> either after the end of directiveContainer (22:1) or another opening tag after the start of directiveContainer (12:9)

Reproducible demo

https://codesandbox.io/p/sandbox/dawn-violet-jns443

Steps to reproduce

1. Create a new docusaurus project
2. Create an mdx file in docs/test.mdx
3. Add code provided below to create a markdown admonition in a <TabItem>
4. Save and try to render the page

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs groupId="configType">
    <TabItem value="a" label="A">
        a test
    </TabItem>
    <TabItem value="b" label="B">

        Some text

        :::tip

            Content in tip

        :::

        More content

    </TabItem>
</Tabs>

Expected behavior

For the page to render.

The page does render if instead of using markdown I use MDX for the admonition IE <Admonition type="tip">... but I should be able to use markdown inside of MDX components.

Actual behavior

Page compilation fails.

Compiled with problems:
ERROR in ./docs/test.mdx
Module build failed (from ./node_modules/@docusaurus/mdx-loader/lib/index.js):
Error: MDX compilation failed for file "/project/workspace/docs/test.mdx"
Cause: Expected the closing tag `</TabItem>` either after the end of `directiveContainer` (22:1) or another opening tag after the start of `directiveContainer` (12:9)
Details:
{
  "column": 5,
  "message": "Expected the closing tag `</TabItem>` either after the end of `directiveContainer` (22:1) or another opening tag after the start of `directiveContainer` (12:9)",
  "line": 20,
  "name": "20:5-20:15",
  "place": {
    "start": {
      "line": 20,
      "column": 5,
      "offset": 300,
      "_index": 10,
      "_bufferIndex": 0
    },
    "end": {
      "line": 20,
      "column": 15,
      "offset": 310,
      "_index": 11,
      "_bufferIndex": -1
    }
  },
  "reason": "Expected the closing tag `</TabItem>` either after the end of `directiveContainer` (22:1) or another opening tag after the start of `directiveContainer` (12:9)",
  "ruleId": "end-tag-mismatch",
  "source": "mdast-util-mdx-jsx"
}

    at Object.mdxLoader (/project/workspace/node_modules/@docusaurus/mdx-loader/lib/loader.js:130:25)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used: 3.4.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Firefox 128, docusaurus generated from playground
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): EndeavourOS Linux x86_64 Kernel 6.9.8-arch1-1

Self-service

• [ ] I'd be willing to fix this bug myself.

[slorber]

cc @wooorm, looks like a bug in remark-directive?

This parses fine:

<div>
  <span>

  :::container

  content

  :::

  </span>
</div>

But this does not due to the indentation:

<div>
  <span>

    :::container

    content

    :::

  </span>
</div>

Unfortunately Prettier MDX does not like the first form.

Surprisingly, these 2 parses fine, and it looks the problem is only on double-nested elements?

<div>

:::container

content

:::

</div>

<div>

  :::container

  content

  :::

</div>

But it fails with 4-space indentation:

<div>

    :::container

    content

    :::

</div>

---

Note that remark-directives tests do not seem to cover these edge cases:

https://github.com/remarkjs/remark-directive/blob/main/test/fixtures/container/input.md

[wooorm]

Smallest reproduction:

<div>
    :::x
    Lipsum.
    :::
</div>

5:1-5:7: Expected the closing tag `</div>` either after the end of `directiveContainer` (6:1) or another opening tag after the start of `directiveContainer` (2:5)

 <div>
     :::x
     Lipsum.
-    :::
+   :::
 </div>

Passes.

Similar bugs have happened before. Normally markdown is sensitive to indent. Here is still has to be, but differently.

[wooorm]

released

[FoxxMD]

Can confirm micromark-extension-directive@3.0.1 fixes the issue in my project :) Thanks for the quick response!

[slorber]

Thanks @wooorm 😄