feat: handle item menu

Author: winverse

packages/nextra-editor/src/components/sidebar/sidebar-controller/add-icons.tsx renamed to packages/nextra-editor/src/components/sidebar/sidebar-controller/control-icon.tsx

@@ -12,7 +12,7 @@ type Props = {
   type: 'page' | 'folder' | 'separator'
 }
 
-const AddIcons = ({ className, type }: Props) => {
+const ControlIcon = ({ className, type }: Props) => {
   const sidebar = useSidebar()
   const { bookUrlSlug, pageUrlSlug, fullUrlSlug } = useUrlSlug()
 
@@ -126,4 +126,4 @@ const AddIcons = ({ className, type }: Props) => {
   )
 }
 
-export default AddIcons
+export default ControlIcon

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

@@ -0,0 +1,31 @@
+import useOutsideClick from '@/hooks/use-outside-click'
+import cn from 'clsx'
+import { forwardRef, RefObject } from 'react'
+
+type Props = {
+  isOpen: boolean
+}
+
+const style = {
+  list: cn('nx-w-full nx-p-3 hover:nx-bg-gray-100'),
+}
+
+const ControlMenu = forwardRef<HTMLDivElement, Props>(({ isOpen }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'nx-absolute nx-right-0 nx-top-0 nx-z-10 nx-py-2',
+        'nx-bg-white',
+        isOpen ? 'nx-visible' : 'nx-invisible',
+      )}
+    >
+      <ul>
+        <li className={style.list}>이름 바꾸기</li>
+        <li className={style.list}>삭제</li>
+      </ul>
+    </div>
+  )
+})
+
+export default ControlMenu

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

@@ -1,6 +1,6 @@
 import cn from 'clsx'
 
-import AddIcons from './add-icons'
+import ControlIcon from './control-icon'
 import CollapseAllIcon from './collapse-all-icon'
 
 type Props = {
@@ -23,9 +23,9 @@ function SidebarController({ showSidebar }: Props) {
         showSidebar ? 'nx-block' : 'nx-hidden',
       )}
     >
-      <AddIcons className={style} type="page" />
-      <AddIcons className={style} type="folder" />
-      <AddIcons className={style} type="separator" />
+      <ControlIcon className={style} type="page" />
+      <ControlIcon className={style} type="folder" />
+      <ControlIcon className={style} type="separator" />
       <CollapseAllIcon className={style} />
     </div>
   )

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

@@ -1,6 +1,6 @@
 import cn from 'clsx'
 import CollapseAllIcon from './collapse-all-icon'
