fix: add content bug

Author: winverse

packages/markdown-editor/src/components/modal/delete-sortable-item-modal.tsx

@@ -39,7 +39,7 @@ export const DeleteSortableItemModal: React.FC = () => {
             <X size={24} />
           </button>
         </div>
-        <p className="nx-text-gray-600 dark:nx-text-gray-300">{`${action.title ?? '이'} 항목을 삭제하시겠습니까?`}</p>
+        <p className="nx-text-gray-600 dark:nx-text-gray-300">{`${action.title ?? '이 항목'}을 삭제하시겠습니까?`}</p>
         {action.childrenCount > 0 && (
           <p className="nx-mt-1 nx-text-sm nx-text-gray-600 dark:nx-text-gray-300">
             하위 항목도 모두 함께 삭제됩니다.

packages/markdown-editor/src/components/sidebar/sidebar-header/control-icon.tsx renamed to packages/markdown-editor/src/components/sidebar/sidebar-header/control-icons.tsx

@@ -2,17 +2,22 @@ import { PageType } from '@/contexts/sidebar'
 import { NewFolderIcon } from '@/nextra/icons/new-folder'
 import { NewPageIcon } from '@/nextra/icons/new-page'
 import { SeparatorIcon } from '@/nextra/icons/separator'
+import { MouseEvent } from 'react'
 
 type Props = {
   className: string
   type: PageType
   onClick: (type: PageType) => void
 }
 
-export const ControlIcon = ({ className, type, onClick }: Props) => {
+export const ControlIcons = ({ className, type, onClick }: Props) => {
   if (type === '') return
+  const handleClick = (e: MouseEvent<HTMLSpanElement>) => {
+    e.stopPropagation()
+    onClick(type)
+  }
   return (
-    <span className={className} onClick={() => onClick(type)}>
+    <span className={className} onClick={(e) => handleClick(e)}>
       {type === 'page' && <NewPageIcon />}
       {type === 'folder' && <NewFolderIcon />}
       {type === 'separator' && <SeparatorIcon />}

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

@@ -14,9 +14,17 @@ type Props = {
 }
 
 export function ControlInput({ type }: Props): ReactElement {
-  const sidebar = useSidebar()
-  const { isAddAction, isEditAction } = useSidebar()
-  const [title, setTitle] = useState<string | null>(null)
+  const {
+    isActionActive,
+    actionInfo,
+    isAddAction,
+    isEditAction,
+    originSortableItems,
+    setSortableItems,
+    reset,
+  } = useSidebar()
+
+  const [input, setInput] = useState<string | null>(null)
   const [error, setError] = useState('')
 
   const nameMapper: Record<PageType, string> = {
@@ -31,78 +39,83 @@ export function ControlInput({ type }: Props): ReactElement {
 
   // validate title
   useEffect(() => {
-    if (title === null || title === '') return
-    if (forbiddenCharsRegex.test(title)) {
+    if (input === null || input === '') return
+    if (forbiddenCharsRegex.test(input)) {
       setError(`${typeName} 이름에 사용해서는 안 되는 기호가 포함되어 있습니다.`)
-    } else if (title === '') {
+    } else if (input === '') {
       setError(`${typeName} 이름을 입력해야 합니다.`)
-    } else if (title.startsWith(' ')) {
+    } else if (input.startsWith(' ')) {
       setError(`${typeName} 이름은 공백으로 시작할 수 없습니다.`)
     } else {
       setError('')
     }
-  }, [title])
+  }, [input])
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     e.preventDefault()
     // 두개 이상의 공백은 하나의 공백으로 변경
     const value = e.target.value.replace(/\s\s+/g, ' ').trimStart()
-    setTitle(value)
+    setInput(value)
   }
 
-  const onOutsideClick = () => {
-    if (!sidebar.isActionActive) return
-    if (title) {
+  const onOutsideClick = (e?: MouseEvent) => {
+    e?.preventDefault()
+    if (!isActionActive) return
+    if (actionInfo === null) return
+    if (!isAddAction(actionInfo)) return
+
+    if (input) {
       dispatchEvent()
     } else {
-      sidebar.setSortableItems(sidebar.originSortableItems) // cancel
+      setSortableItems(originSortableItems) // cancel
     }
-    sidebar.reset()
-    setTitle('')
+    reset()
+    setInput('')
   }
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key !== 'Enter') return
     e.preventDefault()
     dispatchEvent()
-    sidebar.reset()
+    reset()
+    setInput('')
   }
 
   const dispatchEvent = useDebouncedCallback(
     useCallback(() => {
       if (type === '') return
-      if (title === null) return
-      if (title.trim() === '') return
+      if (input === null) return
+      if (input.trim() === '') return
       if (error) return
-      if (sidebar.actionInfo === null) return
+      if (actionInfo === null) return
 
-      if (isAddAction(sidebar.actionInfo)) {
-        const { parentUrlSlug, bookUrlSlug, index, type } = sidebar.actionInfo
+      if (isAddAction(actionInfo)) {
+        const { parentUrlSlug, bookUrlSlug, index, type } = actionInfo
         const event = new CustomEvent<CustomEventDetail['createItemEvent']>(
           nextraCustomEventName.createItemEvent,
           {
-            detail: { title, parentUrlSlug, index, bookUrlSlug, type },
+            detail: { title: input, parentUrlSlug, index, bookUrlSlug, type },
           },
         )
         window.dispatchEvent(event)
       }
 
-      if (isEditAction(sidebar.actionInfo)) {
-        const { pageUrlSlug } = sidebar.actionInfo
+      if (isEditAction(actionInfo)) {
+        const { pageUrlSlug } = actionInfo
         const event = new CustomEvent<CustomEventDetail['updateItemEvent']>(
           nextraCustomEventName.updateItemEvent,
           {
-            detail: { title, pageUrlSlug },
+            detail: { title: input, pageUrlSlug },
           },
         )
         window.dispatchEvent(event)
       }
-    }, [title, error, sidebar.actionInfo, type]),
+    }, [input, error, actionInfo, type]),
     1000,
     { leading: true },
   )
 
-  const { ref } = useOutsideClick<HTMLDivElement>(onOutsideClick)
+  const { ref } = useOutsideClick<HTMLDivElement>((e) => onOutsideClick(e))
   if (type === '') return <></>
   return (
     <div
@@ -125,7 +138,7 @@ export function ControlInput({ type }: Props): ReactElement {
           'nx-bg-gray-100 nx-text-gray-600 ',
           'dark:nx-bg-primary-100/5 dark:nx-text-gray-400',
         )}
-        value={title === null ? '' : title}
+        value={input === null ? '' : input}
         onChange={onChange}
         onKeyDown={onKeyDown}
         autoFocus={true}

packages/markdown-editor/src/components/sidebar/sidebar-header/control-menu.tsx renamed to packages/markdown-editor/src/components/sidebar/sidebar-header/control-option.tsx

@@ -19,7 +19,7 @@ const style = {
   svg: cn('nx-mr-2'),
 }
 
-export const ControlMenu = forwardRef<HTMLDivElement, Props>(
+export const ControlOption = forwardRef<HTMLDivElement, Props>(
   ({ isOpen, isIndex, position, onEdit, onDelete }, ref) => {
     return (
       <div

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

@@ -1,5 +1,5 @@
 export { SidebarHeader } from './sidebar-header'
 export { CollapseAllIcon } from './collapse-all-icon'
-export { ControlIcon } from './control-icon'
-export { ControlMenu } from './control-menu'
+export { ControlIcons } from './control-icons'
+export { ControlOption } from './control-option'
 export { ControlInput } from './control-input'

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

@@ -1,11 +1,11 @@
 import cn from 'clsx'
-import { ControlIcon } from './control-icon'
+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 { useRef } from 'react'
 import { SortableItem } from '@/nextra/normalize-pages'
-import { findFolder } from './utils'
+import { findFolder } from '../utils'
 
 type Props = {
   showSidebar: boolean
@@ -18,33 +18,45 @@ const style = cn(
 )
 
 export function SidebarHeader({ showSidebar }: Props) {
-  const sidebar = useSidebar()
+  const {
+    isActionActive,
+    originSortableItems,
+    setOriginSortableItems,
+    setSortableItems,
+    sortableItems,
+    reset,
+    setIsActionActive,
+    setActionInfo,
+  } = useSidebar()
   const { bookUrlSlug, pageUrlSlug, fullUrlSlug } = useUrlSlug()
 
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
   const onClickIcon = (type: PageType) => {
     if (type === '') return
-    if (sidebar.isActionActive) {
-      sidebar.setSortableItems(sidebar.originSortableItems)
-      sidebar.reset()
+    if (isActionActive) {
+      console.log('isCancel')
+      if (originSortableItems.length > 0) {
+        setSortableItems(originSortableItems)
+      }
+      reset()
       return
     }
 
     // init
-    timeoutRef.current = setTimeout(() => sidebar.setIsActionActive(true), 100)
-    sidebar.setOriginSortableItems(sidebar.sortableItems) // 취소 되었을때 원래 데이터로 복구하기 위함
+    timeoutRef.current = setTimeout(() => setIsActionActive(true), 200)
+    setOriginSortableItems(sortableItems) // 취소 되었을때 원래 데이터로 복구하기 위함
 
     // remove code
     let targetRoute = pageUrlSlug
-    const isFolder = !!findFolder(sidebar.sortableItems, fullUrlSlug)
+    const isFolder = !!findFolder(sortableItems, fullUrlSlug)
 
     // 폴더 타입이 아닐 경우 부모 폴더로 targetRoute를 변경
     if (!isFolder) {
       targetRoute = targetRoute.split('/').slice(0, -1).join('/') || '/'
     }
 
-    const coppeidPageMap = structuredClone(sidebar.sortableItems)
+    const coppeidPageMap = structuredClone(sortableItems)
 
     function addNewFolderToItem(sortableItems: SortableItem[]) {
       for (const item of sortableItems) {
@@ -87,7 +99,7 @@ export function SidebarHeader({ showSidebar }: Props) {
           }
 
           const removeBookUrlSlug = addToTop ? '' : item?.route.replace(bookUrlSlug, '')
-          sidebar.setActionInfo<'add'>({
+          setActionInfo<'add'>({
             action: 'add',
             parentUrlSlug: removeBookUrlSlug ?? '',
             index,
@@ -101,7 +113,7 @@ export function SidebarHeader({ showSidebar }: Props) {
             item.children.push(newItem)
           }
 
-          sidebar.setSortableItems(coppeidPageMap)
+          setSortableItems(coppeidPageMap)
           break
         }
 
@@ -123,9 +135,9 @@ export function SidebarHeader({ showSidebar }: Props) {
         showSidebar ? 'nx-block' : 'nx-hidden',
       )}
     >
-      <ControlIcon className={style} onClick={onClickIcon} type="page" />
-      <ControlIcon className={style} onClick={onClickIcon} type="folder" />
-      <ControlIcon className={style} onClick={onClickIcon} type="separator" />
+      <ControlIcons className={style} onClick={onClickIcon} type="page" />
+      <ControlIcons className={style} onClick={onClickIcon} type="folder" />
+      <ControlIcons className={style} onClick={onClickIcon} type="separator" />
       <CollapseAllIcon className={style} />
     </div>
   )

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

@@ -9,7 +9,7 @@ import { classes, indentStyle } from '../style'
 import type { SortableItemProps } from './types'
 import useOutsideClick from '@/hooks/use-outside-click'
 import { createPortal } from 'react-dom'
-import { ControlMenu, ControlInput } from '../sidebar-header'
+import { ControlOption, ControlInput } from '../sidebar-header'
 import { useModal } from '@/contexts/modal'
 import { CustomEventDetail } from '@/types'
 import { nextraCustomEventName } from '@/index'
@@ -24,6 +24,7 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     setActionInfo,
     actionInfo,
     isEditAction,
+    reset,
   } = useSidebar()
   const { onOpen: onOpenModal, onClose: onCloseModal, isConfirm, mode } = useModal()
   const [mousePosition, setMousePosition] = useState({ top: 0, left: 0 })
@@ -76,6 +77,7 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     if (!isDeleteTarget) return
     onDispatchDeleteEvent()
     onCloseModal()
+    reset()
   }, [isConfirm])
 
   useEffect(() => {
@@ -159,7 +161,7 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
       onContextMenu={onOpenMenu}
     >
       {createPortal(
-        <ControlMenu
+        <ControlOption
           ref={menuRef}
           isOpen={showMenuId === item.id}
           position={mousePosition}

packages/markdown-editor/src/components/sidebar/sidebar-header/utils/index.ts renamed to packages/markdown-editor/src/components/sidebar/utils/findFolder.ts

@@ -1,4 +1,4 @@
-import { Folder, PageMapItem } from '@/nextra/types'
+import type { Folder, PageMapItem } from '@/nextra/types'
 
 export function findFolder(pageMap: PageMapItem[], route: string): Folder | undefined {
   const folders = pageMap.filter((page) => page.kind === 'Folder')

packages/markdown-editor/src/components/sidebar/utils/index.ts

@@ -7,6 +7,7 @@ import { customListSortingStrategy } from './customListSortingStrategy'
 import { dropAnimation } from './dropAnimation'
 import { keyboardCoordinates } from './keyborardCoordinates'
 import { normalizePageToTreeData } from './normalizePageToTreeData'
+import { findFolder } from './findFolder'
 
 export const MAX_DEPTH = 3
 
@@ -284,4 +285,5 @@ export {
   customListSortingStrategy,
   dropAnimation,
   keyboardCoordinates,
+  findFolder,
 }

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

@@ -51,6 +51,7 @@ type Sidebar = {
   setShowMenuId: (value: string | null) => void
   isAddAction: (args: any) => boolean
   isEditAction: (args: any) => boolean
+  isDeleteAction: (args: any) => boolean
 }
 
 let collapsedTree = new Set<string>()
@@ -85,6 +86,7 @@ const SidebarContext = createContext<Sidebar>({
   setShowMenuId: () => {},
   isAddAction: () => false,
   isEditAction: () => false,
+  isDeleteAction: () => false,
 })
 
 export function useSidebar() {
@@ -115,7 +117,10 @@ export const SidebarProvider = ({ children }: { children: ReactNode }): ReactEle
     setFolding(value)
   }
 
-  function setActionInformation<T = 'add' | 'edit'>(args: ActionInfo<T>): void {
+  function setActionInformation<T = 'add' | 'edit' | 'delete'>(args: ActionInfo<T>): void {
+    if (!isActionActive) {
+      setIsActionActive(true)
+    }
     setActionInfo(args as any)
   }
 
@@ -127,6 +132,10 @@ export const SidebarProvider = ({ children }: { children: ReactNode }): ReactEle
     return args.action === 'edit'
   }
 
+  function isDeleteAction(args: any): args is DeleteActionInfo {
+    return args.action === 'delete'
+  }
+
   const value: Sidebar = {
     originSortableItems,
     setOriginSortableItems,
@@ -147,6 +156,7 @@ export const SidebarProvider = ({ children }: { children: ReactNode }): ReactEle
     setShowMenuId,
     isAddAction,
     isEditAction,
+    isDeleteAction,
   }
 
   return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>