revert(toc): restore Table of Contents to pre-refactor state

Reverts TOC components to commit 6a52451 (before 2a3eb08 refactor).
The refactor caused build issues on Linux due to case-sensitivity.

Restored:
- RenderToc.tsx, RenderTocs.tsx (root + mobile/)
- Original hooks (useActiveHeading, useHandelTocUpdate, etc.)
- Original components (ContextMenuItems, DocTitleChatRoom, etc.)
- helper.ts

Removed:
- New TocMobile.tsx, index.ts, types.ts
- New hooks (useTocItems, useHeadingActions, useScrollToHeading, etc.)
- New components (TocItem, TocContextMenu, DocTitle, etc.)

Author: HMarzban

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

@@ -122,7 +122,7 @@ const buttonWrapper = (
     url.searchParams.set('id', headingId)
     window.history.pushState({}, '', url.toString())
     copyToClipboard(url.href, () => {
-      console.info('Link copied to clipboard')
+      console.log('Link copied to clipboard')
     })
     editor
       .chain()
@@ -154,37 +154,25 @@ const appendButtonsDec = (doc: ProseMirrorNode, editor: TipTapEditor): Decoratio
 }
 
 const handleHeadingToggle = (editor: TipTapEditor, { headingId }: EditorEventData): void => {
-  // Guard: check if editor is available and has a mounted view
-  // tiptap throws when accessing .view if not mounted, so we need try-catch
-  let editorDom: Element | null = null
-  try {
-    editorDom = editor?.view?.dom
-  } catch {
-    console.warn('[HeadingButtons] Editor view not available yet')
-    return
-  }
-
-  if (!editorDom) {
-    console.warn('[HeadingButtons] Editor DOM not available')
-    return
-  }
+  const { tr } = editor.state
+  const headingNodeEl = editor.view.dom.querySelector(
+    `.ProseMirror .heading[data-id="${headingId}"]`
+  )
 
   if (isProcessing) return
   isProcessing = true
 
-  const { tr } = editor.state
-  const headingNodeEl = editorDom.querySelector(`.ProseMirror .heading[data-id="${headingId}"]`)
-
   if (!headingNodeEl) {
     isProcessing = false
     return
   }
 
+  // TODO: I have no idea why this is working like this!
+
   let nodePos
   try {
     nodePos = editor.view.state.doc.resolve(editor.view.posAtDOM(headingNodeEl))
-  } catch {
-    console.warn('[HeadingButtons] Error getting node position')
+  } catch (error) {
     isProcessing = false
     return
   }

packages/webapp/src/components/TipTap/tableOfContents/RenderToc.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { CaretRight, ChatLeft } from '@icons'
+import { useStore, useChatStore } from '@stores'
+import { toggleHeadingSection, handelScroll2Header } from './helper'
+import AvatarStack from '@components/AvatarStack'
+
+import usePresentUsers from './hooks/usePresentUsers'
+import useActiveHeading from './hooks/useActiveHeading'
+import useOpenChatContainer from './hooks/useOpenChatContainer'
+import useUnreadMessage from './hooks/useUnreadMessage'
+import useOpenChatroomHandler from './hooks/useOpenChatroomHandler'
+
+export const RenderToc = ({ childItems, item, renderTocs }: any) => {
+  const { headingId } = useChatStore((state) => state.chatRoom)
+  const {
+    editor: { instance: editor }
+  } = useStore((state) => state.settings)
+
+  const presentUsers = usePresentUsers(item.id)
+  const [activeHeading, setActiveHeading] = useActiveHeading()
+  const unreadMessage = useUnreadMessage(item)
+  const openChatContainerHandler = useOpenChatContainer()
+
+  if (!editor) return
+
+  return (
+    <li
+      key={item.id}
+      className={`toc__item relative w-full ${item.open ? '' : 'closed'} `}
+      data-id={item.id}
+      data-offsettop={item.offsetTop}>
+      <a
+        className={`group relative ${headingId === item.id ? 'active' : ''} ${headingId === item.id && 'activeTocBorder bg-gray-300'}`}
+        onClick={(e) => handelScroll2Header(e, editor, setActiveHeading, true)}
+        href={`?${item.id}`}
+        data-id={item.id}>
+        <span className="toc__link wrap-anywhere">{item.text}</span>
+        <span
+          className={`btnFold tooltip tooltip-top ${item.open ? 'opened' : 'closed'}`}
+          onClick={() => toggleHeadingSection(item)}
+          data-tip="Toggle">
+          <CaretRight size={17} fill="#363636" />
+        </span>
+        <span
+          className="btn_chat tooltip tooltip-top relative ml-auto"
+          onClick={() => openChatContainerHandler(item)}
+          data-tip="Chat Room">
+          {unreadMessage > 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">
+              {unreadMessage > 99 ? '99+' : unreadMessage}
+            </div>
+          )}
+          <ChatLeft
+            className={`btnChat ${unreadMessage > 0 && 'hidden'} group-hover:fill-docsy cursor-pointer transition-all hover:fill-indigo-900`}
+            size={18}
+          />
+        </span>
+
+        <div className="absolute relative -right-5">
+          {presentUsers.length > 0 && (
+            <AvatarStack
+              size={8}
+              users={presentUsers}
+              showStatus={true}
+              tooltipPosition="tooltip-left"
+            />
+          )}
+        </div>
+      </a>
+
+      {childItems.length > 0 && (
+        <ul className={`childrenWrapper ${item.open ? '' : 'hidden'}`}>{renderTocs(childItems)}</ul>
+      )}
+    </li>
+  )
+}

