fix(mdx-loader): use PascalCase for MDXAdmonitionTitle placeholder el…

…ement
facebook · Oct 25, 2022 · 037606a · 037606a
1 parent 006d440
commit 037606a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/...s/docusaurus-mdx-loader/src/remark/admonitions/__tests__/__snapshots__/index.test.ts.snap b/...s/docusaurus-mdx-loader/src/remark/admonitions/__tests__/__snapshots__/index.test.ts.snap
@@ -51,7 +51,7 @@ exports[`admonitions remark plugin default behavior for custom keyword 1`] = `
 
 exports[`admonitions remark plugin interpolation 1`] = `
 "<p>Test admonition with interpolated title/body</p>
-<admonition type="tip"><mdxAdmonitionTitle>My <code>interpolated</code> <strong>title</strong> &#x3C;button style={{color: "red"}} onClick={() => alert("click")}>test</mdxAdmonitionTitle><p><code>body</code> <strong>interpolated</strong> content</p></admonition>"
+<admonition type="tip"><MDXAdmonitionTitle>My <code>interpolated</code> <strong>title</strong> &#x3C;button style={{color: "red"}} onClick={() => alert("click")}>test</MDXAdmonitionTitle><p><code>body</code> <strong>interpolated</strong> content</p></admonition>"
 `;
 
 exports[`admonitions remark plugin replace custom keyword 1`] = `

diff --git a/packages/docusaurus-mdx-loader/src/remark/admonitions/index.ts b/packages/docusaurus-mdx-loader/src/remark/admonitions/index.ts
@@ -149,7 +149,9 @@ const plugin: Plugin = function plugin(
           !isSimpleTextTitle && {
             type: admonitionNodeType,
             data: {
-              hName: 'mdxAdmonitionTitle',
+              // Use PascalCase, because it's a custom element replaced in
+              // client code, not Remark code, so we have to make React happy
+              hName: 'MDXAdmonitionTitle',
               hProperties: {},
             },
             children: titleNodes,

diff --git a/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx b/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
@@ -18,7 +18,7 @@ function extractMDXAdmonitionTitle(children: ReactNode): {
     (item) =>
       React.isValidElement(item) &&
       (item.props as {mdxType: string} | null)?.mdxType ===
-        'mdxAdmonitionTitle',
+        'MDXAdmonitionTitle',
   );
   const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
   return {