refactor: heading action buttons

- Removed ChatCommentExtension and its associated logic from the TipTap editor.
- Integrated HeadingActionsExtension to manage heading-related actions, including chat functionality.
- Updated editor configuration to support new heading actions and improved mobile handling.
- Cleaned up unused styles and plugins related to the removed ChatCommentExtension.

Author: HMarzban

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

@@ -70,7 +70,7 @@ import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table
 
 import { Indent } from '@docs.plus/extension-indent'
 
-import ChatCommentExtension from './extentions/ChatCommentExtension'
+import { HeadingActionsExtension } from './extentions/HeadingActions'
 import { IOSCaretFix } from './plugins/iosCaretFixPlugin'
 
 import { InlineCode } from '@docs.plus/extension-inline-code'
@@ -194,7 +194,11 @@ const Editor = ({
     Blockquote,
     TextAlign,
     Underline,
-    ...(isMobile ? [] : [ChatCommentExtension]),
+    HeadingActionsExtension.configure({
+      hoverChat: true,
+      selectionChat: !isMobile,
+      headingToggle: true
+    }),
     Hyperlink.configure({
       protocols: ['ftp', 'mailto'],
       hyperlinkOnPaste: false,

packages/webapp/src/components/TipTap/extentions/ChatCommentExtension.ts

@@ -0,0 +1,54 @@
+import { Extension } from '@tiptap/core'
+import { Plugin } from '@tiptap/pm/state'
+import { createHoverChatPlugin } from './plugins/hoverChatPlugin'
+import { createSelectionChatPlugin } from './plugins/selectionChatPlugin'
+import { createHeadingTogglePlugin } from './plugins/headingTogglePlugin'
+import type { HeadingActionsOptions } from './types'
+
+/**
+ * HeadingActions Extension
+ *
+ * A unified extension that combines heading-related action features:
+ * - Hover chat: Chat button on heading hover
+ * - Selection chat: Comment button on text selection
+ * - Heading toggle: Fold/unfold heading sections
+ *
+ * @example
+ * ```typescript
+ * HeadingActionsExtension.configure({
+ *   hoverChat: true,
+ *   selectionChat: !isMobile,
+ *   headingToggle: true
+ * })
+ * ```
+ */
+export const HeadingActionsExtension = Extension.create<HeadingActionsOptions>({
+  name: 'headingActions',
+
+  addOptions() {
+    return {
+      hoverChat: true,
+      selectionChat: true,
+      headingToggle: true
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const plugins: Plugin[] = []
+    const { editor } = this
+
+    if (this.options.hoverChat) {
+      plugins.push(createHoverChatPlugin(editor))
+    }
+
+    if (this.options.selectionChat) {
+      plugins.push(createSelectionChatPlugin(editor))
+    }
+
+    if (this.options.headingToggle) {
+      plugins.push(createHeadingTogglePlugin(editor))
+    }
+
+    return plugins
+  }
+})

packages/webapp/src/components/TipTap/extentions/HeadingActions/HeadingActionsExtension.ts

@@ -0,0 +1,6 @@
+export {
+  HeadingActionsExtension,
+  HeadingActionsExtension as default
+} from './HeadingActionsExtension'
+export { HEADING_ACTIONS_CLASSES } from './types'
+export type { HeadingActionsOptions, HAClassName, HeadingNodeData } from './types'

packages/webapp/src/components/TipTap/extentions/HeadingActions/index.ts

@@ -0,0 +1,113 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { TipTapEditor, EditorEventData, TIPTAP_EVENTS, TRANSACTION_META } from '@types'
+import * as PubSub from 'pubsub-js'
+import { db } from '@db/headingCrinckleDB'
+import { useStore } from '@stores'
+
+interface HeadingState {
+  headingId: string
+  crinkleOpen: boolean
+}
+
+let isProcessing = false
+
+const dispatchToggleHeadingSection = (el: Element): void => {
+  const headingId = el.getAttribute('data-id')
+  const detailsContent = el.querySelector('div.contentWrapper')
+
+  const event = new CustomEvent('toggleHeadingsContent', {
+    detail: { headingId, el: detailsContent }
+  })
+
+  detailsContent?.dispatchEvent(event)
+}
+
+const handleHeadingToggle = ({ headingId }: EditorEventData): void => {
+  if (isProcessing || !headingId) return
+  isProcessing = true
+
+  const editor = useStore.getState().settings.editor.instance
+  const headingNodeEl = editor?.view.dom.querySelector<HTMLElement>(
+    `.heading[data-id="${headingId}"]`
+  )
+
+  if (!editor?.view || !headingNodeEl) {
+    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 (!currentNode) {
+    isProcessing = false
+    return
+  }
+
+  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) => h.headingId === headingId) || { crinkleOpen: true }
+  const filterMode = document.body.classList.contains('filter-mode')
+  const database = filterMode ? db.docFilter : db.meta
+
+  const dispatch = () => {
+    view.dispatch(tr)
+    dispatchToggleHeadingSection(headingNodeEl)
+    isProcessing = false
+  }
+
+  if (filterMode) {
+    dispatch()
+    return
+  }
+
+  if (!documentId) {
+    isProcessing = false
+    return
+  }
+
+  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
+    })
+}
+
+/**
+ * Creates the heading toggle plugin for fold/unfold functionality
+ * @param editor - TipTap editor instance
+ * @returns ProseMirror plugin
+ */
+export function createHeadingTogglePlugin(_editor: TipTapEditor): Plugin {
+  return new Plugin({
+    key: new PluginKey('headingToggle'),
+    view() {
+      PubSub.subscribe(TIPTAP_EVENTS.FOLD_AND_UNFOLD, (_msg: string, data: EditorEventData) => {
+        handleHeadingToggle(data)
+      })
+
+      return {
+        destroy() {
+          PubSub.unsubscribe(TIPTAP_EVENTS.FOLD_AND_UNFOLD)
+        }
+      }
+    }
+  })
+}