feat(mdx-loader): add admonitions directive support for class/id shortcuts

[lebalz]

Motivation

Add support for admonition directive class/id shortcuts, as specified in the directive syntax: https://talk.commonmark.org/t/generic-directives-plugins-syntax/444

:::note{.padding--lg #admonition-id-2}

My note

:::

Closes #11641

Test Plan

• add unit test
• add dogfooding example at tests/docs/tests/admonitions

Test links

• Docs: https://deploy-preview-11642--docusaurus-2.netlify.app/docs/markdown-features/admonitions/#specifying-attributes
• Dogfood: https://deploy-preview-11642--docusaurus-2.netlify.app/tests/docs/tests/admonitions/#admonitions-with-classes

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	e9278f8
🔍 Latest deploy log	https://app.netlify.com/projects/docusaurus-2/deploys/69590137415e5600088bfbf0
😎 Deploy Preview	https://deploy-preview-11642--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[slorber]

TIL that markdown-directives has shortcuts for class/id: https://talk.commonmark.org/t/generic-directives-plugins-syntax/444

What about also adding support for id then?

We would need to document that, yes, otherwise nobody will find out 🤪

[slorber]

Can you add more examples here, including with 2 classes, and interleaving multiple classes/ids and other non-shortcut attributes?

Looks like in case of duplicate ids, the last one wins in :::info{.c1 #id1 .c2 #id2 hello=world}

[lebalz]

Yes - i added more doogfood here: https://deploy-preview-11642--docusaurus-2.netlify.app/tests/docs/tests/admonitions/#admonitions-with-classes

Things to consider when we support passing attributes hello=world:

• this supports with the current remark-admonition plugin with it's hast-node approach the possibility to provide html attributes as style="color:red" (what actually works as highlighted in the dogfood test).
• this is actually a really nice feature, but...
• it brings possible hard regressions with it: when the remark admonition plugin upgrades to mdxJsxFlowElement, props-passing gets more complicated, since react specific code, as the style attribute must be passed as an expression to be compatible with react. This would need some docusaurus-specific parse logic to transform style="color:red" to style={{color: 'red'}}. This can be done (i implemented something here), but i'm not sure wheter you want to maintain this in the longterm?

[slorber]

Agree this is not ideal and I'd rather only support class/ids for now

[lebalz]

TIL that markdown-directives has shortcuts for class/id: https://talk.commonmark.org/t/generic-directives-plugins-syntax/444

What about also adding support for id then?

We would need to document that, yes, otherwise nobody will find out 🤪

Hi @slorber

Thanks for your review. I think i addressed the highlighted points:

• Support IDs
  • In 1babe74 i added transformation of admonition headings to a h5 element, s.t. a link can be copied directly. I'm not sure if this was what you intended - otherwise i'm fine to undo this commit 😉
• Support general attributes - see the comment above regarding implications. I would like to see the feature landing in docusaurus, but i would understand if not...
• Add docs - best seen in light mode, since infima's shadow setting for the dark mode is not that obvious.

What do you think?

[slorber]

Agree this is not ideal and I'd rather only support class/ids for now

[lebalz]

Thanks for the suggestions - i cleaned up the pr and it should be ready to review again 🙂

[slorber]

LGTM thanks 👍