fix(mdx-loader): use valid markup for mdxAdmonitionTitle placeholder

facebook · Oct 25, 2022 · cd842a8 · cd842a8
1 parent 006d440
commit cd842a8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 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"><template data-admonition-title></template><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,8 +149,12 @@ const plugin: Plugin = function plugin(
           !isSimpleTextTitle && {
             type: admonitionNodeType,
             data: {
-              hName: 'mdxAdmonitionTitle',
-              hProperties: {},
+              // Note: this has to be valid markup itself, because it's replaced
+              // by client code, not MDX loader, so React sees the content
+              hName: 'template',
+              hProperties: {
+                'data-admonition-title': true,
+              },
             },
             children: titleNodes,
           },

diff --git a/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx b/packages/docusaurus-theme-common/src/utils/admonitionUtils.tsx
@@ -14,15 +14,21 @@ function extractMDXAdmonitionTitle(children: ReactNode): {
   rest: ReactNode;
 } {
   const items = React.Children.toArray(children);
-  const mdxAdmonitionTitle = items.find(
-    (item) =>
-      React.isValidElement(item) &&
-      (item.props as {mdxType: string} | null)?.mdxType ===
-        'mdxAdmonitionTitle',
-  );
+  const mdxAdmonitionTitle = items.find((item) => {
+    if (!React.isValidElement(item)) {
+      return false;
+    }
+    const props = item.props as {
+      mdxType: string;
+      'data-admonition-title'?: boolean;
+    } | null;
+    return (
+      props?.mdxType === 'template' && props['data-admonition-title'] === true
+    );
+  }) as JSX.Element | undefined;
   const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
   return {
-    mdxAdmonitionTitle,
+    mdxAdmonitionTitle: mdxAdmonitionTitle?.props.children,
     rest,
   };
 }