Skip to content

mdx-loader should propagate class names from directives to admonition component #11641

@lebalz

Description

@lebalz

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

Admonitions are written through mdx directives. Mdx parses passed class names and provides them in the mdast:

:::info{.important}
:::

gives

{
  "type": "root",
  "children": [
    {
      "type": "containerDirective",
      "name": "info",
      "attributes": {
        "class": "important"
      },
      "children": []
    }
  ]
}

I would expect the resulting admonition to include the class name, but it doesen't.

I came accross this issue when i wanted to format md-tables inside an admonition with smaller cell padding. Instead of

:::info{.small}
| a      | markdown |
| ----- | ------------ |
| table | inside        |
:::

i needed to do

:::info
<div className="small">
| a      | markdown |
| ----- | ------------ |
| table | inside        |
</div>
:::

which works fine, but clutters the md content.

Reproducible demo

https://stackblitz.com/edit/github-on5zd6ky?file=docs%2Fintro.md

Steps to reproduce

  1. yarn run start
  2. navigate to the tutorial intro where the table example from above is shown, the css is inside custom.css

Expected behavior

directive classes should be propagated.

Actual behavior

directive classes are ignored

Your environment

Self-service

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its execution

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions