feat: add context menu functionality for table of contents with new hooks and components

- Implemented context menu in TOCDesktop for managing headings (open chat, toggle section, link, focus, delete).
- Added ContextMenuItems component for context menu actions.
- Introduced hooks for handling heading actions (open chatroom, toggle, link, focus, delete).
- Enhanced global dialog for confirmation on heading deletion.
- Updated styles for active context menu items.

Author: HMarzban

packages/webapp/components/TipTap/TipTap.tsx

@@ -199,6 +199,7 @@ const Editor = ({
     Hyperlink.configure({
       protocols: ['ftp', 'mailto'],
       hyperlinkOnPaste: false,
+      autoHyperlink: true,
       popovers: {
         previewHyperlink: previewHyperlink,
         createHyperlink: createHyperlinkPopover

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

@@ -8,6 +8,7 @@ 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)

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

@@ -1,14 +1,29 @@
-import React, { useEffect, useState } from 'react'
+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 { ContextMenu } from '@components/ui/ContextMenu'
+import ContextMenuItems from './components/ContextMenuItems'
+
+const removeContextMenuActiveClass = () => {
+  const tocItems = document.querySelectorAll('.toc__item a.context-menu-active')
+  tocItems.forEach((item: Element) => {
+    item.classList.remove('context-menu-active')
+  })
+}
 
 const TOCDesktop = ({ className }: any) => {
   const { headingId } = useChatStore((state) => state.chatRoom)
   const [renderedTocs, setRenderedTocs] = useState([])
   const { items } = useHandelTocUpdate()
+  const contextMenuRef = useRef<HTMLDivElement>(null)
+  const [contextMenuState, setContextMenuState] = useState<{
+    tocItem: Element | null
+  }>({
+    tocItem: null
+  })
 
   useEffect(() => {
     if (!items.length) return
@@ -17,6 +32,28 @@ const TOCDesktop = ({ className }: any) => {
     setRenderedTocs(tocs)
   }, [items, headingId])
 
+  const handleBeforeShow = (e: any) => {
+    const tocItem = e.target.closest('.toc__item') ?? null
+    if (!tocItem) return null
+    setContextMenuState({ tocItem })
+
+    removeContextMenuActiveClass()
+
+    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')
+
+    return tocItem
+  }
+  const handleContextMenuClose = () => {
+    setContextMenuState({
+      tocItem: null
+    })
+    // 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' }}>
@@ -25,9 +62,18 @@ const TOCDesktop = ({ className }: any) => {
     )
 
   return (
-    <div className={`${className}`} style={{ scrollbarGutter: 'stable' }}>
+    <div className={`${className}`} style={{ scrollbarGutter: 'stable' }} ref={contextMenuRef}>
       <DocTitleChatRoomDesktop className="my-1" />
-      <ul className="toc__list menu p-0">{renderedTocs}</ul>
+      <ul className="toc__list menu p-0">
+        <ContextMenu
+          className="menu bg-base-100 absolute z-20 m-0 rounded-md p-2 shadow-md outline-none"
+          parrentRef={contextMenuRef}
+          onBeforeShow={handleBeforeShow}
+          onClose={handleContextMenuClose}>
+          <ContextMenuItems tocItem={contextMenuState?.tocItem} />
+        </ContextMenu>
+        {renderedTocs}
+      </ul>
       <AppendHeadingButton className="mt-4" />
     </div>
   )

packages/webapp/components/TipTap/tableOfContents/components/ContextMenuItems.tsx

@@ -0,0 +1,166 @@
+import {
+  MdChat,
+  MdOutlineUnfoldLess,
+  MdCenterFocusStrong,
+  MdLink,
+  MdDelete,
+  MdOutlineUnfoldMore
+} from 'react-icons/md'
+import useOpenChatroomHandler from '../hooks/useOpenChatroomHandler'
+import useToggleHeadingSectionHandler from '../hooks/ueToggleHeadingSectionHandler'
+import { MenuItem } from '@components/ui/ContextMenu'
+import { useContextMenuContext } from '@components/ui/ContextMenu'
+import useLinkHeadingSectionHandler from '../hooks/useLinkHeadingSectionHandler'
+import useFocusHeadingSectionHandler from '../hooks/useFocusHeadingSectionHandler'
+import useDeleteHeadingSectionHandler from '../hooks/useDeleteHeadingSectionHandler'
+import { MdOutlineInfo } from 'react-icons/md'
+import useInsertH1Handler from '../hooks/useInsertH1Handler'
+
+const ContextMenuItems = ({ tocItem }: { tocItem: Element | null }) => {
+  const headingId = tocItem?.getAttribute('data-id') ?? null
+  const isOpen = tocItem?.classList.contains('closed') ? false : true
+  const { setIsOpen } = useContextMenuContext()
+
+  // find closet heading
+  const headingEl = document.querySelector(`.heading[data-id="${headingId}"]`)
+  const headingLevel = headingEl?.getAttribute('level')
+
+  if (!headingId) return null
+
+  const openChatroomHandler = useOpenChatroomHandler(headingId)
+  const toggleHeadingSectionHandler = useToggleHeadingSectionHandler(headingId, isOpen)
+  const linkHeadingSectionHandler = useLinkHeadingSectionHandler(headingId)
+  const focusHeadingSectionHandler = useFocusHeadingSectionHandler(headingId)
+  const deleteHeadingSectionHandler = useDeleteHeadingSectionHandler(headingId)
+  const insertH1Handler = useInsertH1Handler(headingId)
+
+  const tocButtonList = [
+    {
+      title: 'Chat Room',
+      icon: <MdChat size={18} />,
+      onClickFn: openChatroomHandler,
+      display: true,
+      className: 'text-docsy'
+    },
+    {
+      title: `${isOpen ? 'Fold' : 'Unfold'} Section`,
+      icon: isOpen ? <MdOutlineUnfoldLess size={18} /> : <MdOutlineUnfoldMore size={18} />,
+      onClickFn: toggleHeadingSectionHandler,
+      display: true,
+      className: ''
+    },
+    {
+      title: 'Focus Section',
+      icon: <MdCenterFocusStrong size={18} />,
+      onClickFn: focusHeadingSectionHandler,
+      display: true,
+      className: ''
+    },
+    {
+      title: 'Link Section',
+      icon: <MdLink size={18} />,
+      onClickFn: linkHeadingSectionHandler,
+      display: true,
+      className: ''
+    },
+    {
+      title: (
+        <>
+          Delete Section
+          <span className="tooltip tooltip-right flex items-center gap-2">
+            <span className="tooltip-content w-48 text-pretty">
+              Delete this heading and all nested sub-headings beneath it
+            </span>
+            <MdOutlineInfo size={18} />
+          </span>
+        </>
+      ),
+      icon: <MdDelete size={18} />,
+      onClickFn: deleteHeadingSectionHandler,
+      display: true,
+      className: 'mt-1 border-t border-gray-300 pt-1 text-red-500'
+    }
+  ]
+
+  const insertButtonList = [
+    {
+      title: 'Heading',
+      icon: <span className="bg-docsy/80 rounded-md px-1 text-xs font-bold text-white">H1</span>,
+      onClickFn: insertH1Handler,
+      display: true,
+      className: 'bg-base-300 my-1 rounded-md'
+    },
+    {
+      title: 'Above',
+      icon: (
+        <span className="bg-docsy/80 rounded-md px-1 text-xs font-bold text-white">
+          H{headingLevel}
+        </span>
+      ),
+      onClickFn: () => {
+        // Handle add above action
+      },
+      display: true,
+      className: ''
+    },
+    {
+      title: 'Below',
+      icon: (
+        <span className="bg-docsy/80 rounded-md px-1 text-xs font-bold text-white">
+          H{headingLevel}
+        </span>
+      ),
+      onClickFn: () => {
+        // Handle add below action
+      },
+      display: true,
+      className: ''
+    }
+  ]
+
+  return (
+    <>
+      {tocButtonList
+        .filter((button) => button.display)
+        .map((button, index) => (
+          <MenuItem
+            key={index}
+            className={button.className}
+            onClick={(e) => {
+              button.onClickFn()
+              setIsOpen(false)
+            }}>
+            <a className="flex items-center gap-2">
+              {button.icon}
+              {button.title}
+            </a>
+          </MenuItem>
+        ))}
+      <li className="mt-1 border-t border-gray-300 pt-1">
+        <details>
+          <summary className="">Insert</summary>
+          <ul>
+            {insertButtonList
+              .filter((button) => button.display)
+              .map((button, index) => (
+                <MenuItem
+                  key={index}
+                  className={button.className}
+                  onClick={(e) => {
+                    button.onClickFn()
+                    setIsOpen(false)
+                  }}>
+                  <a className="flex items-center gap-2">
+                    {button.icon}
+                    {button.title}
+                  </a>
+                </MenuItem>
+              ))}
+          </ul>
+        </details>
+      </li>
+    </>
+  )
+}
+
+export default ContextMenuItems

packages/webapp/components/TipTap/tableOfContents/components/DeleteHeadingDialogContnet.tsx

@@ -0,0 +1,70 @@
+import { useStore } from '@stores'
+import { ResolvedPos } from '@tiptap/pm/model'
+
+type Props = {
+  headingId: string
+}
+
+export const DeleteHeadingDialogContnet = ({ headingId }: Props) => {
+  const {
+    closeDialog,
+    settings: {
+      editor: { instance: editor }
+    }
+  } = useStore()
+
+  const handleDeleteConfirm = async () => {
+    closeDialog()
+    // find the heading node
+    const headingNodeElement = document.querySelector(`.heading[data-id="${headingId}"]`)
+    if (!headingNodeElement) return
+    // get the heading node pos
+    const contentHeadingNodePos = editor?.view.posAtDOM(headingNodeElement, -4, 4)
+    const contentHeadingNode = editor?.state.doc.nodeAt(contentHeadingNodePos as number)
+
+    if ((contentHeadingNodePos && contentHeadingNodePos === -1) || !contentHeadingNode) return
+
+    // find parent heading node
+    const $pos = editor?.state.doc.resolve(contentHeadingNodePos as number) as ResolvedPos
+    let parentHeadingPos: number | null = null
+    let parentHeadingNode = null
+
+    // traverse up the document tree to find a parent with type "heading"
+    for (let depth = $pos.depth; depth > 0; depth--) {
+      const node = $pos.node(depth)
+      if (node.type.name === 'heading') {
+        parentHeadingPos = $pos.start(depth)
+        parentHeadingNode = node
+        break
+      }
+    }
+
+    // delete the entire parent heading node with all its content
+    if (parentHeadingPos !== null && parentHeadingNode) {
+      const tr = editor?.state.tr
+      const startPos = parentHeadingPos - 4 // 4 is the offset of the heading node
+      const endPos = parentHeadingPos + parentHeadingNode.nodeSize
+
+      tr?.delete(startPos, endPos)
+      if (tr) {
+        editor?.view.dispatch(tr)
+      }
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-3 p-4 pr-3 pb-3">
+      <div>
+        <p className="text-gray-600">Do you want to delete this heading section?</p>
+      </div>
+      <div className="flex justify-end gap-4">
+        <button className="btn btn-ghost" onClick={closeDialog}>
+          Cancel
+        </button>
+        <button className="btn btn-ghost" onClick={handleDeleteConfirm}>
+          Delete
+        </button>
+      </div>
+    </div>
+  )
+}

packages/webapp/components/TipTap/tableOfContents/hooks/ueToggleHeadingSectionHandler.ts

@@ -0,0 +1,13 @@
+import { useCallback } from 'react'
+import { toggleHeadingSection } from '../helper'
+
+const useToggleHeadingSectionHandler = (tocId: string, isOpen: boolean) => {
+  const toggleHeadingSectionHandler = useCallback(() => {
+    if (!tocId) return
+
+    toggleHeadingSection({ id: tocId, open: isOpen })
+  }, [tocId, isOpen])
+  return toggleHeadingSectionHandler
+}
+
+export default useToggleHeadingSectionHandler

packages/webapp/components/TipTap/tableOfContents/hooks/useDeleteHeadingSectionHandler.tsx

@@ -0,0 +1,15 @@
+import { useStore } from '@stores'
+import { useCallback } from 'react'
+import { DeleteHeadingDialogContnet } from '../components/DeleteHeadingDialogContnet'
+
+const useDeleteHeadingSectionHandler = (tocId: string) => {
+  const { openDialog } = useStore()
+  const deleteHeadingSectionHandler = useCallback(() => {
+    if (!tocId) return
+    // ask for confirmation
+    openDialog(<DeleteHeadingDialogContnet headingId={tocId} />)
+  }, [tocId])
+  return deleteHeadingSectionHandler
+}
+
+export default useDeleteHeadingSectionHandler