feat: drag and drop image upload

Author: winverse

.gitignore

@@ -24,3 +24,7 @@
 out
 # Turborepo
 .turbo
+
+
+# Claude
+.gpt-runner

packages/nextra-editor/package.json

@@ -93,6 +93,7 @@
     "tsx": "^4.11.2",
     "unist-util-remove": "^4.0.0",
     "unist-util-visit": "^5.0.0",
+    "use-debounce": "^10.0.1",
     "zod": "^3.22.3"
   },
   "devDependencies": {

packages/nextra-editor/src/components/sidebar/index.tsx

@@ -99,14 +99,10 @@ export function Sidebar({
   const hasMenu = config.darkMode || hasI18n || config.sidebar.toggleButton
   const [route] = routeOriginal.split('#')
 
-  const initSotableItems: SortableItem[] = useMemo(
-    () => initilizeDirectories(docsDirectories, route, collapsedTree),
-    [docsDirectories],
-  )
-
   useEffect(() => {
+    const initSotableItems = initilizeDirectories(docsDirectories, route, collapsedTree)
     setSortableItems(initSotableItems)
-  }, [initSotableItems])
+  }, [docsDirectories])
 
   const initFullDirectories: SortableItem[] = useMemo(
     () => initilizeDirectories(fullDirectories, route, collapsedTree),

packages/nextra-editor/src/components/sidebar/sidebar-controller/control-icon.tsx

@@ -19,26 +19,19 @@ const ControlIcon = ({ className, type }: Props) => {
   const timeoutRef = useRef<NodeJS.Timeout>()
   const [originSortableItems, setOriginSortableItems] = useState<SortableItem[]>([])
 
-  useEffect(() => {
-    if (sidebar.actionType !== type) return
-    if (!sidebar.actionComplete) return
-    sidebar.reset(originSortableItems)
-    return () => {
-      if (!timeoutRef.current) return
-      clearTimeout(timeoutRef.current)
-    }
-  }, [sidebar.actionComplete])
-
   const onClick = () => {
     if (sidebar.actionActive) {
-      sidebar.reset(originSortableItems)
+      sidebar.reset()
+      sidebar.setSortableItems(originSortableItems)
       return
     }
 
     sidebar.setActionType(type)
     const timeout = setTimeout(() => sidebar.setActionActive(true), 100)
     timeoutRef.current = timeout
 
+    setOriginSortableItems(sidebar.sortableItems)
+
     // remove code
     let targetRoute = pageUrlSlug
     const isFolder = !!findFolder(sidebar.sortableItems, fullUrlSlug)
@@ -48,7 +41,6 @@ const ControlIcon = ({ className, type }: Props) => {
       targetRoute = targetRoute.split('/').slice(0, -1).join('/') || '/'
     }
 
-    setOriginSortableItems(sidebar.sortableItems)
     const coppeidPageMap = structuredClone(sidebar.sortableItems)
 
     function addNewFolderToItem(sortableItems: SortableItem[]) {

packages/nextra-editor/src/components/sidebar/sidebar-controller/control-input.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import cn from 'clsx'
 
 import { ActionType, useSidebar } from '@/contexts/sidebar'
@@ -7,71 +7,92 @@ import { EmptyFolderIcon } from '@/nextra/icons/empty-folder'
 import { EmptyFileIcon } from '@/nextra/icons/empty-file'
 import { SeparatorIcon } from '@/nextra/icons/separator'
 import { type CustomEventDetail, nextraCustomEventName } from '@/index'
+import { useDebouncedCallback } from 'use-debounce'
 
 type Props = {
   type: ActionType
 }
 
 function ControlInput({ type }: Props): ReactElement {
   const sidebar = useSidebar()
-  const [title, setTitle] = useState('')
+  const [title, setTitle] = useState<string | null>(null)
+  const [error, setError] = useState('')
 
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault()
-    setTitle(e.target.value)
+  const nameMapper: Record<ActionType, string> = {
+    folder: '폴더',
+    page: '페이지',
+    separator: '구분선',
+    '': '',
   }
 
-  const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.preventDefault()
-    if ((e.target as any).tagName !== 'INPUT') {
-      onComplete()
-    }
+  const forbiddenCharsRegex = /[<>#%"{}|\^~\[\]`\/:@=&+$,;!*()\\']/
+  const typeName = nameMapper[type]
 
-    if (title) {
-      dispatchEvent()
-      return
+  useEffect(() => {
+    if (title === null) return
+    if (forbiddenCharsRegex.test(title)) {
+      setError(`${typeName} 이름에 사용해서는 안 되는 기호가 포함되어 있습니다.`)
+    } else if (title === '') {
+      setError(`${typeName} 이름을 입력해야 합니다.`)
+    } else {
+      setError('')
     }
-    onCancel()
+  }, [title])
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault()
+    // 두개 이상의 공백은 하나의 공백으로 변경
+    const value = e.target.value.replace(/\s\s+/g, ' ').trim()
+    setTitle(value)
   }
 
   const onComplete = () => {
     if (!sidebar.actionActive) return
-    sidebar.setActionComplete(true)
-  }
-
-  const onCancel = () => {
     setTitle('')
+    dispatchEvent()
   }
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === ' ') {
+      e.preventDefault()
+      setTitle((title) => `${title} `)
+      return
+    }
     if (e.key !== 'Enter') return
     e.preventDefault()
-    onComplete()
     dispatchEvent()
   }
 
-  const dispatchEvent = () => {
-    const { parentUrlSlug, bookUrlSlug, index, type } = sidebar.actionInfo
-    if (type === '') return
-    const event = new CustomEvent<CustomEventDetail['addActionEvent']>(
-      nextraCustomEventName.addActionEvent,
-      {
-        detail: { title, parentUrlSlug, index, bookUrlSlug, type },
-      },
-    )
-    window.dispatchEvent(event)
-  }
+  const dispatchEvent = useDebouncedCallback(
+    () => {
+      const { parentUrlSlug, bookUrlSlug, index, type } = sidebar.actionInfo
+      if (type === '') return
+      if (!title) return
+      if (error) return
+      const event = new CustomEvent<CustomEventDetail['addActionEvent']>(
+        nextraCustomEventName.addActionEvent,
+        {
+          detail: { title, parentUrlSlug, index, bookUrlSlug, type },
+        },
+      )
+      window.dispatchEvent(event)
+      sidebar.reset()
+    },
+    1000,
+    { leading: true },
+  )
 
   const { ref } = useOutsideClick<HTMLDivElement>(onComplete)
+
   if (type === '') return <></>
   return (
     <div
       ref={ref}
       className={cn(
+        'nextra-control-input',
         'nx-flex nx-w-full nx-items-center nx-px-2 nx-py-1.5 [word-break:break-word]',
-        'nx-transition-colors',
+        'nx-relative nx-transition-colors',
       )}
-      onClick={onClick}
     >
       <span>
         {type === 'folder' && <EmptyFolderIcon />}
@@ -85,14 +106,32 @@ 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}
+        value={title === null ? '' : title}
         onChange={onChange}
-        autoFocus={true}
         onKeyDown={onKeyDown}
+        autoFocus={true}
         style={{
           boxShadow: 'none',
         }}
       />
+      {error && (
+        <div
+          className={cn(
+            'nx-absolute nx-left-0 nx-top-[35px] nx-z-10 nx-w-full',
+            'nx-bg-white nx-text-[12px] nx-font-medium nx-text-gray-500',
+            'nx-px-2',
+          )}
+        >
+          <div
+            className={cn(
+              'nx-border dark:nx-border-gray-100/20 dark:nx-bg-dark/50 ',
+              'nx-px-2 nx-py-1',
+            )}
+          >
+            {error}
+          </div>
+        </div>
+      )}
     </div>
   )
 }

packages/nextra-editor/src/components/sidebar/sidebar-controller/control-menu.tsx

@@ -26,7 +26,7 @@ const ControlMenu = forwardRef<HTMLDivElement, Props>(({ isOpen, position }, ref
         'nx-bg-white nx-text-gray-600',
         'dark:nx-bg-neutral-800 dark:nx-text-gray-300',
       )}
-      style={{ top: position.top, left: 280, display: isOpen ? 'block' : 'none' }}
+      style={{ top: position.top, left: 260, display: isOpen ? 'block' : 'none' }}
     >
       <ul>
         <li className={style.list}>

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

@@ -42,6 +42,8 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     !isDragging && !isControlAction && !isGhost && [route, `${route}/`].includes(item.route + '/')
   // const isLink = 'withIndexPage' in item && item.withIndexPage
 
+  const isShowMenu = showMenuId === item.id
+
   useEffect(() => {
     if (isGhost) return
     if (!isOver) return
@@ -109,6 +111,7 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
           !isControlAction && !isDragging && !active && classes.inactiveBgColor,
           isGhost && classes.ghost,
           clone && classes.clone,
+          isShowMenu && classes.showMenuActive,
           isControlAction && '!nx-pr-0',
         )}
         onClick={() => {

packages/nextra-editor/src/components/sidebar/style.tsx

@@ -33,6 +33,7 @@ export const classes = {
     'nx-mb-2 nx-mt-5 nx-text-sm nx-font-semibold nx-text-gray-900 first:nx-mt-0 dark:nx-text-gray-100',
   ),
   over: cn('nx-bg-red-100 dark:nx-bg-primary-100/5'),
+  showMenuActive: cn('nx-bg-gray-100 dark:nx-bg-primary-100/5'),
 }
 
 export const indentStyle = (depth: number, indentationWidth: number): string =>

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

@@ -13,11 +13,9 @@ export type ActionType = 'folder' | 'page' | 'separator' | ''
 type Sidebar = {
   sortableItems: SortableItem[]
   setSortableItems: (item: SortableItem[]) => void
-  reset: (pageMap: SortableItem[]) => void
+  reset: (pageMap?: SortableItem[]) => void
   actionActive: boolean
   setActionActive: (value: boolean) => void
-  actionComplete: boolean
-  setActionComplete: (value: boolean) => void
   actionInfo: ActionInfo
   setActionInfo: (args: ActionInfo) => void
   isFolding: boolean
@@ -50,8 +48,6 @@ const SidebarContext = createContext<Sidebar>({
   reset: () => {},
   actionActive: false,
   setActionActive: () => {},
-  actionComplete: false,
-  setActionComplete: () => {},
   actionInfo: { parentUrlSlug: '/', index: 0, bookUrlSlug: '/', type: 'page' },
   setActionInfo: () => {},
   isFolding: false,
@@ -73,7 +69,6 @@ export function useSidebar() {
 export const SidebarProvider = ({ children }: { children: ReactNode }): ReactElement => {
   const [sortableItems, setSortableItems] = useState<SortableItem[]>([])
   const [isFolding, setFolding] = useState(false)
-  const [actionComplete, setActionComplete] = useState(false)
   const [actionActive, setActionActive] = useState(false)
   const [showMenuId, setShowMenuId] = useState<string | null>(null)
 
@@ -86,12 +81,9 @@ export const SidebarProvider = ({ children }: { children: ReactNode }): ReactEle
     type: 'page',
   })
 
-  const reset = (originSortableItem: SortableItem[]) => {
-    if (originSortableItem.length > 0) {
-      setSortableItems(originSortableItem)
-    }
+  const reset = () => {
+    setSortableItems(sortableItems)
     setActionActive(false)
-    setActionComplete(false)
     setActionType('')
     setFocusedItem(null)
   }
@@ -107,8 +99,6 @@ export const SidebarProvider = ({ children }: { children: ReactNode }): ReactEle
     sortableItems,
     setSortableItems,
     reset,
-    actionComplete,
-    setActionComplete,
     actionActive,
     setActionActive,
     actionInfo,