feat: add delete item info

Author: winverse

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

@@ -3,9 +3,11 @@ import cn from 'clsx'
 import { useModal } from '@/contexts/modal'
 import { ModalWrapper } from './modal-wrapper'
 import { X } from 'lucide-react'
+import { DeleteActionInfo, useSidebar } from '@/contexts/sidebar'
 
 export const DeleteSortableItemModal: React.FC = () => {
   const { onClose, mode, isOpen, setIsConfirm } = useModal()
+  const { actionInfo } = useSidebar()
 
   const onCloseModal = () => {
     onClose()
@@ -15,13 +17,16 @@ export const DeleteSortableItemModal: React.FC = () => {
     setIsConfirm(true)
   }
 
+  if (!actionInfo) return null
+
+  const action = actionInfo as DeleteActionInfo
   const isVisible = isOpen && mode === 'deleteSortableItem'
   return (
     <ModalWrapper isVisible={isVisible} onOverlayClick={onClose}>
       <div
         className={cn(
-          'nx-flex nx-w-[320px]  nx-max-w-sm nx-flex-col nx-rounded-lg nx-bg-white nx-p-6 dark:nx-bg-gray-800',
-          'nx-text-gray-900 dark:nx-text-gray-100',
+          'nx-flex nx-w-[320px] nx-max-w-sm  nx-select-none nx-flex-col nx-rounded-lg',
+          'nx-bg-white nx-p-6 nx-text-gray-900 dark:nx-bg-gray-800 dark:nx-text-gray-100',
           isVisible ? 'popInFromBottom' : 'popOutToBottom',
         )}
       >
@@ -34,10 +39,13 @@ export const DeleteSortableItemModal: React.FC = () => {
             <X size={24} />
           </button>
         </div>
-        <p className="nx-mb-6 nx-text-gray-600 dark:nx-text-gray-300">
-          이 항목을 삭제하시겠습니까?
-        </p>
-        <div className="nx-flex nx-justify-end nx-space-x-4">
+        <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">
+            하위 항목도 모두 함께 삭제됩니다.
+          </p>
+        )}
+        <div className="nx-mt-6 nx-flex nx-justify-end nx-space-x-4">
           <button
             onClick={onCloseModal}
             className="nx-rounded nx-bg-gray-200 nx-px-4 nx-py-2 nx-text-gray-600 hover:nx-bg-gray-300 dark:nx-bg-gray-700 dark:nx-text-gray-300 dark:hover:nx-bg-gray-600"

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

@@ -29,6 +29,7 @@ export function ControlInput({ type }: Props): ReactElement {
   const forbiddenCharsRegex = /[<>#%"{}|\^~\[\]`\/:@=&+$,;!*()\\']/
   const typeName = nameMapper[type]
 
+  // validate title
   useEffect(() => {
     if (title === null || title === '') return
     if (forbiddenCharsRegex.test(title)) {
@@ -69,12 +70,14 @@ export function ControlInput({ type }: Props): ReactElement {
 
   const dispatchEvent = useDebouncedCallback(
     useCallback(() => {
+      if (type === '') return
+      if (title === null) return
+      if (title.trim() === '') return
+      if (error) return
       if (sidebar.actionInfo === null) return
+
       if (isAddAction(sidebar.actionInfo)) {
         const { parentUrlSlug, bookUrlSlug, index, type } = sidebar.actionInfo
-        if (type === '') return
-        if (!title) return
-        if (error) return
         const event = new CustomEvent<CustomEventDetail['createItemEvent']>(
           nextraCustomEventName.createItemEvent,
           {
@@ -85,9 +88,6 @@ export function ControlInput({ type }: Props): ReactElement {
       }
 
       if (isEditAction(sidebar.actionInfo)) {
-        if (type === '') return
-        if (title === null) return
-        if (error) return
         const { pageUrlSlug } = sidebar.actionInfo
         const event = new CustomEvent<CustomEventDetail['updateItemEvent']>(
           nextraCustomEventName.updateItemEvent,
@@ -97,7 +97,7 @@ export function ControlInput({ type }: Props): ReactElement {
         )
         window.dispatchEvent(event)
       }
-    }, [title, error, sidebar.actionInfo]),
+    }, [title, error, sidebar.actionInfo, type]),
     1000,
     { leading: true },
   )

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

@@ -86,7 +86,7 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
       return
     }
 
-    // Check if the editing item is different
+    // 이름 변경할 대상이 다른 아이템으로 변경 된 경우
     const editActionInfo = actionInfo as EditActionInfo
     if (editActionInfo.pageUrlSlug === item.urlSlug) return
     setIsEdit(false)
@@ -112,6 +112,11 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     onCloseMenu()
     setIsDeleteTarget(true)
     onOpenModal('deleteSortableItem')
+    setActionInfo<'delete'>({
+      action: 'delete',
+      title: item.title,
+      childrenCount: item.children.length,
+    })
   }
 
   const onEdit = () => {

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

@@ -5,7 +5,9 @@ type ActionInfo<T = string> = T extends 'add'
   ? AddActionInfo
   : T extends 'edit'
     ? EditActionInfo
-    : null
+    : T extends 'delete'
+      ? DeleteActionInfo
+      : null
 
 export type AddActionInfo = {
   action: 'add'
@@ -21,6 +23,12 @@ export type EditActionInfo = {
   pageUrlSlug?: string
 }
 
+export type DeleteActionInfo = {
+  action: 'delete'
+  title: string
+  childrenCount: number
+}
+
 export type PageType = 'folder' | 'page' | 'separator' | ''
 
 type Sidebar = {