From e203001758d71ea1e055ee104209c415dc2c3eaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Wed, 9 Mar 2022 19:38:31 +0100 Subject: [PATCH] feat(theme-classic): MDXContent wrapper component (#6842) --- .../src/getSwizzleConfig.ts | 8 ++++++++ .../src/theme-classic.d.ts | 10 ++++++++++ .../src/theme/BlogPostItem/index.tsx | 5 ++--- .../src/theme/DocItem/index.tsx | 6 ++++-- .../src/theme/DocPage/index.tsx | 5 +---- .../src/theme/MDXContent/index.tsx | 15 +++++++++++++++ .../src/theme/MDXPage/index.tsx | 7 +++---- 7 files changed, 43 insertions(+), 13 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx diff --git a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts index f185a7ba2e..9c2385114b 100644 --- a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts +++ b/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: { diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index d1f5be5333..a5653f8edc 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/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; } diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx index 974cf93ad0..0a37575a75 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx +++ b/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"> - {children} + {children} {(tagsExists || truncated) && ( diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx index be72fb019f..b2b0b051fe 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx +++ b/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 { {title} )} - - + + + diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx index 3e30820b32..228e1c4c25 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx +++ b/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, }, )}> - {children} + {children} diff --git a/packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXContent/index.tsx new file mode 100644 index 0000000000..ad70107193 --- /dev/null +++ b/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 {children}; +} diff --git a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx index d9c53607c2..7a1876a5f6 100644 --- a/packages/docusaurus-theme-classic/src/theme/MDXPage/index.tsx +++ b/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 {
- + - +
{!hideTableOfContents && MDXPageContent.toc && (