packages/webapp/src/components/TipTap/tableOfContents/RenderTocs.tsx

@@ -0,0 +1,21 @@
+import { RenderToc } from './RenderToc'
+
+export const RenderTocs = (items: any) => {
+  const renderedItems = []
+
+  for (let i = 0; i < items.length; ) {
+    const item = items[i]
+    const children = []
+    let j = i + 1
+
+    while (j < items.length && items[j].level > item.level) {
+      children.push(items[j])
+      j++
+    }
+    renderedItems.push(
+      <RenderToc key={j * i} childItems={children} item={item} renderTocs={RenderTocs} />
+    )
+    i = j
+  }
+  return renderedItems
+}

packages/webapp/src/components/TipTap/tableOfContents/TocDesktop.tsx

@@ -1,72 +1,82 @@
-import React, { memo, useRef, useState, useCallback } from 'react'
-import { ContextMenu } from '@components/ui/ContextMenu'
+import React, { useEffect, useRef, useState } from 'react'
+import { useChatStore } from '@stores'
+import useHandelTocUpdate from './hooks/useHandelTocUpdate'
+import { RenderTocs } from './RenderTocs'
+import { DocTitleChatRoomDesktop } from './components/DocTitleChatRoom'
 import AppendHeadingButton from '@components/pages/document/components/AppendHeadingButton'
-import { DocTitle, TocList, TocContextMenu } from './components'
-import { useTocItems } from './hooks'
+import { ContextMenu } from '@components/ui/ContextMenu'
+import ContextMenuItems from './components/ContextMenuItems'
 
-interface TocDesktopProps {
-  className?: string
+const removeContextMenuActiveClass = () => {
+  const tocItems = document.querySelectorAll('.toc__item a.context-menu-active')
+  tocItems.forEach((item: Element) => {
+    item.classList.remove('context-menu-active')
+  })
 }
 
-const TocDesktop = memo(({ className = '' }: TocDesktopProps) => {
-  const items = useTocItems()
+const TOCDesktop = ({ className }: any) => {
+  const { headingId } = useChatStore((state) => state.chatRoom)
+  const [renderedTocs, setRenderedTocs] = useState([])
+  const { items } = useHandelTocUpdate()
   const contextMenuRef = useRef<HTMLDivElement>(null)
-  const [contextTarget, setContextTarget] = useState<Element | null>(null)
+  const [contextMenuState, setContextMenuState] = useState<{
+    tocItem: Element | null
+  }>({
+    tocItem: null
+  })
 
-  const handleBeforeContextMenu = useCallback((e: any) => {
-    const tocItem = e.target.closest('.toc__item') as Element | null
+  useEffect(() => {
+    if (!items.length) return
+    const tocs = RenderTocs(items)
+    // @ts-ignore
+    setRenderedTocs(tocs)
+  }, [items, headingId])
+
+  const handleBeforeShow = (e: any) => {
+    const tocItem = e.target.closest('.toc__item') ?? null
     if (!tocItem) return null
+    setContextMenuState({ tocItem })
 
-    // Remove any existing highlight
-    document.querySelectorAll('.toc__item a.context-menu-active').forEach((el) => {
-      el.classList.remove('context-menu-active')
-    })
+    removeContextMenuActiveClass()
 
-    // Highlight current item
     const tocId = tocItem.getAttribute('data-id')
+
+    // Add CSS class to highlight the toc item
     tocItem.querySelector(`a[data-id="${tocId}"]`)?.classList.add('context-menu-active')
 
-    setContextTarget(tocItem)
     return tocItem
-  }, [])
-
-  const handleContextMenuClose = useCallback(() => {
-    setContextTarget(null)
-    document.querySelectorAll('.toc__item a.context-menu-active').forEach((el) => {
-      el.classList.remove('context-menu-active')
+  }
+  const handleContextMenuClose = () => {
+    setContextMenuState({
+      tocItem: null
     })
-  }, [])
-
-  // Empty state
-  if (!items.length) {
+    // Remove CSS class from the toc item
+    // find all .toc__item and the remove the class
+    removeContextMenuActiveClass()
+  }
+  if (!items.length)
     return (
-      <div className={className} style={{ scrollbarGutter: 'stable' }}>
-        <DocTitle className="my-1" variant="desktop" />
+      <div className={`${className}`} style={{ scrollbarGutter: 'stable' }}>
+        <DocTitleChatRoomDesktop className="my-1" />
       </div>
     )
-  }
 
   return (
-    <div className={className} style={{ scrollbarGutter: 'stable' }} ref={contextMenuRef}>
-      <DocTitle className="my-1" variant="desktop" />
-
+    <div className={`${className}`} style={{ scrollbarGutter: 'stable' }} ref={contextMenuRef}>
+      <DocTitleChatRoomDesktop className="my-1" />
       <ul className="toc__list menu w-full p-0">
         <ContextMenu
           className="menu bg-base-100 absolute z-20 m-0 rounded-md p-2 shadow-md outline-none"
           parrentRef={contextMenuRef}
-          onBeforeShow={handleBeforeContextMenu}
+          onBeforeShow={handleBeforeShow}
           onClose={handleContextMenuClose}>
-          <TocContextMenu tocElement={contextTarget} />
+          <ContextMenuItems tocItem={contextMenuState?.tocItem} />
         </ContextMenu>
-
-        <TocList items={items} variant="desktop" />
+        {renderedTocs}
       </ul>
-
       <AppendHeadingButton className="mt-4" />
     </div>
   )
-})
-
-TocDesktop.displayName = 'TocDesktop'
+}
 
-export default TocDesktop
+export default React.memo(TOCDesktop)