fix: modal close animation

Author: winverse

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

@@ -1,103 +1,38 @@
 import cn from 'clsx'
 import { useConfig } from '@/contexts'
-import { useMounted } from '@/nextra/hooks'
-import type { PageTheme } from '@/nextra/normalize-pages'
-import type { ReactNode, ReactElement } from 'react'
-import { renderComponent } from '@/utils'
+import type { ReactElement } from 'react'
 import { MDXRemote } from 'next-mdx-remote'
 import { getComponents } from '@/mdx-components'
 import { useMarkdownEditor } from '@/contexts/markdown-editor'
 
-interface MarkdownPreviewProps {
-  themeContext: PageTheme
-  breadcrumb: ReactNode
-  timestamp?: number
-  navigation: 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'),
-}
+interface MarkdownPreviewProps {}
 
-export const MarkdownPreview = ({
-  themeContext,
-  navigation,
-  children,
-}: MarkdownPreviewProps): ReactElement => {
+export const MarkdownPreview = ({}: MarkdownPreviewProps): ReactElement => {
   const config = useConfig()
-  const isMount = useMounted()
   const { mdxSource } = useMarkdownEditor()
 
-  if (themeContext.layout === 'raw') {
-    return <div className={classes.main}>{children}</div>
-  }
-
-  const date = new Date()
-
-  const gitTimestampEl =
-    // Because a user's time zone may be different from the server page
-    isMount && date ? (
-      <div className="nx-mb-8 nx-mt-12 nx-block nx-text-xs nx-text-gray-500 dark:nx-text-gray-400 ltr:nx-text-right rtl:nx-text-left">
-        {renderComponent(config.gitTimestamp, { timestamp: date })}
-      </div>
-    ) : (
-      <div className="nx-mt-16" />
-    )
-
   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,
-        })}
-      />
-      {gitTimestampEl}
-      {navigation}
-    </>
+    <MDXRemote
+      compiledSource={mdxSource.compiledSource}
+      frontmatter={mdxSource.frontmatter}
+      scope={mdxSource.scope}
+      components={getComponents({
+        isRawLayout: false,
+        components: config.components,
+      })}
+    />
   )
 
   const body = config.main?.({ children: content }) || content
