feat: layout refactor

Author: winverse

packages/markdown-editor/src/components/markdown-preview/index.tsx

@@ -0,0 +1 @@
+export { MarkdownPreview } from './markdown-preview'

packages/markdown-editor/src/layouts/Body.tsx renamed to packages/markdown-editor/src/components/markdown-preview/markdown-preview.tsx

@@ -4,23 +4,31 @@ import { useMounted } from '@/nextra/hooks'
 import type { PageTheme } from '@/nextra/normalize-pages'
 import type { ReactNode, ReactElement } from 'react'
 import { renderComponent } from '@/utils'
+import { MDXRemote } from 'next-mdx-remote'
+import { getComponents } from '@/mdx-components'
+import { useMarkdownEditor } from '@/contexts/markdown-editor'
 
-interface BodyProps {
+interface MarkdownPreviewProps {
   themeContext: PageTheme
   breadcrumb: ReactNode
   timestamp?: number
   navigation: ReactNode
-  children: ReactNode
+  children?: ReactNode
 }
 
 const classes = {
   toc: cn('nextra-toc nx-order-last nx-hidden nx-w-64 nx-shrink-0 xl:nx-block print:nx-hidden'),
   main: cn('nextra-scrollbar nx-break-words nx-h-screen nx-overflow-y-auto'),
 }
 
-export const Body = ({ themeContext, navigation, children }: BodyProps): ReactElement => {
+export const MarkdownPreview = ({
+  themeContext,
+  navigation,
+  children,
+}: MarkdownPreviewProps): ReactElement => {
   const config = useConfig()
   const isMount = useMounted()
+  const { mdxSource } = useMarkdownEditor()
 
   if (themeContext.layout === 'raw') {
     return <div className={classes.main}>{children}</div>
@@ -38,9 +46,21 @@ export const Body = ({ themeContext, navigation, children }: BodyProps): ReactEl
       <div className="nx-mt-16" />
     )
 
+  if (!mdxSource) {
+    return <div>Mdx source Loading...</div>
+  }
+
   const content = (
     <>
-      {children}
+      <MDXRemote
+        compiledSource={mdxSource.compiledSource}
+        frontmatter={mdxSource.frontmatter}
+        scope={mdxSource.scope}
+        components={getComponents({
+          isRawLayout: false,
+          components: config.components,
+        })}
+      />
       {gitTimestampEl}
       {navigation}
     </>

packages/markdown-editor/src/index.tsx

@@ -13,6 +13,7 @@ export type {
   PageMapItem,
   PageOpts,
 }
+export { Layout as MarkdownEditor } from './layouts'
 export const nextraCustomEventName: Record<keyof CustomEventDetail, string> = {
   createItemEvent: 'createItemEvent',
   updateItemEvent: 'updateItemEvent',
@@ -21,4 +22,3 @@ export const nextraCustomEventName: Record<keyof CustomEventDetail, string> = {
   deployEndEvent: 'deployEndEvent',
   deleteItemEvent: 'deleteItemEvent',
 }
-export { MarkdownEditor } from './layouts'

packages/markdown-editor/src/layouts/index.tsx

@@ -1,3 +1,2 @@
-export { Body } from './Body'
-export { InnerLayout } from './InnerLayout'
-export { MarkdownEditor } from './MarkdownEditor'
+export { InnerLayout } from './lnner-layout'
+export { Layout } from './layout'

packages/markdown-editor/src/layouts/MarkdownEditor.tsx renamed to packages/markdown-editor/src/layouts/layout.tsx

@@ -3,19 +3,15 @@ import { MarkdownEditorProvider } from '@/contexts/markdown-editor'
 import { SidebarProvider } from '@/contexts/sidebar'
 import type { NextraThemeLayoutProps } from '@/nextra/types'
 import type { ReactElement } from 'react'
-import { InnerLayout } from './InnerLayout'
+import { InnerLayout } from './lnner-layout'
 import { ModalProvider } from '@/contexts/modal'
 import { Potals } from '@/components/potals'
 
 type NextraDocLayoutProps = NextraThemeLayoutProps & {
   editorValue: string
 }
 
-export function MarkdownEditor({
-  children,
-  editorValue,
-  ...context
-}: NextraDocLayoutProps): ReactElement {
+export function Layout({ children, editorValue, ...context }: NextraDocLayoutProps): ReactElement {
   return (
     <ConfigProvider value={context}>
       <MarkdownEditorProvider value={{ editorValue }}>

packages/markdown-editor/src/layouts/InnerLayout.tsx renamed to packages/markdown-editor/src/layouts/lnner-layout.tsx

@@ -1,30 +1,20 @@
 import cn from 'clsx'
 import { DEFAULT_LOCALE } from '@/constants'
-import { ActiveAnchorProvider, useConfig } from '@/contexts'
-import { useMarkdownEditor } from '@/contexts/markdown-editor'
+import { ActiveAnchorProvider } from '@/contexts'
 import { useFSRoute } from '@/nextra/hooks'
 import { normalizePages } from '@/nextra/normalize-pages'
 import type { PageOpts } from '@/nextra/types'
 import { useMemo, type ReactElement, type ReactNode } from 'react'
 import { Banner, Breadcrumb, Head, Header, NavLinks, Sidebar } from '@/components'
+import { MarkdownPreview } from '@/components/markdown-preview'
 import { MarkdownEditor } from '@/components/markdown-editor'
-import { Body } from './Body'
-import { MDXRemote } from 'next-mdx-remote'
-import { getComponents } from '@/mdx-components'
 
 type InnerLayoutProps = PageOpts & {
   children: ReactNode
 }
 
-export const InnerLayout = ({
-  frontMatter,
-  headings,
-  children,
-  pageMap,
-}: InnerLayoutProps): ReactElement => {
-  const config = useConfig()
+export const InnerLayout = ({ frontMatter, headings, pageMap }: InnerLayoutProps): ReactElement => {
   const fsPath = useFSRoute()
-  const { mdxSource } = useMarkdownEditor()
 
   const {
     activeType,
@@ -50,10 +40,6 @@ export const InnerLayout = ({
   const themeContext = { ...activeThemeContext, ...frontMatter }
   const direction = 'ltr'
 
-  if (!mdxSource) {
-    return <div>Mdx source Loading...</div>
-  }
-
   return (
     <div dir={direction} className={cn('nx-relative nx-flex nx-flex-wrap')}>
       <script
@@ -85,7 +71,7 @@ export const InnerLayout = ({
               <MarkdownEditor />
             </div>
             <div className={cn('nextra-preview-container nx-w-1/2')}>
-              <Body
+              <MarkdownPreview
                 themeContext={themeContext}
                 breadcrumb={<Breadcrumb activePath={activePath} />}
                 timestamp={new Date().getTime()}
@@ -94,18 +80,7 @@ export const InnerLayout = ({
                     <NavLinks flatDirectories={flatDocsDirectories} currentIndex={activeIndex} />
                   ) : null
                 }
-              >
-                <MDXRemote
-                  compiledSource={mdxSource.compiledSource}
-                  frontmatter={mdxSource.frontmatter}
-                  scope={mdxSource.scope}
-                  components={getComponents({
-                    isRawLayout: themeContext.layout === 'raw',
-                    components: config.components,
-                  })}
-                />
-                {children}
-              </Body>
+              ></MarkdownPreview>
             </div>
           </div>
         </ActiveAnchorProvider>