chore: code refactor

Author: winverse

apps/book-web/src/layouts/MarkdownEditorLayout/MarkdownEditorLayout.tsx

@@ -1,4 +1,8 @@
-import { MarkdownEditor, CustomEventDetail, nextraCustomEventName } from '@packages/markdown-editor'
+import {
+  MarkdownEditor,
+  CustomEventDetail,
+  markdownCustomEventName,
+} from '@packages/markdown-editor'
 import { themeConfig } from './context'
 import { useEffect, useState } from 'react'
 import { BookMetadata, generateBookMetadata, Pages } from '@/lib/generateBookMetadata'
@@ -63,7 +67,7 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
     getPageRefetch()
   }, [pageUrlSlug])
 
-  // new Mdx
+  // new Page data
   useEffect(() => {
     if (isGetPageLoading) return
     if (!getPageData?.page) return
@@ -88,9 +92,9 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
       })
       getPagesRefetch()
     }
-    window.addEventListener(nextraCustomEventName.createItemEvent, create)
+    window.addEventListener(markdownCustomEventName.createItemEvent, create)
     return () => {
-      window.removeEventListener(nextraCustomEventName.createItemEvent, create)
+      window.removeEventListener(markdownCustomEventName.createItemEvent, create)
     }
   }, [])
 
@@ -113,9 +117,21 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
 
       const isUpdateTitle = !!e.detail.title
 
-      await updatePageAsyncMutate({
-        input: isUpdateTitle ? titleInput : bodyInput,
-      })
+      try {
+        await updatePageAsyncMutate({
+          input: isUpdateTitle ? titleInput : bodyInput,
+        })
+
+        const event = new CustomEvent(markdownCustomEventName.updateItemResultEvent, {
+          detail: { result: 'success' },
+        })
+        dispatchEvent(event)
+      } catch (error) {
+        const event = new CustomEvent(markdownCustomEventName.updateItemResultEvent, {
+          detail: { result: 'error' },
+        })
+        dispatchEvent(event)
+      }
 
       getPageRefetch()
 
@@ -124,9 +140,9 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
       }
     }
 
-    window.addEventListener(nextraCustomEventName.updateItemEvent, update)
+    window.addEventListener(markdownCustomEventName.updateItemEvent, update)
     return () => {
-      window.removeEventListener(nextraCustomEventName.updateItemEvent, update)
+      window.removeEventListener(markdownCustomEventName.updateItemEvent, update)
     }
   }, [pageUrlSlug, bookUrlSlug])
 
@@ -148,9 +164,9 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
       getPagesRefetch()
     }
 
-    window.addEventListener(nextraCustomEventName.changeItemOrderEvent, changeItem)
+    window.addEventListener(markdownCustomEventName.changeItemOrderEvent, changeItem)
     return () => {
-      window.removeEventListener(nextraCustomEventName.changeItemOrderEvent, changeItem)
+      window.removeEventListener(markdownCustomEventName.changeItemOrderEvent, changeItem)
     }
   }, [])
 
@@ -164,15 +180,15 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
         return
       }
       const { deploy } = await deployAsyncMutate({ input: { url_slug: bookUrlSlug } })
-      const event = new CustomEvent(nextraCustomEventName.deployEndEvent, {
+      const event = new CustomEvent(markdownCustomEventName.deployEndEvent, {
         detail: { publishedUrl: deploy.published_url },
       })
       window.dispatchEvent(event)
     }
 
-    window.addEventListener(nextraCustomEventName.deployStartEvent, deployStart)
+    window.addEventListener(markdownCustomEventName.deployStartEvent, deployStart)
     return () => {
-      window.removeEventListener(nextraCustomEventName.deployStartEvent, deployStart)
+      window.removeEventListener(markdownCustomEventName.deployStartEvent, deployStart)
     }
   }, [bookUrlSlug])
 
@@ -188,9 +204,9 @@ function MarkdownEditorLayout({ children, mdxText }: Props) {
       })
       getPagesRefetch()
     }
-    window.addEventListener(nextraCustomEventName.deleteItemEvent, deleteItemStart)
+    window.addEventListener(markdownCustomEventName.deleteItemEvent, deleteItemStart)
     return () => {
-      window.removeEventListener(nextraCustomEventName.deleteItemEvent, deleteItemStart)
+      window.removeEventListener(markdownCustomEventName.deleteItemEvent, deleteItemStart)
     }
   }, [bookUrlSlug])
 

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

@@ -1,9 +1,10 @@
 import cn from 'clsx'
 import { forwardRef, useEffect, useRef } from 'react'
-import { useCodemirror } from './hooks/useCodemirror'
+
 import { Toolbar } from './toolbar'
 import { ReactCodeMirrorRef } from '@/types'
 import { Extension } from '@codemirror/state'