-import AddIcons from './add-icons'
+import AddIcons from './control-icon'
 
 type Props = {
   showSidebar: boolean

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

@@ -8,6 +8,7 @@ import { UniqueIdentifier } from '@dnd-kit/core'
 import { SortableItem } from './sortable-item'
 import { FlattenedItem } from '@/types'
 import { useDndTree } from '.'
+import { useSidebar } from '@/contexts/sidebar'
 
 type Props = {
   className?: string
@@ -32,9 +33,10 @@ const SortableTreeMenuNotMemoized = function SortableItemWrapper({
   depth,
 }: Props) {
   const { overItem } = useDndTree()
+  const { showMenuId } = useSidebar()
   const [previousItem, setPreviousItem] = useState<FlattenedItem | null>(null)
 
-  const disabled = item.name === 'index'
+  const disabled = item.name === 'index' || showMenuId === item.id
   const {
     attributes,
     listeners,
@@ -96,6 +98,7 @@ const SortableTreeMenuNotMemoized = function SortableItemWrapper({
       ...listeners,
     },
     clone,
+    disabled,
   }
 
   return <SortableItem item={item} {...props} />

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

@@ -1,4 +1,4 @@
-import { CSSProperties, forwardRef, useEffect } from 'react'
+import { CSSProperties, forwardRef, MouseEventHandler, useEffect, useState } from 'react'
 import cn from 'clsx'
 import { ActionType, useSidebar } from '@/contexts/sidebar'
 import { useRouter } from 'next/router'
@@ -8,10 +8,14 @@ import { useDndTree } from '.'
 import { classes, indentStyle } from '../style'
 import type { SortableItemProps } from './types'
 import ControlInput from '../sidebar-controller/control-input'
+import ControlMenu from '../sidebar-controller/control-menu'
+import useOutsideClick from '@/hooks/use-outside-click'
 
 export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props, ref) => {
   const { isDragging, overItem, setOverItem } = useDndTree()
-  const { focusedItem, setFocusedItem } = useSidebar()
+  const { focusedItem, setFocusedItem, showMenuId, setShowMenuId } = useSidebar()
+  const [isEdit, setIsEdit] = useState<boolean>(false)
+
   const router = useRouter()
   const routeOriginal = useFSRoute()
   const [route] = routeOriginal.split('#')
@@ -28,6 +32,7 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     clone,
     isOver,
     transform,
+    disabled,
   } = props
 
   const isControlAction = ['newPage', 'newFolder', 'newSeparator'].includes(item.type)
@@ -42,6 +47,22 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     setOverItem({ ...item, transform })
   }, [isOver, isGhost])
 
+  const onOpenMenu = (e: MouseEvent) => {
+    e.preventDefault()
+    if (item.name === 'index') return
+    if (showMenuId === item.id) {
+      setShowMenuId(null)
+    } else {
+      setShowMenuId(item.id)
+    }
+  }
+
+  const onCloseMenu = (e: MouseEvent) => {
+    e.preventDefault()
+    if (item.id !== showMenuId) return
+    setShowMenuId(null)
+  }
+
   const isSeparator = item.type === 'separator'
 
   const wrapperStyle: CSSProperties = {
@@ -61,8 +82,17 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
     newSeparator: 'separator',
   }
 
+  const { ref: menuRef } = useOutsideClick<HTMLDivElement>(onCloseMenu)
+
   return (
-    <li {...handleProps} ref={wrapperRef} style={wrapperStyle}>
+    <li
+      {...handleProps}
+      ref={wrapperRef}
+      style={wrapperStyle}
+      className={cn('nx-relative')}
+      onContextMenu={onOpenMenu}
+    >
+      <ControlMenu isOpen={showMenuId === item.id} ref={menuRef} />
       <div
         ref={ref}
         {...handleProps}
@@ -79,6 +109,8 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
         onClick={() => {
           if (isGhost) return
           if (isSeparator) return
+          if (isEdit) return
+          if (isControlAction) return
 
           if (!item.collapsed) {
             onCollapse(item.id)
@@ -87,7 +119,6 @@ export const SortableItem = forwardRef<HTMLDivElement, SortableItemProps>((props
           }
 
           setFocusedItem(item)
-          if (isControlAction) return
           router.push(item.route, item.route, { shallow: true })
         }}
       >

packages/nextra-editor/src/components/sidebar/sortable-tree/types.ts

@@ -26,6 +26,7 @@ export type SortableItemWrapperProps = {
   onCollapse: (id: UniqueIdentifier) => void
   handleProps: any
   clone: boolean
+  disabled: boolean
 }
 
 export type SortableItemProps = {

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

@@ -28,6 +28,8 @@ type Sidebar = {
   setFocusedItem: (value: SortableItem | null) => void
   collapsedTree: Set<string>
   setCollapsedTree: (id: string, setter: (value: boolean) => boolean) => void
+  showMenuId: string | null
+  setShowMenuId: (value: string | null) => void
 }
 
 let collapsedTree = new Set<string>()
@@ -60,6 +62,8 @@ const SidebarContext = createContext<Sidebar>({
   setFocusedItem: () => {},
   collapsedTree,
   setCollapsedTree,
+  showMenuId: null,
+  setShowMenuId: () => {},
 })
 
 export function useSidebar() {
@@ -71,6 +75,8 @@ export const SidebarProvider = ({ children }: { children: ReactNode }): ReactEle
   const [isFolding, setFolding] = useState(false)
   const [actionComplete, setActionComplete] = useState(false)
   const [actionActive, setActionActive] = useState(false)
+  const [showMenuId, setShowMenuId] = useState<string | null>(null)
+
   const [focusedItem, setFocusedItem] = useState<null | SortableItem>(null)
   const [actionType, setActionType] = useState<ActionType>('')
   const [actionInfo, setActionInfo] = useState<ActionInfo>({
@@ -94,7 +100,6 @@ export const SidebarProvider = ({ children }: { children: ReactNode }): ReactEle
     if (value) {
       collapsedTree = new Set<string>()
     }
-
     setFolding(value)
   }
 
@@ -116,6 +121,8 @@ export const SidebarProvider = ({ children }: { children: ReactNode }): ReactEle
     setFocusedItem,
     collapsedTree,
     setCollapsedTree,
+    showMenuId,
+    setShowMenuId,
   }
 
   return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>