feat: clean up layout code

Author: winverse

packages/markdown-editor/css/styles.css

@@ -27,6 +27,10 @@ body {
   @apply nx-max-h-screen nx-w-full nx-bg-white dark:nx-bg-dark dark:nx-text-gray-100;
 }
 
+#__next {
+  @apply nx-h-screen nx-overflow-hidden;
+}
+
 a,
 summary,
 button,
@@ -65,15 +69,15 @@ summary {
     .nextra-sidebar-container {
       @apply nx-pt-[6.5rem];
     }
-    &.nextra-nav-container {
+    &.nextra-header-container {
       @apply nx-top-10 md:nx-top-0;
     }
   }
   .nextra-banner-hidden {
     .nextra-banner-container ~ div .nextra-sidebar-container {
       @apply nx-pt-16;
     }
-    .nextra-nav-container {
+    .nextra-header-container {
       @apply !nx-top-0;
     }
   }
@@ -120,7 +124,7 @@ article details > summary {
   .nextra-search ul {
     @apply nx-bg-white/70 nx-backdrop-blur-lg dark:nx-bg-dark/80;
   }
-  .nextra-nav-container-blur {
+  .nextra-header-container-blur {
     @apply nx-bg-white/[.85] nx-backdrop-blur-md dark:!nx-bg-dark/80;
   }
 }

packages/markdown-editor/src/components/deployButton.tsx

@@ -32,14 +32,12 @@ function DeployButton({}) {
       type="button"
       onClick={onClick}
       className={cn(
-        'nx-select-none',
+        'nx-z-20 nx-flex nx-select-none nx-items-center nx-transition-opacity',
         'nx-rounded nx-bg-white nx-px-2 nx-py-1.5 nx-font-mono nx-text-[16px] nx-font-medium nx-text-gray-500',
         'nx-border dark:nx-border-gray-100 dark:nx-bg-dark/50 dark:nx-text-gray-100',
         'contrast-more:nx-border-current contrast-more:nx-text-current contrast-more:dark:nx-border-current',
         'hover:nx-shadow-md:hover nx-shadow-gray-100 hover:nx-border-gray-300 hover:nx-bg-slate-50 hover:nx-shadow-gray-100',
         'dark:hover:nx-border-gray-50 dark:hover:nx-bg-neutral-900 dark:hover:nx-shadow-none',
-        'nx-items-center nx-transition-opacity',
-        'nx-z-20 nx-flex',
         isDeploying
           ? 'nx-translate-y-[0px] nx-cursor-not-allowed nx-bg-gray-400/20 nx-opacity-50 dark:nx-bg-neutral-800'
           : 'nx-cursor-pointer active:nx-translate-y-[1px] active:nx-bg-gray-400/20 dark:active:nx-bg-neutral-800',

packages/markdown-editor/src/components/header.tsx

@@ -75,10 +75,10 @@ export function Header({ flatDirectories, items }: NavBarProps): ReactElement {
   const { menu, setMenu } = useMenu()
 
   return (
-    <div className="nextra-nav-container nx-w-full">
+    <div className="nextra-header-container nx-w-full">
       <div
         className={cn(
-          'nextra-nav-container-blur',
+          'nextra-header-container-blur',
           'nx-z-[-1] nx-h-full nx-w-full nx-bg-white dark:nx-bg-dark',
           'nx-shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] dark:nx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]',
           'contrast-more:nx-shadow-[0_0_0_1px_#000] contrast-more:dark:nx-shadow-[0_0_0_1px_#fff]',

packages/markdown-editor/src/components/markdown-editor/hooks/useCodemirror.ts

@@ -2,7 +2,7 @@ import { getDefaultExtensions } from './../lib/getDefaultExtensions'
 import { Annotation, EditorState, StateEffect } from '@codemirror/state'
 import { EditorView, ViewUpdate } from '@codemirror/view'
 import { useTheme } from 'next-themes'
-import { RefObject, useEffect, useState } from 'react'
+import { ForwardedRef, RefObject, useEffect, useState } from 'react'
 import { useMarkdownEditor } from '../../../contexts/markdown-editor'
 import { getEditorStat } from '../lib/getEditorStat'
 import { hyperLink } from '@uiw/codemirror-extensions-hyper-link'
@@ -24,7 +24,7 @@ type Config = {
 
 const External = Annotation.define<boolean>()
 
-export const useCodemirror = (container: RefObject<HTMLElement>, config: Config = {}) => {
+export const useCodemirror = (container: ForwardedRef<HTMLDivElement>, config: Config = {}) => {
   const { theme: currentTheme } = useTheme()
   const { value, setValue, setStat } = useMarkdownEditor()
   const [state, setState] = useState<EditorState | null>(null)

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

@@ -1,23 +1,27 @@
-import { useRef } from 'react'
+import { forwardRef, useEffect } from 'react'
 import { useCodemirror } from './hooks/useCodemirror'
 import { Toolbar } from './toolbar'
 
-export const MarkdownEditor = () => {
-  const container = useRef<HTMLDivElement>(null)
-  const containerHeight = 'calc(100vh - 64px)'
+export const MarkdownEditor = forwardRef<HTMLDivElement>(({}, container) => {
+  const containerHeight = 'calc(100vh - (var(--nextra-navbar-height)))'
   const { state, view } = useCodemirror(container, {
     autoFocus: true,
     minHeight: '100%',
     maxHeight: '100%',
   })
 
   const onClick = () => {
+    console.log('clicked!')
     view?.focus()
   }
 
+  useEffect(() => {
+    onClick()
+  }, [])
+
   return (
     <>
-      <Toolbar state={state} view={view} container={container} />
+      <Toolbar state={state} view={view} />
       <div onClick={onClick}>
         <div
           ref={container}
@@ -28,4 +32,4 @@ export const MarkdownEditor = () => {
       </div>
     </>
   )
-}
+})

packages/markdown-editor/src/components/markdown-editor/toolbar/toolbar.tsx

@@ -11,7 +11,6 @@ import { useUpload } from '@/hooks/use-upload'
 type Props = {
   state: EditorState | null
   view: EditorView | null
-  container: RefObject<HTMLElement>
 }
 
 const seperator = {

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

@@ -1,38 +1,40 @@
 import cn from 'clsx'
 import { useConfig } from '@/contexts'
-import type { ReactElement } from 'react'
+import { forwardRef, type ReactElement } from 'react'
 import { MDXRemote } from 'next-mdx-remote'
 import { getComponents } from '@/mdx-components'
 import { useMarkdownEditor } from '@/contexts/markdown-editor'
 
 interface MarkdownPreviewProps {}
 
-export const MarkdownPreview = ({}: MarkdownPreviewProps): ReactElement => {
-  const config = useConfig()
-  const { mdxSource } = useMarkdownEditor()
+export const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(
+  ({}, ref): ReactElement => {
+    const config = useConfig()
+    const { mdxSource } = useMarkdownEditor()
 
-  if (!mdxSource) {
-    return <div>Mdx source Loading...</div>
-  }
+    if (!mdxSource) {
+      return <div>Mdx source Loading...</div>
+    }
 
-  const content = (
-    <MDXRemote
-      compiledSource={mdxSource.compiledSource}
-      frontmatter={mdxSource.frontmatter}
-      scope={mdxSource.scope}
-      components={getComponents({
-        isRawLayout: false,
-        components: config.components,
-      })}
-    />
-  )
-
-  const body = config.main?.({ children: content }) || content
-  return (
-    <article
-      className={cn('nextra-scrollbar nx-mt-[-24px] nx-h-screen nx-overflow-y-auto nx-break-words')}
-    >
-      <main className="nx-mt-6 nx-w-full nx-min-w-0 nx-max-w-6xl nx-px-6 nx-pt-6">{body}</main>
-    </article>
-  )
-}
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'nextra-scrollbar nx-h-screen nx-overflow-y-auto nx-break-words nx-pb-16',
+        )}
+      >
+        <main className="nx-mt-6 nx-w-full nx-min-w-0 nx-max-w-6xl nx-px-6 nx-pt-6">
+          <MDXRemote
+            compiledSource={mdxSource.compiledSource}
+            frontmatter={mdxSource.frontmatter}
+            scope={mdxSource.scope}
+            components={getComponents({
+              isRawLayout: false,
+              components: config.components,
+            })}
+          />
+        </main>
+      </div>
+    )
+  },
+)

packages/markdown-editor/src/components/modal/modal-wrapper.tsx

@@ -7,20 +7,14 @@ type Props = {
   onOverlayClick: VoidFunction
 }
 
-const style = {
-  backdrop: cn(
-    'nx-fixed nx-inset-0 nx-w-[100vw] nx-h-[100svh] nx-bg-[var(--opaque-layer)] nx-z-10 nx-flex nx-items-center nx-justify-center',
-  ),
-}
-
 export function ModalWrapper({ children, isVisible, onOverlayClick }: Props) {
   const [isClosed, setIsClosed] = useState(false)
   const backdropRef = useRef<HTMLDivElement>(null)
   const timeoutId = useRef<NodeJS.Timeout | null>(null)
 
-  const handleClickBackdrop: React.MouseEventHandler<HTMLDivElement> = useCallback(
-    (ev) => {
-      if (ev.target === backdropRef.current) {
+  const onBackdropClick: React.MouseEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      if (event.target === backdropRef.current) {
         onOverlayClick?.()
       }
     },
@@ -46,8 +40,11 @@ export function ModalWrapper({ children, isVisible, onOverlayClick }: Props) {
   return (
     <div
       ref={backdropRef}
-      className={cn(style.backdrop, isVisible ? 'fadeIn' : 'fadeOut')}
-      onClick={handleClickBackdrop}
+      onClick={onBackdropClick}
+      className={cn(
+        'nx-fixed nx-inset-0 nx-z-10 nx-flex nx-h-[100svh] nx-w-[100vw] nx-items-center nx-justify-center nx-bg-[var(--opaque-layer)]',
+        isVisible ? 'fadeIn' : 'fadeOut',
+      )}
     >
       {children}
     </div>

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

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

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

@@ -3,7 +3,7 @@ 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 './lnner-layout'
+import { Main } from './main'
 import { ModalProvider } from '@/contexts/modal'
 import { Potals } from '@/components/potals'
 
@@ -18,7 +18,7 @@ export function Layout({ children, editorValue, ...context }: NextraDocLayoutPro
         <SidebarProvider>
           <MarkdownEditorProvider value={{ editorValue }}>
             <Potals />
-            <InnerLayout {...context.pageOpts}>{children}</InnerLayout>
+            <Main {...context.pageOpts}>{children}</Main>
           </MarkdownEditorProvider>
         </SidebarProvider>
       </ModalProvider>

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

@@ -4,17 +4,31 @@ 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 { useEffect, useMemo, useRef, useState, type ReactElement, type ReactNode } from 'react'
 import { Banner, Head, Header, Sidebar } from '@/components'
 import { MarkdownPreview } from '@/components/markdown-preview'
 import { MarkdownEditor } from '@/components/markdown-editor'
 
-type InnerLayoutProps = PageOpts & {
+type MainProps = PageOpts & {
   children: ReactNode
 }
 
-export const InnerLayout = ({ frontMatter, headings, pageMap }: InnerLayoutProps): ReactElement => {
+export const Main = ({ frontMatter, headings, pageMap }: MainProps): ReactElement => {
   const fsPath = useFSRoute()
+  const editorRef = useRef<HTMLDivElement>(null)
+  const previewRef = useRef<HTMLDivElement>(null)
+
+  const rerender = useState({})[1]
+
+  useEffect(() => {
+    const trigger = () => rerender({})
+    trigger()
+  }, [])
+
+  useEffect(() => {
+    console.log('editorRef:', editorRef)
+    console.log('previewRef:', previewRef)
+  }, [editorRef, previewRef])
 
   const { activeThemeContext, docsDirectories, flatDirectories, directories, topLevelNavbarItems } =
     useMemo(
@@ -30,9 +44,15 @@ export const InnerLayout = ({ frontMatter, headings, pageMap }: InnerLayoutProps
 
   const themeContext = { ...activeThemeContext, ...frontMatter }
   const direction = 'ltr'
+  const mainHeight = 'calc(100vh - (var(--nextra-navbar-height)))'
 
   return (
-    <div dir={direction} className={cn('nx-relative nx-flex nx-flex-wrap')}>
+    <div
+      dir={direction}
+      className={cn(
+        'nx-relative nx-flex nx-h-screen nx-flex-col nx-flex-nowrap nx-overflow-hidden',
+      )}
+    >
       <script
         dangerouslySetInnerHTML={{
           __html: `document.documentElement.setAttribute('dir','${direction}')`,
@@ -41,7 +61,10 @@ export const InnerLayout = ({ frontMatter, headings, pageMap }: InnerLayoutProps
       <Head />
       <Banner />
       <Header flatDirectories={flatDirectories} items={topLevelNavbarItems} />
-      <div className={cn('nextra-main', 'nx-mx-auto nx-flex nx-w-full')}>
+      <div
+        className={cn('nextra-main', 'nx-mx-auto nx-flex nx-w-full')}
+        style={{ height: mainHeight }}
+      >
         <ActiveAnchorProvider>
           <Sidebar
             docsDirectories={docsDirectories}
@@ -53,10 +76,10 @@ export const InnerLayout = ({ frontMatter, headings, pageMap }: InnerLayoutProps
           />
           <div className={cn('nx-flex nx-overflow-hidden')} style={{ width: 'calc(100% - 320px)' }}>
             <div className={cn('nextra-editor-container nx-w-1/2')}>
-              <MarkdownEditor />
+              <MarkdownEditor ref={editorRef} />
             </div>
             <div className={cn('nextra-preview-container nx-w-1/2')}>
-              <MarkdownPreview />
+              <MarkdownPreview ref={previewRef} />
             </div>
           </div>
         </ActiveAnchorProvider>