+import { useCodemirror } from '@/hooks'
 
 interface MarkdownEditorProps {
   codeMirrorExtensions?: Extension[]

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

@@ -1,12 +1,11 @@
 import cn from 'clsx'
 import { isValidElement, useEffect, useState } from 'react'
 import { titles, bold, italic, strike, quote, link, image, code, save } from './commands'
-import { ToolbarCommand } from './commands/type'
-import { EditorSelection, EditorState } from '@codemirror/state'
-import { EditorView } from '@codemirror/view'
+import type { ToolbarCommand } from './commands/type'
+import { EditorSelection, type EditorState } from '@codemirror/state'
+import type { EditorView } from '@codemirror/view'
 import { ToolbarSeparator } from './toolbar-separator'
-import useClickImage from '@/hooks/use-click-img'
-import { useUpload } from '@/hooks/use-upload'
+import { useClickImage, useUpload } from '@/hooks'
 
 type Props = {
   state: EditorState | null

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

@@ -24,7 +24,7 @@ export const MarkdownPreview = forwardRef<HTMLDivElement, MarkdownPreviewProps>(
           'markdown-editor-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-pb-12 nx-pt-6">
+        <main className="nx-mt-6 nx-w-full nx-min-w-0 nx-max-w-6xl nx-px-6 nx-pb-[8rem] nx-pt-6">
           <MDXRemote
             compiledSource={mdxSource.compiledSource}
             frontmatter={mdxSource.frontmatter}

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

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 import { useSidebar } from '@/contexts/sidebar'
 import { CollapseAllIcon as Icon } from '@/nextra/icons/collapse-all'
 import { useRouter } from 'next/router'
-import { useUrlSlug } from '@/hooks/use-url-slug'
+import { useUrlSlug } from '@/hooks'
 
 type Props = {
   className: string

packages/markdown-editor/src/components/sidebar/sidebar-header/collapse-all-icon.tsx

@@ -2,12 +2,13 @@ import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import cn from 'clsx'
 
 import { PageType, useSidebar } from '@/contexts/sidebar'
-import useOutsideClick from '@/hooks/use-outside-click'
+
 import { EmptyFolderIcon } from '@/nextra/icons/empty-folder'
 import { EmptyFileIcon } from '@/nextra/icons/empty-file'
 import { SeparatorIcon } from '@/nextra/icons/separator'
 import { type CustomEventDetail, markdownCustomEventName } from '@/index'
 import { useDebouncedCallback } from 'use-debounce'
+import { useOutsideClick } from '@/hooks'
 
 type Props = {
   type: PageType

packages/markdown-editor/src/components/sidebar/sidebar-header/control-input.tsx

@@ -2,7 +2,7 @@ import cn from 'clsx'
 import { ControlIcons } from './control-icons'
 import { CollapseAllIcon } from './collapse-all-icon'
 import { PageType, useSidebar } from '@/contexts/sidebar'
-import { useUrlSlug } from '@/hooks/use-url-slug'
+import { useUrlSlug } from '@/hooks'
 import { useRef } from 'react'
 import { SortableItem } from '@/nextra/normalize-pages'
 import { findFolder } from '../utils'

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

@@ -7,12 +7,13 @@ import { ArrowRightIcon } from '@/nextra/icons'
 import { useDndTree } from '.'
 import { classes, indentStyle } from '../style'
 import type { SortableItemProps } from './types'
-import useOutsideClick from '@/hooks/use-outside-click'
+
 import { createPortal } from 'react-dom'
 import { ControlOption, ControlInput } from '../sidebar-header'
 import { useModal } from '@/contexts/modal'
 import { CustomEventDetail } from '@/types'
 import { markdownCustomEventName } from '@/index'
+import { useOutsideClick } from '@/hooks'
 
 export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props, ref) => {
   const { isDragging, overItem, setOverItem } = useDndTree()

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

@@ -36,7 +36,7 @@ import { SortableItemWrapper } from './sortable-item-wrapper'
 import { useSidebar } from '@/contexts/sidebar'
 import { SensorContext } from './types'
 import { CustomEventDetail, markdownCustomEventName } from '@/index'
-import { useUrlSlug } from '@/hooks/use-url-slug'
+import { useUrlSlug } from '@/hooks'
 import { SidebarHeader } from '../sidebar-header'
 
 type Props = {

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

@@ -0,0 +1,5 @@
+export { useClickImage } from './use-click-img'
+export { useCodemirror } from './use-codemirror'
+export { useOutsideClick } from './use-outside-click'
+export { useUpload } from './use-upload'
+export { useUrlSlug } from './use-url-slug'

packages/markdown-editor/src/hooks/index.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 
-export default function useClickImage() {
+export function useClickImage() {
   const [file, setFile] = useState<File | null>(null)
 
   const onClick = useCallback(() => {