feat(toc): drag-and-drop for TOC, Second 🖐️2️⃣

Author: HMarzban

packages/webapp/src/components/AvatarStack.tsx

@@ -1,6 +1,4 @@
-import React from 'react'
 import { twMerge } from 'tailwind-merge'
-
 import { Avatar } from './ui/Avatar'
 
 type StackUser = {
@@ -11,55 +9,58 @@ type StackUser = {
   status?: string | null
 }
 
+type TooltipPosition = 'tooltip-top' | 'tooltip-bottom' | 'tooltip-left' | 'tooltip-right'
+
 type AvatarStackProps = {
   users?: StackUser[]
   size?: number
-  tooltipPosition?: string
+  tooltipPosition?: TooltipPosition
   showStatus?: boolean
   clickable?: boolean
   maxDisplay?: number
   className?: string
 }
 
-const AvatarStack: React.FC<AvatarStackProps> = ({
+export function AvatarStack({
   users = [],
   size = 9,
   tooltipPosition = 'tooltip-bottom',
   showStatus = false,
   clickable = true,
   maxDisplay = 4,
   className
-}) => {
-  const safeUsers = Array.isArray(users)
-    ? users.filter((user): user is StackUser => Boolean(user))
-    : []
-  const visibleUsers = safeUsers.slice(0, maxDisplay)
-  const remainingUsers = Math.max(safeUsers.length - maxDisplay, 0)
+}: AvatarStackProps) {
+  // Filter out null/undefined users
+  const validUsers = users.filter(Boolean) as StackUser[]
+
+  // Ensure maxDisplay is a positive number
+  const limit = Math.max(1, Number(maxDisplay) || 4)
+  const visibleUsers = validUsers.slice(0, limit)
+  const remainingCount = Math.max(0, validUsers.length - limit)
 
-  const groupClassName = twMerge('avatar-group -space-x-5', className)
-  const tooltipClasses = tooltipPosition ? `tooltip ${tooltipPosition}` : undefined
   const sizeClass = `size-${size}`
 
   return (
-    <div className={groupClassName}>
-      {visibleUsers.map((user, index) => (
+    <div className={twMerge('avatar-group -space-x-5 !overflow-visible', className)}>
+      {visibleUsers.map((user, idx) => (
         <Avatar
-          key={user?.id ?? `avatar-${index}`}
-          avatarUpdatedAt={user?.avatar_updated_at}
-          className={twMerge('bg-gray-300 shadow-xl', sizeClass, tooltipClasses)}
-          data-tip={user?.display_name || 'Anonymous'}
-          id={user?.id}
-          src={user?.avatar_url ?? undefined}
-          alt={user?.display_name ?? undefined}
-          status={showStatus ? user?.status ?? undefined : undefined}
+          key={user.id ?? `avatar-${idx}`}
+          id={user.id}
+          src={user.avatar_url ?? undefined}
+          alt={user.display_name ?? undefined}
+          avatarUpdatedAt={user.avatar_updated_at}
+          status={showStatus ? (user.status ?? undefined) : undefined}
           clickable={clickable}
+          className={twMerge('bg-gray-300 shadow-xl', sizeClass)}
+          tooltip={user.display_name || 'Anonymous'}
+          tooltipPosition={tooltipPosition}
         />
       ))}
 
-      {remainingUsers > 0 && (
+      {remainingCount > 0 && (
         <div className={twMerge('avatar avatar-placeholder border', sizeClass)}>
           <div className={twMerge('bg-neutral text-neutral-content text-sm', sizeClass)}>
-            +{remainingUsers}
+            +{remainingCount}
           </div>
         </div>
       )}

packages/webapp/src/components/TipTap/extentions/plugins/headingButtonsPlugin.ts

@@ -14,6 +14,7 @@ import { copyToClipboard } from '../helper'
 import { CHAT_OPEN } from '@services/eventsHub'
 import { ChatLeftSVG, ArrowDownSVG } from '@icons'
 import { db } from '@db/headingCrinckleDB'
+import { useStore } from '@stores'
 
 // Plugin-specific types
 interface HeadingBlock {
@@ -159,94 +160,74 @@ const appendButtonsDec = (doc: ProseMirrorNode, editor: TipTapEditor): Decoratio
   return DecorationSet.create(doc, decos)
 }
 
-const handleHeadingToggle = (editor: TipTapEditor, { headingId }: EditorEventData): void => {
-  // Safety check: ensure editor view is available
-  if (!editor?.view?.dom) {
-    console.warn('[headingButtonsPlugin] Editor view not available')
-    return
-  }
-
-  if (isProcessing) return
+const handleHeadingToggle = (_editor: TipTapEditor, { headingId }: EditorEventData): void => {
+  if (isProcessing || !headingId) return
   isProcessing = true
 
-  const { tr } = editor.state
-  const headingNodeEl = editor.view.dom.querySelector(
+  // Get editor from store - safer than using passed reference
+  const editor = useStore.getState().settings.editor.instance
+  const headingNodeEl = document.querySelector(
     `.ProseMirror .heading[data-id="${headingId}"]`
-  )
+  ) as HTMLElement | null
 
-  if (!headingNodeEl) {
+  if (!editor?.view || !headingNodeEl) {
     isProcessing = false
     return
   }
 
-  let nodePos
-  try {
-    nodePos = editor.view.state.doc.resolve(editor.view.posAtDOM(headingNodeEl, 0))
-  } catch {
-    isProcessing = false
-    return
-  }
+  const view = editor.view
+  const tr = editor.state.tr
+  const nodePos = view.state.doc.resolve(view.posAtDOM(headingNodeEl, 0))
+  const currentNode = tr.doc.nodeAt(nodePos.pos)
 
-  if (!nodePos) {
+  if (!currentNode) {
     isProcessing = false
     return
   }
 
-  // if (editor.isEditable) {
-  const pos = nodePos.pos
-  const currentNode = tr.doc.nodeAt(pos)
-  // Mark as fold/unfold transaction - TOC will be updated via PubSub with delay
   tr.setMeta(TRANSACTION_META.FOLD_AND_UNFOLD, true)
 
   const documentId = localStorage.getItem('docId')
   const headingMapString = localStorage.getItem('headingMap')
   const headingMap: HeadingState[] = headingMapString ? JSON.parse(headingMapString) : []
-  const nodeState = headingMap.find((h: HeadingState) => h.headingId === headingId) || {
-    crinkleOpen: true
-  }
+  const nodeState = headingMap.find((h) => h.headingId === headingId) || { crinkleOpen: true }
   const filterMode = document.body.classList.contains('filter-mode')
-  let database = filterMode ? db.docFilter : db.meta
+  const database = filterMode ? db.docFilter : db.meta
 
-  // In filter mode, avoid saving the heading map to prevent overwriting the primary heading filter.
-  if (filterMode) {
-    if (editor.view) {
-      editor.view.dispatch(tr)
-      dispatchToggleHeadingSection(headingNodeEl)
-    }
+  const dispatch = () => {
+    view.dispatch(tr)
+    dispatchToggleHeadingSection(headingNodeEl)
     isProcessing = false
+  }
+
+  // In filter mode, skip saving to DB
+  if (filterMode) {
+    dispatch()
     return
   }
 
-  if (documentId && currentNode && headingId) {
-    database
-      .put({
-        docId: documentId,
-        headingId,
-        crinkleOpen: !nodeState.crinkleOpen,
-        level: currentNode.attrs.level
-      })
-      .then(() => {
-        database.toArray().then((data: any[]) => {
-          localStorage.setItem('headingMap', JSON.stringify(data))
-        })
-        // Safety check: editor view may be destroyed during async operation
-        if (editor.view) {
-          editor.view.dispatch(tr)
-          dispatchToggleHeadingSection(headingNodeEl)
-        }
-        isProcessing = false
-      })
-      .catch((err: Error) => {
-        console.error(err)
-        isProcessing = false
-      })
-  } else {
-    console.error('headingId is not defined')
+  if (!documentId) {
     isProcessing = false
+    return
   }
-  // } else {
-  //   isProcessing = false
-  // }
+
+  database
+    .put({
+      docId: documentId,
+      headingId,
+      crinkleOpen: !nodeState.crinkleOpen,
+      level: currentNode.attrs.level
+    })
+    .then(() => {
+      database.toArray().then((data: any[]) => {
+        localStorage.setItem('headingMap', JSON.stringify(data))
+      })
+      dispatch()
+    })
+    .catch((err: Error) => {
+      console.error(err)
+      isProcessing = false
+    })
 }
 
 /**

packages/webapp/src/components/pages/document/components/Toc.tsx

@@ -17,7 +17,7 @@ const TOC = ({ className = '' }: { className?: string }) => {
 
   return (
     <TocDesktop
-      className={`${className} tiptap__toc h-full w-full overflow-hidden overflow-y-auto scroll-smooth pr-10 pb-4 hover:overscroll-contain sm:py-4 sm:pb-14`}
+      className={`${className} tiptap__toc h-full w-full overflow-hidden overflow-y-auto scroll-smooth hover:overscroll-contain`}
     />
   )
 }

packages/webapp/src/components/toc/TocDesktop.tsx

@@ -6,7 +6,7 @@ import { MdAccountTree } from 'react-icons/md'
 import { useToc, useTocAutoScroll, useTocDrag } from './hooks'
 import { buildNestedToc } from './utils'
 import { TocHeader } from './TocHeader'
-import { TocItem } from './TocItem'
+import { TocItemDesktop } from './TocItemDesktop'
 import { TocContextMenu } from './TocContextMenu'
 import { ContextMenu } from '@components/ui/ContextMenu'
 import AppendHeadingButton from '@components/pages/document/components/AppendHeadingButton'
@@ -30,8 +30,15 @@ export function TocDesktop({ className = '' }: TocDesktopProps) {
   useTocAutoScroll()
 
   const { state, activeItem, flatItems, sensors, handlers } = useTocDrag(items)
-  const { activeId, projectedLevel, originalLevel, collapsedIds, descendantCount, dropTarget } =
-    state
+  const {
+    activeId,
+    projectedLevel,
+    originalLevel,
+    collapsedIds,
+    descendantCount,
+    dropTarget,
+    sourceRect
+  } = state
 
   const [contextMenuState, setContextMenuState] = useState<{
     headingId: string | null
@@ -93,13 +100,11 @@ export function TocDesktop({ className = '' }: TocDesktopProps) {
               />
             </ContextMenu>
             {nestedItems.map(({ item, children }) => (
-              <TocItem
+              <TocItemDesktop
                 key={item.id}
                 item={item}
-                children={children}
-                variant="desktop"
+                childItems={children}
                 onToggle={toggleSection}
-                draggable
                 activeId={activeId}
                 collapsedIds={collapsedIds}
               />
@@ -127,20 +132,22 @@ export function TocDesktop({ className = '' }: TocDesktopProps) {
                   ))}
               </div>
 
-              {/* Drag card */}
+              {/* Drag card - matches source element size */}
               <div
                 ref={overlayRef}
-                className={`toc-drag-card ${descendantCount > 0 ? 'has-children' : ''}`}>
+                className="toc-drag-card"
+                style={
+                  sourceRect
+                    ? { width: sourceRect.width, minHeight: sourceRect.height, height: 'auto' }
+                    : undefined
+                }>
                 {descendantCount > 0 && <MdAccountTree className="toc-tree-icon" size={14} />}
                 <span className="toc__link wrap-anywhere">{activeItem.textContent}</span>
                 {descendantCount > 0 && (
                   <span className="toc-descendant-badge">+{descendantCount}</span>
                 )}
                 {descendantCount > 0 && (
-                  <>
-                    <div className="toc-stack-card toc-stack-card--back" />
-                    <div className="toc-stack-card toc-stack-card--mid" />
-                  </>
+                  <div className="toc-stack-indicator" data-count={Math.min(descendantCount, 3)} />
                 )}
               </div>
             </div>

packages/webapp/src/components/toc/TocHeader.tsx

@@ -60,17 +60,17 @@ export function TocHeader({ variant }: TocHeaderProps) {
   }
 
   return (
-    <div className="relative border-b border-gray-300 pb-1">
+    <div className="relative w-full border-b border-gray-300 pb-1">
       <div
-        className={`group flex cursor-pointer items-center justify-between rounded-md p-1 px-2 pr-3 hover:bg-gray-300 hover:bg-opacity-50 ${isActive && 'activeTocBorder bg-gray-300'}`}
+        className={`group hover:bg-opacity-50 flex cursor-pointer items-center justify-between gap-0.5 rounded-md p-1 px-2 pr-3 hover:bg-gray-300 ${isActive && 'activeTocBorder bg-gray-300'}`}
         onClick={handleClick}>
         <span className="text-lg font-bold">{docMetadata?.title}</span>
         <span
           className="btn_chat tooltip tooltip-top relative ml-auto"
           onClick={handleChatClick}
           data-tip="Chat Room">
           {unreadCount > 0 && (
-            <div className="badge badge-docsy badge-sm bg-docsy border-docsy absolute top-1/2 z-[1] -translate-y-1/2 scale-90 border border-none text-white">
+            <div className="badge badge-docsy badge-sm bg-docsy border-docsy scale-90 border border-none text-white">
               {unreadCount > 99 ? '99+' : unreadCount}
             </div>
           )}