feat(theme-classic): MDXContent wrapper component (#6842)

packages/docusaurus-theme-classic/src/getSwizzleConfig.ts

@@ -85,6 +85,14 @@ export default function getSwizzleConfig(): SwizzleConfig {
         description:
           'The MDX components to use for rendering MDX files. Meant to be ejected.',
       },
+      MDXContent: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'A component wrapping all MDX content and providing the MDXComponents to the MDX context',
+      },
       // TODO should probably not even appear here
       'NavbarItem/utils': {
         actions: {

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -343,6 +343,16 @@ declare module '@theme/MDXComponents' {
   export default MDXComponents;
 }
 
+declare module '@theme/MDXContent' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    readonly children: ReactNode;
+  }
+
+  export default function MDXContent(props: Props): JSX.Element;
+}
+
 declare module '@theme/Navbar' {
   export default function Navbar(): JSX.Element;
 }

packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx

@@ -7,13 +7,12 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {MDXProvider} from '@mdx-js/react';
 import Translate, {translate} from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import {usePluralForm} from '@docusaurus/theme-common';
 import {blogPostContainerID} from '@docusaurus/utils-common';
-import MDXComponents from '@theme/MDXComponents';
+import MDXContent from '@theme/MDXContent';
 import EditThisPage from '@theme/EditThisPage';
 import type {Props} from '@theme/BlogPostItem';
 
@@ -108,7 +107,7 @@ export default function BlogPostItem(props: Props): JSX.Element {
         id={isBlogPostPage ? blogPostContainerID : undefined}
         className="markdown"
         itemProp="articleBody">
-        <MDXProvider components={MDXComponents}>{children}</MDXProvider>
+        <MDXContent>{children}</MDXContent>
       </div>
 
       {(tagsExists || truncated) && (

packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx

@@ -19,6 +19,7 @@ import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import MDXContent from '@theme/MDXContent';
 
 export default function DocItem(props: Props): JSX.Element {
   const {content: DocContent} = props;
@@ -87,8 +88,9 @@ export default function DocItem(props: Props): JSX.Element {
                     <Heading as="h1">{title}</Heading>
                   </header>
                 )}
-
-                <DocContent />
+                <MDXContent>
+                  <DocContent />
+                </MDXContent>
               </div>
 
               <DocItemFooter {...props} />

packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx

@@ -6,13 +6,10 @@
  */
 
 import React, {type ReactNode, useState, useCallback} from 'react';
-import {MDXProvider} from '@mdx-js/react';
-
 import renderRoutes from '@docusaurus/renderRoutes';
 import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs';
 import Layout from '@theme/Layout';
 import DocSidebar from '@theme/DocSidebar';
-import MDXComponents from '@theme/MDXComponents';
 import NotFound from '@theme/NotFound';
 import type {DocumentRoute} from '@theme/DocItem';
 import type {Props} from '@theme/DocPage';
@@ -137,7 +134,7 @@ function DocPageContent({
                 [styles.docItemWrapperEnhanced!]: hiddenSidebarContainer,
               },
             )}>
-            <MDXProvider components={MDXComponents}>{children}</MDXProvider>
+            {children}
           </div>
         </main>
       </div>

packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import {MDXProvider} from '@mdx-js/react';
+import MDXComponents from '@theme/MDXComponents';
+import type {Props} from '@theme/MDXContent';
+
+export default function MDXContent({children}: Props): JSX.Element {
+  return <MDXProvider components={MDXComponents}>{children}</MDXProvider>;
+}

packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx

@@ -8,8 +8,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Layout from '@theme/Layout';
-import {MDXProvider} from '@mdx-js/react';
-import MDXComponents from '@theme/MDXComponents';
+import MDXContent from '@theme/MDXContent';
 import type {Props} from '@theme/MDXPage';
 import TOC from '@theme/TOC';
 import {ThemeClassNames} from '@docusaurus/theme-common';
@@ -34,9 +33,9 @@ export default function MDXPage(props: Props): JSX.Element {
       <main className="container container--fluid margin-vert--lg">
         <div className={clsx('row', styles.mdxPageWrapper)}>
           <div className={clsx('col', !hideTableOfContents && 'col--8')}>
-            <MDXProvider components={MDXComponents}>
+            <MDXContent>
               <MDXPageContent />
-            </MDXProvider>
+            </MDXContent>
           </div>
           {!hideTableOfContents && MDXPageContent.toc && (
             <div className="col col--2">