-
-  // if (themeContext.layout === 'full') {
-  //   return (
-  //     <article
-  //       className={cn(
-  //         classes.main,
-  //         'nextra-content nx-min-h-[calc(100vh-var(--nextra-navbar-height))] nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]',
-  //       )}
-  //     >
-  //       {body}
-  //     </article>
-  //   )
-  // }
-
   return (
     <article
-      className={cn(
-        classes.main,
-        // 'nextra-content nx-flex nx-min-h-[calc(100vh-var(--nextra-navbar-height))] nx-min-w-0 nx-justify-center nx-pb-8 nx-pr-[calc(env(safe-area-inset-right)-1.5rem)]',
-        // themeContext.typesetting === 'article' && 'nextra-body-typesetting-article',
-        // 'nextra-content nx-max-h-[calc(100vh-var(--nextra-navbar-height))]',
-      )}
-      style={{ marginTop: '-24px' }}
+      className={cn('nextra-scrollbar nx-mt-[-24px] nx-h-screen nx-overflow-y-auto nx-break-words')}
     >
-      <main
-        className="nx-w-full nx-min-w-0 nx-max-w-6xl nx-px-6"
-        style={{ marginTop: '24px', paddingTop: '24px' }}
-      >
-        {/* {breadcrumb} */}
-        {body}
-      </main>
+      <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>
   )
 }

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

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import cn from 'clsx'
-import { useModal } from '@/contexts/modal'
 
 type Props = {
   children: React.ReactNode
@@ -15,7 +14,6 @@ const style = {
 }
 
 export function ModalWrapper({ children, isVisible, onOverlayClick }: Props) {
-  const { mode } = useModal()
   const [isClosed, setIsClosed] = useState(false)
   const backdropRef = useRef<HTMLDivElement>(null)
   const timeoutId = useRef<NodeJS.Timeout | null>(null)
@@ -29,7 +27,6 @@ export function ModalWrapper({ children, isVisible, onOverlayClick }: Props) {
     [onOverlayClick],
   )
 
-  // TODO: Using React.Potal
   useEffect(() => {
     if (isVisible) {
       setIsClosed(false)
@@ -45,7 +42,6 @@ export function ModalWrapper({ children, isVisible, onOverlayClick }: Props) {
     }
   }, [isVisible])
 
-  if (!mode) return
   if (!isVisible && isClosed) return null
   return (
     <div

packages/markdown-editor/src/components/sidebar/sortable-tree/sortable-item.tsx

@@ -73,7 +73,7 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     setOverItem({ ...item, transform })
   }, [isOver, isGhost])
 
-  // deleteItem
+  // deleteItem confirm
   useEffect(() => {
     if (!isConfirm) return
     if (mode !== 'deleteSortableItem') return
@@ -154,7 +154,6 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
   }
 
   const { ref: menuRef } = useOutsideClick<HTMLDivElement>(onCloseMenu)
-
   return (
     <li
       {...handleProps}

packages/markdown-editor/src/contexts/modal.tsx

@@ -1,4 +1,4 @@
-import { createContext, type ReactNode, useContext, useState } from 'react'
+import { createContext, type ReactNode, useContext, useEffect, useRef, useState } from 'react'
 
 export type ModalMode = 'deleteSortableItem'
 
@@ -32,16 +32,27 @@ export const ModalProvider = ({ children }: { children: ReactNode }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const [mode, setMode] = useState<ModalMode | null>(null)
   const [isConfirm, setIsConfirm] = useState<boolean>(false)
+  const timer = useRef<NodeJS.Timeout | null>(null)
 
+  useEffect(
+    () => () => {
+      if (timer.current) {
+        clearTimeout(timer.current)
+      }
+    },
+    [],
+  )
   const onOpen = (mode: ModalMode) => {
     setIsOpen(true)
     setMode(mode)
   }
 
   const onClose = () => {
-    setIsOpen(false)
-    setMode(null)
-    setIsConfirm(false)
+    timer.current = setTimeout(() => {
+      setIsOpen(false)
+      setMode(null)
+      setIsConfirm(false)
+    }, 100)
   }
 
   const value: Modal = {

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

@@ -14,14 +14,14 @@ type NextraDocLayoutProps = NextraThemeLayoutProps & {
 export function Layout({ children, editorValue, ...context }: NextraDocLayoutProps): ReactElement {
   return (
     <ConfigProvider value={context}>
-      <MarkdownEditorProvider value={{ editorValue }}>
-        <ModalProvider>
-          <SidebarProvider>
+      <ModalProvider>
+        <SidebarProvider>
+          <MarkdownEditorProvider value={{ editorValue }}>
             <Potals />
             <InnerLayout {...context.pageOpts}>{children}</InnerLayout>
-          </SidebarProvider>
-        </ModalProvider>
-      </MarkdownEditorProvider>
+          </MarkdownEditorProvider>
+        </SidebarProvider>
+      </ModalProvider>
     </ConfigProvider>
   )
 }

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

@@ -5,7 +5,7 @@ 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 { Banner, Head, Header, Sidebar } from '@/components'
 import { MarkdownPreview } from '@/components/markdown-preview'
 import { MarkdownEditor } from '@/components/markdown-editor'
 
@@ -16,26 +16,17 @@ type InnerLayoutProps = PageOpts & {
 export const InnerLayout = ({ frontMatter, headings, pageMap }: InnerLayoutProps): ReactElement => {
   const fsPath = useFSRoute()
 
-  const {
-    activeType,
-    activeIndex,
-    activeThemeContext,
-    activePath,
-    docsDirectories,
-    flatDirectories,
-    flatDocsDirectories,
-    directories,
-    topLevelNavbarItems,
-  } = useMemo(
-    () =>
-      normalizePages({
-        list: pageMap,
-        locale: DEFAULT_LOCALE,
-        defaultLocale: DEFAULT_LOCALE,
-        route: '/',
-      }),
-    [pageMap, fsPath],
-  )
+  const { activeThemeContext, docsDirectories, flatDirectories, directories, topLevelNavbarItems } =
+    useMemo(
+      () =>
+        normalizePages({
+          list: pageMap,
+          locale: DEFAULT_LOCALE,
+          defaultLocale: DEFAULT_LOCALE,
+          route: '/',
+        }),
+      [pageMap, fsPath],
+    )
 
   const themeContext = { ...activeThemeContext, ...frontMatter }
   const direction = 'ltr'
@@ -50,13 +41,7 @@ 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',
-          themeContext.layout === 'raw' && 'nx-max-w-[90rem] nx-flex-row',
-        )}
-      >
+      <div className={cn('nextra-main', 'nx-mx-auto nx-flex nx-w-full')}>
         <ActiveAnchorProvider>
           <Sidebar
             docsDirectories={docsDirectories}
@@ -71,16 +56,7 @@ export const InnerLayout = ({ frontMatter, headings, pageMap }: InnerLayoutProps
               <MarkdownEditor />
             </div>
             <div className={cn('nextra-preview-container nx-w-1/2')}>
-              <MarkdownPreview
-                themeContext={themeContext}
-                breadcrumb={<Breadcrumb activePath={activePath} />}
-                timestamp={new Date().getTime()}
-                navigation={
-                  activeType !== 'page' && themeContext.pagination ? (
-                    <NavLinks flatDirectories={flatDocsDirectories} currentIndex={activeIndex} />
-                  ) : null
-                }
-              ></MarkdownPreview>
+              <MarkdownPreview />
             </div>
           </div>
         </ActiveAnchorProvider>