@docyrus/ui-pro-ai-assistant 0.0.1

package/src/internal/plate-editor/plate-ui/floating-discussion.tsx

@@ -0,0 +1,1129 @@
+'use client';
+
+import {
+  Fragment, useCallback, useEffect, useReducer, useRef, useState, type ComponentProps, type RefObject
+} from 'react';
+
+import { getDraftCommentKey } from '@platejs/comment';
+import { BlockSelectionPlugin } from '@platejs/selection/react';
+import {
+  acceptSuggestion,
+  getSuggestionKey,
+  getTransientSuggestionKey,
+  keyId2SuggestionId,
+  rejectSuggestion
+} from '@platejs/suggestion';
+import { CheckIcon, PencilLineIcon, XIcon } from 'lucide-react';
+import {
+  ElementApi,
+  KEYS,
+  type Node,
+  NodeApi,
+  type NodeEntry,
+  PathApi,
+  type SlateEditor,
+  type TCommentText,
+  type TElement,
+  TextApi,
+  type TSuggestionText
+} from 'platejs';
+import {
+  type PlateEditor,
+  useEditorContainerRef,
+  useEditorMounted,
+  useEditorPlugin,
+  useEditorRef,
+  useEditorSelector,
+  useEditorVersion,
+  usePluginOption,
+  usePluginOptions
+} from 'platejs/react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@docyrus/ui-pro-shared/avatar';
+
+import { Button } from './button';
+
+import {
+  BLOCK_SUGGESTION,
+  type ResolvedSuggestion,
+  TYPE_TEXT_MAP
+} from './block-suggestion';
+
+import { Comment, CommentCreateForm, formatCommentDate } from './comment';
+
+import { commentPlugin } from '../editor/plugins/comment-kit';
+import {
+  discussionPlugin,
+  type TDiscussion
+} from '../editor/plugins/discussion-kit';
+import { suggestionPlugin } from '../editor/plugins/suggestion-kit';
+
+// Inline useDebouncedCallback - simplified version
+function useDebouncedCallback<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+) {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const funcRef = useRef(func);
+
+  funcRef.current = func;
+
+  const debounced = useCallback(
+    (...args: Parameters<T>) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        funcRef.current(...args);
+      }, wait);
+    },
+    [wait]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return debounced;
+}
+
+export function FloatingDiscussion() {
+  const mounted = useEditorMounted();
+  const isOverlapWithEditor = usePluginOption(
+    commentPlugin,
+    'isOverlapWithEditor'
+  );
+
+  if (!mounted || isOverlapWithEditor) return null;
+
+  return <FloatingDiscussionContent />;
+}
+
+const getCommentTop = (
+  editor: SlateEditor,
+  {
+    node,
+    relativeElement,
+    topOffset = 30
+  }: {
+    node: TCommentText | TElement | TSuggestionText;
+    relativeElement: HTMLDivElement;
+    topOffset?: number;
+  }
+) => {
+  const commentLeafDomNode = editor.api.toDOMNode(node);
+
+  if (!commentLeafDomNode) return 0;
+
+  const relativeElementRect = relativeElement.getBoundingClientRect();
+  const { scrollTop } = relativeElement;
+  const commentLeafRect = commentLeafDomNode.getBoundingClientRect();
+
+  const top = commentLeafRect.top - relativeElementRect.top + scrollTop;
+
+  return top > topOffset ? top - topOffset : 0;
+};
+
+const updateActiveBelow = (
+  topMap: Record<string, number>,
+  domMap: Record<string, HTMLDivElement | null>,
+  activeId: string
+) => {
+  const discussionArray = Object.entries(topMap)
+    .map(([id, top]) => ({ id, top }))
+    .sort((a, b) => a.top - b.top);
+
+  const activeIndex = discussionArray.findIndex(({ id }) => id === activeId);
+
+  if (activeIndex === -1 || activeIndex === discussionArray.length - 1)
+    return topMap;
+
+  const activeElement = discussionArray[activeIndex];
+  const start = activeElement.top;
+  const end = start + (domMap[activeId]?.clientHeight ?? 100);
+
+  const nextElement = discussionArray[activeIndex + 1];
+  const nextStart = nextElement.top;
+
+  // Check if next element overlaps with active element
+  if (nextStart <= end) {
+    // Move all following elements down
+    const offset = end - nextStart + 10; // Add 10px gap
+
+    for (let i = activeIndex + 1; i < discussionArray.length; i++) {
+      discussionArray[i].top += offset;
+    }
+
+    return Object.fromEntries(discussionArray.map(d => [d.id, d.top]));
+  }
+
+  return topMap;
+};
+
+const updateActiveTop = (
+  topMap: Record<string, number>,
+  domMap: Record<string, HTMLDivElement | null>,
+  activeId: string,
+  targetTop: number
+) => {
+  const discussionArray = Object.entries(topMap)
+    .map(([id, top]) => ({ id, top }))
+    .sort((a, b) => a.top - b.top);
+
+  const index = discussionArray.findIndex(({ id }) => id === activeId);
+
+  if (index === -1) return topMap;
+
+  const currentTop = discussionArray[index].top;
+  const diff = targetTop - currentTop;
+
+  // Set position of active element
+  discussionArray[index].top = targetTop;
+
+  if (diff < 0) {
+    // Moving up - check for overlaps with previous elements
+    for (let i = index - 1; i >= 0; i--) {
+      const currentElement = discussionArray[i];
+      const nextElement = discussionArray[i + 1];
+      const elementHeight = domMap[currentElement.id]?.clientHeight ?? 100;
+
+      // Check if current element overlaps with next element
+      if (currentElement.top + elementHeight + 10 > nextElement.top) {
+        // Move current element up to avoid overlap
+        currentElement.top = nextElement.top - elementHeight - 10;
+      } else {
+        break; // No more overlaps
+      }
+    }
+  } else {
+    // Moving down - check for overlaps with next elements
+    const activeHeight = domMap[activeId]?.clientHeight ?? 100;
+    let activeBottom = targetTop + activeHeight + 10;
+
+    // Only move elements that would overlap with active element
+    for (let i = index + 1; i < discussionArray.length; i++) {
+      if (discussionArray[i].top < activeBottom) {
+        discussionArray[i].top = activeBottom;
+        activeBottom
+          = discussionArray[i].top
+            + (domMap[discussionArray[i].id]?.clientHeight ?? 100)
+            + 10;
+      } else {
+        break; // No more overlaps
+      }
+    }
+  }
+
+  return Object.fromEntries(discussionArray.map(d => [d.id, d.top]));
+};
+
+const updateTopCommenting = (
+  topMap: Record<string, number>,
+  domMap: Record<string, HTMLDivElement | null>
+) => {
+  const discussionArray = Object.entries(topMap)
+    .map(([id, topDistance]) => ({ id, topDistance }))
+    .sort((a, b) => a.topDistance - b.topDistance);
+
+  const index = discussionArray.findIndex(
+    ({ id }) => id === getDraftCommentKey()
+  );
+
+  if (index === -1) return topMap;
+
+  const targetTopDistance = discussionArray[index].topDistance;
+
+  // Find if any elements need to move up or down
+  let moveDistance = 0;
+
+  for (let i = 0; i < discussionArray.length; i++) {
+    const current = discussionArray[i];
+    const currentHeight = domMap[current.id]?.clientHeight ?? 100;
+
+    if (i < index) {
+      // Check if element needs to move up
+      const minRequiredSpace = targetTopDistance - (currentHeight + 10);
+
+      if (current.topDistance > minRequiredSpace) {
+        const distance = current.topDistance - minRequiredSpace;
+
+        moveDistance = Math.max(moveDistance, distance);
+      }
+    }
+  }
+
+  // Move elements up if needed
+  if (moveDistance > 0) {
+    for (let i = 0; i < index; i++) {
+      discussionArray[i].topDistance -= moveDistance;
+    }
+  }
+
+  // Check if next element overlaps with current element
+  const currentHeight = domMap[discussionArray[index].id]?.clientHeight ?? 100;
+  const currentBottom = targetTopDistance + currentHeight + 10;
+
+  if (index + 1 < discussionArray.length) {
+    const nextElement = discussionArray[index + 1];
+
+    if (nextElement.topDistance < currentBottom) {
+      // Only move elements that overlap
+      let currentTop = currentBottom;
+
+      for (let i = index + 1; i < discussionArray.length; i++) {
+        const element = discussionArray[i];
+
+        if (element.topDistance < currentTop) {
+          element.topDistance = currentTop;
+          const elementHeight = domMap[element.id]?.clientHeight ?? 100;
+
+          currentTop += elementHeight + 10;
+        } else {
+          break; // No more overlaps
+        }
+      }
+    }
+  }
+
+  return Object.fromEntries(discussionArray.map(d => [d.id, d.topDistance]));
+};
+
+const resolveOverlappingTop = (
+  topMap: Record<string, number>,
+  domMap: Record<string, HTMLDivElement | null>
+) => {
+  const discussionArray = Object.entries(topMap)
+    .map(([id, topDistance]) => ({ id, topDistance }))
+    .sort((a, b) => a.topDistance - b.topDistance);
+
+  // Iterate through each discussion from top to bottom, checking for overlap with previous discussions
+  for (let i = 1; i < discussionArray.length; i++) {
+    const currentDiscussion = discussionArray[i];
+    const currentElement = domMap[currentDiscussion.id];
+
+    if (!currentElement) continue;
+
+    // Calculate the range of current discussion
+    const currentStart = currentDiscussion.topDistance;
+    const currentEnd = currentStart + currentElement.clientHeight;
+
+    // Check for overlap with all previous discussions
+    for (let j = 0; j < i; j++) {
+      const previousDiscussion = discussionArray[j];
+      const previousElement = domMap[previousDiscussion.id];
+
+      if (!previousElement) continue;
+
+      const previousStart = previousDiscussion.topDistance;
+      const previousEnd = previousStart + previousElement.clientHeight;
+
+      // Check for overlap: condition for two intervals overlapping
+      if (
+        (currentStart <= previousEnd && currentEnd >= previousStart)
+        || (previousStart <= currentEnd && previousEnd >= currentStart)
+      ) {
+        // If overlapping, move current discussion below the previous one
+        currentDiscussion.topDistance = previousEnd + 10;
+        // Update current discussion range and check for overlaps again
+        i--;
+
+        break;
+      }
+    }
+  }
+
+  return Object.fromEntries(discussionArray.map(d => [d.id, d.topDistance]));
+};
+
+const useCommentingNode = () => useEditorSelector((editor) => {
+  if (!editor?.api || !editor.selection || editor.api.isExpanded()) return;
+
+  return editor.api.node<TCommentText>({
+    match: n => TextApi.isText(n) && n[KEYS.comment] && n[getDraftCommentKey()]
+  })?.[0];
+}, []);
+
+function FloatingDiscussionContent() {
+  const editorContainerRef = useEditorContainerRef();
+  const editor = useEditorRef();
+  const commentApi = editor.getApi(commentPlugin);
+  const suggestionApi = editor.getApi(suggestionPlugin);
+
+  const activeCommentId = usePluginOption(commentPlugin, 'activeId');
+  const activeSuggestionId = usePluginOption(suggestionPlugin, 'activeId');
+  const activeId = activeCommentId ?? activeSuggestionId;
+  const isOverlapWithEditor = usePluginOption(
+    commentPlugin,
+    'isOverlapWithEditor'
+  );
+  const updateTimestamp = usePluginOption(commentPlugin, 'updateTimestamp');
+
+  const discussions = usePluginOption(discussionPlugin, 'discussions');
+  const domRef = useRef<Record<string, HTMLDivElement | null>>({});
+  const topRef = useRef<Record<string, number>>({});
+
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
+
+  const commentingNode = useCommentingNode();
+  const version = useEditorVersion();
+
+  const suggestionEntriesMap = useRef<
+    Record<string, NodeEntry<TElement | TSuggestionText>[]>
+  >({});
+
+  useEffect(() => {
+    suggestionEntriesMap.current = {};
+
+    const allSuggestionNodes = suggestionApi.suggestion
+      .nodes({ at: [] })
+      .filter(([node]) => !node[getTransientSuggestionKey()]);
+
+    const suggestionIds = new Set(
+      allSuggestionNodes
+        .flatMap(([node]) => {
+          if (TextApi.isText(node)) {
+            const dataList = suggestionApi.suggestion.dataList(node);
+            const includeUpdate = dataList.some(
+              data => data.type === 'update'
+            );
+
+            if (!includeUpdate) return suggestionApi.suggestion.nodeId(node);
+
+            return dataList
+              .filter(data => data.type === 'update')
+              .map(d => d.id);
+          }
+          if (ElementApi.isElement(node)) {
+            return suggestionApi.suggestion.nodeId(node);
+          }
+
+          return null;
+        })
+        .filter(Boolean)
+    );
+
+    suggestionIds.forEach((id) => {
+      if (!id) return;
+
+      const entries = [
+        ...editor.api.nodes<TElement | TSuggestionText>({
+          at: [],
+          mode: 'all',
+          match: n => (n[KEYS.suggestion] && n[getSuggestionKey(id)])
+            || suggestionApi.suggestion.nodeId(n as TElement) === id
+        })
+      ];
+
+      suggestionEntriesMap.current[id] = entries;
+    });
+  }, [editor, suggestionApi.suggestion, version]);
+
+  const suggestionList = Object.entries(suggestionEntriesMap.current).map(
+    ([id, entries]) => ({
+      id,
+      entries
+    })
+  );
+
+  const renderFloatingDiscussion = useCallback(() => {
+    if (isOverlapWithEditor) return;
+
+    topRef.current = {};
+
+    discussions.forEach((discussion) => {
+      if (
+        discussion.isResolved
+        || !commentApi.comment.has({ id: discussion.id })
+      )
+        return;
+
+      const commentLeafEntry = commentApi.comment.node({
+        id: discussion.id,
+        at: []
+      });
+
+      if (!commentLeafEntry) return;
+
+      const commentLeaf = commentLeafEntry[0];
+
+      const topDistance = getCommentTop(editor, {
+        node: commentLeaf,
+        relativeElement: editorContainerRef.current!
+      });
+
+      topRef.current[discussion.id] = topDistance;
+    });
+
+    suggestionList.forEach(({ id, entries }) => {
+      if (!id) return;
+
+      const topDistance = getCommentTop(editor, {
+        node: entries[0][0],
+        relativeElement: editorContainerRef.current!
+      });
+
+      topRef.current[id] = topDistance;
+    });
+
+    topRef.current = resolveOverlappingTop(topRef.current, domRef.current);
+    forceUpdate();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    discussions.length,
+    suggestionList.length,
+    editorContainerRef,
+    isOverlapWithEditor
+  ]);
+
+  const renderFloatingCreateForm = useCallback(() => {
+    if (!commentingNode || activeId !== getDraftCommentKey()) return;
+
+    const topDistance = getCommentTop(editor, {
+      node: commentingNode,
+      relativeElement: editorContainerRef.current!
+    });
+
+    topRef.current[getDraftCommentKey()] = topDistance;
+
+    topRef.current = updateTopCommenting(topRef.current, domRef.current);
+
+    forceUpdate();
+  }, [
+    activeId,
+    commentingNode,
+    editor,
+    editorContainerRef
+  ]);
+
+  const debouncedUpdateFloat = useDebouncedCallback(
+    renderFloatingDiscussion,
+    500
+  );
+
+  useEffect(() => {
+    if (updateTimestamp) {
+      debouncedUpdateFloat();
+    }
+  }, [debouncedUpdateFloat, updateTimestamp]);
+
+  useEffect(() => {
+    if (!discussions) return;
+
+    setTimeout(() => {
+      renderFloatingDiscussion();
+    }, 0);
+  }, [discussions, renderFloatingDiscussion]);
+
+  useEffect(() => {
+    if (!activeId || !domRef.current[activeId]) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      topRef.current = updateActiveBelow(
+        topRef.current,
+        domRef.current,
+        activeId
+      );
+
+      forceUpdate();
+    });
+
+    resizeObserver.observe(domRef.current[activeId]);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [activeId]);
+
+  useEffect(() => {
+    if (!activeId) {
+      return renderFloatingDiscussion();
+    }
+
+    const activeNode = commentApi.comment.node({ id: activeId, at: [] });
+    const activeSuggestionNode = suggestionApi.suggestion.node({
+      id: activeId,
+      at: [],
+      isText: true
+    });
+
+    if (!activeNode && !activeSuggestionNode) return;
+
+    topRef.current = updateActiveTop(
+      topRef.current,
+      domRef.current,
+      activeId,
+      getCommentTop(editor, {
+        node: activeNode?.[0] || activeSuggestionNode![0],
+        relativeElement: editorContainerRef.current!
+      })
+    );
+
+    forceUpdate();
+  }, [
+    activeId,
+    editor,
+    commentingNode,
+    editorContainerRef,
+    renderFloatingDiscussion,
+    commentApi.comment,
+    suggestionApi.suggestion
+  ]);
+
+  useEffect(() => {
+    if (!commentingNode || !domRef.current[getDraftCommentKey()]) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      renderFloatingCreateForm();
+    });
+
+    resizeObserver.observe(domRef.current[getDraftCommentKey()]!);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [
+    commentingNode,
+    editor,
+    editorContainerRef,
+    renderFloatingCreateForm,
+    renderFloatingDiscussion
+  ]);
+
+  useEffect(() => {
+    if (!isOverlapWithEditor) {
+      renderFloatingDiscussion();
+    }
+  }, [isOverlapWithEditor, renderFloatingDiscussion]);
+
+  // Only show if there are discussions/suggestions or active commenting
+  const hasUnresolvedDiscussions = discussions.some((d: TDiscussion) => !d.isResolved);
+  const hasSuggestions = suggestionList.length > 0;
+
+  if (!commentingNode && !hasUnresolvedDiscussions && !hasSuggestions && !activeId) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Unsubmit comment */}
+      {commentingNode && (
+        <div
+          className="absolute right-[80px] w-[288px] cursor-pointer rounded-lg border bg-popover p-3 transition-transform duration-200"
+          ref={(el) => {
+            domRef.current[getDraftCommentKey()] = el;
+          }}
+          style={{
+            top: topRef.current[getDraftCommentKey()] ?? -9999
+          }}>
+          <CommentCreateForm focusOnMount />
+        </div>
+      )}
+
+      {discussions.map(
+        discussion => !discussion.isResolved
+          && commentApi.comment.has({ id: discussion.id }) && (
+          <FloatingCommentsContent
+            discussion={discussion}
+            domRef={domRef}
+            key={discussion.id}
+            ref={(el) => {
+              domRef.current[discussion.id] = el;
+            }}
+            top={topRef.current[discussion.id] ?? 0} />
+        )
+      )}
+
+      {suggestionList.map(
+        ({ id, entries }) => id && (
+          <FloatingSuggestionContent
+            entries={entries}
+            id={id}
+            key={id}
+            ref={(el) => {
+              domRef.current[id] = el;
+            }}
+            top={topRef.current[id] ?? 0} />
+        )
+      )}
+    </>
+  );
+}
+
+type FloatingCommentsContentProps = {
+  discussion: TDiscussion;
+  domRef: RefObject<Record<string, HTMLDivElement | null>>;
+  top: number;
+};
+
+function FloatingCommentsContent({
+  discussion,
+  ref,
+  top
+}: ComponentProps<'div'> & FloatingCommentsContentProps) {
+  const editor = useEditorRef();
+
+  const { activeId, hoverId } = usePluginOptions(
+    commentPlugin,
+    ({ activeId, hoverId }) => ({
+      activeId,
+      hoverId
+    })
+  );
+
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  const setHoverId = (id: string | null) => {
+    /*
+     * If dropdown menu open, do not unset the active state since it will make dropdown menu open in the wrong position
+     * Notion has the same issue
+     */
+    if (document.activeElement?.closest('[data-radix-menu-content]')) return;
+
+    editor.setOption(commentPlugin, 'hoverId', id);
+  };
+
+  const highlightDiscussion = (editor: PlateEditor, id: string) => {
+    editor.setOption(commentPlugin, 'activeId', id);
+    editor.setOption(suggestionPlugin, 'activeId', null);
+    const leaf = editor.api.node({
+      at: [],
+      match: n => TextApi.isText(n)
+        && n[KEYS.comment]
+        && editor.getApi(commentPlugin).comment.nodeId(n) === id
+    });
+
+    if (!leaf) return;
+
+    const parent = NodeApi.get<Node>(editor, leaf[1].slice(0, 1));
+
+    editor
+      .getApi(BlockSelectionPlugin)
+      .blockSelection.addSelectedRow(parent!.id as string, {
+        clear: false,
+        delay: 1000
+      });
+  };
+
+  return (
+    <div
+      className={cn(
+        'absolute right-20 z-10 w-72 animate-fade-in cursor-pointer rounded-lg border bg-popover p-3 transition-transform duration-200',
+        '[&[data-hover=true][data-active=false]]:-translate-x-2 [&[data-hover=true][data-active=false]]:bg-muted',
+        '[&[data-active=true]]:-translate-x-2'
+      )}
+      data-active={activeId === discussion.id}
+      data-discussion-id={discussion.id}
+      data-hover={hoverId === discussion.id}
+      onClick={() => highlightDiscussion(editor, discussion.id)}
+      onMouseEnter={() => setHoverId(discussion.id)}
+      onMouseLeave={() => setHoverId(null)}
+      ref={ref}
+      style={{
+        top
+      }}>
+      {discussion.comments.length >= 3 && activeId !== discussion.id ? (
+        <>
+          <Comment
+            comment={discussion.comments[0]}
+            discussionLength={discussion.comments.length}
+            documentContent={discussion?.documentContent}
+            editingId={editingId}
+            index={0}
+            key={discussion.comments[0].id}
+            onEditorClick={() => highlightDiscussion(editor, discussion.id)}
+            setEditingId={setEditingId} />
+          <div className="relative mb-1 ml-[26px] flex h-7 items-center rounded-md pl-1.5 text-muted-foreground text-sm hover:bg-muted">
+            <div className="absolute top-[-5px] left-[-14px] h-full w-0.5 shrink-0 bg-muted" />
+            <div className="ml-2">
+              Show {discussion.comments.length - 2} replies
+            </div>
+          </div>
+          <Comment
+            comment={discussion.comments.at(-1)!}
+            discussionLength={discussion.comments.length}
+            documentContent={discussion?.documentContent}
+            editingId={editingId}
+            index={discussion.comments.length - 1}
+            key={discussion.comments.at(-1)!.id}
+            onEditorClick={() => highlightDiscussion(editor, discussion.id)}
+            setEditingId={setEditingId} />
+        </>
+      ) : (
+        discussion.comments.map((comment, index) => (
+          <Comment
+            comment={comment}
+            discussionLength={discussion.comments.length}
+            documentContent={discussion?.documentContent}
+            editingId={editingId}
+            index={index}
+            key={comment.id ?? index}
+            onEditorClick={() => highlightDiscussion(editor, discussion.id)}
+            setEditingId={setEditingId} />
+        ))
+      )}
+
+      {activeId === discussion.id && (
+        <CommentCreateForm discussionId={discussion.id} />
+      )}
+    </div>
+  );
+}
+
+type FloatingSuggestionContentProps = {
+  id: string;
+  entries: NodeEntry<TElement | TSuggestionText>[];
+  top: number;
+};
+
+const FloatingSuggestionContent = ({
+  id,
+  entries,
+  ref,
+  top
+}: ComponentProps<'div'> & FloatingSuggestionContentProps) => {
+  const { api, editor, setOption } = useEditorPlugin(suggestionPlugin);
+  const nodeData = api.suggestion.suggestionData(entries[0][0]);
+
+  const { activeId, hoverId } = usePluginOptions(
+    suggestionPlugin,
+    ({ activeId, hoverId }) => ({
+      activeId,
+      hoverId
+    })
+  );
+
+  const userId = usePluginOption(discussionPlugin, 'currentUserId');
+  const userData = usePluginOption(discussionPlugin, 'user', userId);
+  const discussions = usePluginOption(discussionPlugin, 'discussions');
+
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  if (entries.length === 0) return null;
+
+  // move line break to the end
+  entries.sort(([, path1], [, path2]) => PathApi.isChild(path1, path2) ? -1 : 1);
+
+  let newText = '';
+  let text = '';
+  let properties: any = {};
+  let newProperties: any = {};
+
+  // overlapping suggestion
+  entries.forEach(([node]) => {
+    if (TextApi.isText(node)) {
+      const dataList = api.suggestion.dataList(node);
+
+      dataList.forEach((data) => {
+        if (data.id !== id) return;
+
+        switch (data.type) {
+          case 'insert': {
+            newText += node.text;
+
+            break;
+          }
+
+          case 'remove': {
+            text += node.text;
+
+            break;
+          }
+
+          case 'update': {
+            properties = {
+              ...properties,
+              ...data.properties
+            };
+            newProperties = {
+              ...newProperties,
+              ...data.newProperties
+            };
+            newText += node.text;
+
+            break;
+          }
+        }
+      });
+    } else {
+      const lineBreakData = api.suggestion.isBlockSuggestion(node) ? node.suggestion : undefined;
+
+      if (lineBreakData?.id !== keyId2SuggestionId(id)) return;
+      if (lineBreakData.type === 'insert') {
+        newText += lineBreakData.isLineBreak ? BLOCK_SUGGESTION : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
+      } else if (lineBreakData.type === 'remove') {
+        text += lineBreakData.isLineBreak ? BLOCK_SUGGESTION : BLOCK_SUGGESTION + TYPE_TEXT_MAP[node.type](node);
+      }
+    }
+  });
+
+  if (!nodeData) return null;
+
+  const comments = discussions.find(d => d.id === id)?.comments || [];
+  const createdAt = new Date(nodeData.createdAt);
+  const keyId = getSuggestionKey(id);
+
+  const suggestionText2Array = (text: string) => {
+    if (text === BLOCK_SUGGESTION) return ['line breaks'];
+
+    return text.split(BLOCK_SUGGESTION).filter(Boolean);
+  };
+
+  const accept = (suggestion: ResolvedSuggestion) => {
+    api.suggestion.withoutSuggestions(() => {
+      acceptSuggestion(editor, suggestion);
+    });
+  };
+
+  const reject = (suggestion: ResolvedSuggestion) => {
+    api.suggestion.withoutSuggestions(() => {
+      rejectSuggestion(editor, suggestion);
+    });
+  };
+
+  let suggestion: ResolvedSuggestion;
+
+  if (nodeData.type === 'update') {
+    suggestion = {
+      comments,
+      createdAt,
+      keyId,
+      newProperties,
+      newText,
+      properties,
+      suggestionId: keyId2SuggestionId(id),
+      type: 'update',
+      userId: nodeData.userId
+    };
+  } else if (newText.length > 0 && text.length > 0) {
+    suggestion = {
+      comments,
+      createdAt,
+      keyId,
+      newText,
+      suggestionId: keyId2SuggestionId(id),
+      text,
+      type: 'replace',
+      userId: nodeData.userId
+    };
+  } else if (newText.length > 0) {
+    suggestion = {
+      comments,
+      createdAt,
+      keyId,
+      newText,
+      suggestionId: keyId2SuggestionId(id),
+      type: 'insert',
+      userId: nodeData.userId
+    };
+  } else if (text.length > 0) {
+    suggestion = {
+      comments,
+      createdAt,
+      keyId,
+      suggestionId: keyId2SuggestionId(id),
+      text,
+      type: 'remove',
+      userId: nodeData.userId
+    };
+  } else {
+    return null;
+  }
+
+  const highlightSuggestion = (editor: PlateEditor, id: string) => {
+    editor.setOption(suggestionPlugin, 'activeId', id);
+    editor.setOption(commentPlugin, 'activeId', null);
+
+    const leaf = editor.api.node({
+      at: [],
+      match: n => n[KEYS.suggestion]
+        && editor.getApi(suggestionPlugin).suggestion.nodeId(n as any) === id
+    });
+
+    if (!leaf) return;
+
+    const parent = NodeApi.get<Node>(editor, leaf[1].slice(0, 1));
+
+    editor
+      .getApi(BlockSelectionPlugin)
+      .blockSelection.addSelectedRow(parent!.id as string, {
+        clear: false,
+        delay: 1000
+      });
+  };
+
+  // Only show if this suggestion is active or hovered
+  if (activeId !== id && hoverId !== id) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'absolute right-20 z-10 w-72 animate-fade-in cursor-pointer rounded-lg border bg-popover p-3 transition-transform duration-200',
+        '[&[data-hover=true][data-active=false]]:-translate-x-2 [&[data-hover=true][data-active=false]]:bg-muted',
+        '[&[data-active=true]]:-translate-x-2'
+      )}
+      data-active={activeId === id}
+      data-discussion-id={id}
+      data-hover={hoverId === id}
+      onClick={() => highlightSuggestion(editor, id)}
+      onMouseEnter={() => setOption('hoverId', id)}
+      onMouseLeave={() => setOption('hoverId', null)}
+      ref={ref}
+      style={{ top }}>
+      <div className="flex flex-col">
+        <div className="relative flex items-center">
+          {userData && (
+            <>
+              <Avatar className="relative mr-2 size-6">
+                <AvatarImage alt={userData.name} src={userData.avatarUrl} />
+                <AvatarFallback>{userData.name?.[0]}</AvatarFallback>
+              </Avatar>
+              <PencilLineIcon className="-bottom-2 absolute left-4 size-4 rounded-[50%] bg-brand-foreground p-0.5 text-brand/80" />
+            </>
+          )}
+          <h4 className="font-semibold text-sm leading-none">
+            {userData?.name}
+          </h4>
+          <div className="ml-1.5 text-muted-foreground/80 text-xs leading-none">
+            <span className="mr-1">
+              {formatCommentDate(suggestion.createdAt)}
+            </span>
+          </div>
+        </div>
+
+        <div className="relative mt-1 mb-4 pl-[32px]">
+          <div className="flex flex-col gap-2">
+            {suggestion.type === 'remove'
+              && suggestionText2Array(suggestion.text!).map((text, index) => (
+                <div className="flex items-center gap-2" key={index}>
+                  <span className="text-muted-foreground text-sm">Delete:</span>
+                  <span className="text-sm">{text}</span>
+                </div>
+              ))}
+
+            {suggestion.type === 'insert'
+              && suggestionText2Array(suggestion.newText!).map((text, index) => (
+                <div className="flex items-center gap-2" key={index}>
+                  <span className="text-muted-foreground text-sm">Add:</span>
+                  <span className="text-sm">"{text || 'line breaks'}"</span>
+                </div>
+              ))}
+
+            {suggestion.type === 'replace' && (
+              <div className="flex flex-col gap-2">
+                {suggestionText2Array(suggestion.newText!).map(
+                  (text, index) => (
+                    <Fragment key={index}>
+                      <div className="flex items-center text-brand/80">
+                        <span className="text-sm">With:</span>
+                        <span className="text-sm">
+                          "{text || 'line breaks'}"
+                        </span>
+                      </div>
+                    </Fragment>
+                  )
+                )}
+
+                {suggestionText2Array(suggestion.text!).map((text, index) => (
+                  <Fragment key={index}>
+                    <div className="flex items-center">
+                      <span className="text-muted-foreground text-sm">
+                        {index === 0 ? 'Replace:' : 'Delete:'}
+                      </span>
+                      <span className="text-sm">"{text || 'line breaks'}"</span>
+                    </div>
+                  </Fragment>
+                ))}
+              </div>
+            )}
+
+            {suggestion.type === 'update' && (
+              <div className="flex items-center gap-2">
+                <span className="text-muted-foreground text-sm">
+                  {Object.keys(suggestion.properties).map(key => (
+                    <span key={key}>Un{key}</span>
+                  ))}
+                  {Object.keys(suggestion.newProperties).map(key => (
+                    <span key={key}>
+                      {key.charAt(0).toUpperCase() + key.slice(1)}
+                    </span>
+                  ))}
+                </span>
+                <span className="text-sm">"{suggestion.newText}"</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {suggestion.comments.length >= 3 && activeId !== id ? (
+          <>
+            <Comment
+              comment={suggestion.comments[0]}
+              discussionLength={suggestion.comments.length}
+              documentContent="__suggestion__"
+              editingId={editingId}
+              index={0}
+              key={suggestion.comments[0].id}
+              setEditingId={setEditingId} />
+            <div className="relative mb-1 ml-[26px] flex h-7 items-center rounded-md pl-1.5 text-muted-foreground text-sm hover:bg-muted">
+              <div className="absolute top-[-5px] left-[-14px] h-full w-0.5 shrink-0 bg-muted" />
+              <div className="ml-2">
+                Show {suggestion.comments.length - 2} replies
+              </div>
+            </div>
+            <Comment
+              comment={suggestion.comments.at(-1)!}
+              discussionLength={suggestion.comments.length}
+              documentContent="__suggestion__"
+              editingId={editingId}
+              index={suggestion.comments.length - 1}
+              key={suggestion.comments.at(-1)!.id}
+              setEditingId={setEditingId} />
+          </>
+        ) : (
+          suggestion.comments.map((comment, index) => (
+            <Comment
+              comment={comment}
+              discussionLength={suggestion.comments.length}
+              documentContent="__suggestion__"
+              editingId={editingId}
+              index={index}
+              key={comment.id ?? index}
+              setEditingId={setEditingId} />
+          ))
+        )}
+
+        {hoverId === id && (
+          <div className="absolute top-4 right-4 flex gap-2">
+            <Button
+              className="h-6 p-1 text-muted-foreground"
+              onClick={() => accept(suggestion)}
+              variant="ghost">
+              <CheckIcon className="size-4" />
+            </Button>
+            <Button
+              className="h-6 p-1 text-muted-foreground"
+              onClick={() => reject(suggestion)}
+              variant="ghost">
+              <XIcon className="size-4" />
+            </Button>
+          </div>
+        )}
+
+        {activeId === id && (
+          <CommentCreateForm discussionId={suggestion.suggestionId} />
+        )}
+      </div>
+    </div>
+  );
+};