@docyrus/ui-pro-ai-assistant 0.0.1

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

@@ -0,0 +1,364 @@
+'use client';
+
+import {
+  Fragment, useEffect, useMemo, useState
+} from 'react';
+
+import {
+  type PlateElementProps, type RenderNodeWrapper, useEditorPlugin, useEditorRef, usePluginOption
+} from 'platejs/react';
+
+import { getDraftCommentKey } from '@platejs/comment';
+import { CommentPlugin } from '@platejs/comment/react';
+import { getTransientSuggestionKey } from '@platejs/suggestion';
+import { SuggestionPlugin } from '@platejs/suggestion/react';
+import {
+  MessageSquareTextIcon,
+  MessagesSquareIcon,
+  PencilLineIcon
+} from 'lucide-react';
+import {
+  type AnyPluginConfig,
+  type NodeEntry,
+  type Path,
+  PathApi,
+  type TCommentText,
+  type TElement,
+  TextApi,
+  type TSuggestionText
+} from 'platejs';
+
+import { Button } from './button';
+
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger
+} from './popover';
+
+import {
+  BlockSuggestionCard,
+  isResolvedSuggestion,
+  useResolveSuggestion
+} from './block-suggestion';
+
+import { Comment, CommentCreateForm } 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';
+
+export const BlockDiscussion: RenderNodeWrapper<AnyPluginConfig> = (props) => {
+  const { api, editor, element } = props;
+
+  const blockPath = editor.api.findPath(element);
+
+  // avoid duplicate in table or column
+  if (!blockPath || blockPath.length > 1) return;
+
+  const draftCommentNode = api.comment.node({ at: blockPath, isDraft: true });
+
+  const commentNodes = [...api.comment.nodes({ at: blockPath })];
+
+  const suggestionNodes = [...editor.getApi(SuggestionPlugin).suggestion.nodes({ at: blockPath })].filter(([node]) => !node[getTransientSuggestionKey()]);
+
+  if (
+    commentNodes.length === 0
+    && suggestionNodes.length === 0
+    && !draftCommentNode
+  ) {
+    return;
+  }
+
+  return props => (
+    <BlockCommentsContent
+      blockPath={blockPath}
+      commentNodes={commentNodes}
+      draftCommentNode={draftCommentNode}
+      suggestionNodes={suggestionNodes}
+      {...props} />
+  );
+};
+
+const BlockCommentsContent = ({
+  blockPath,
+  children,
+  commentNodes,
+  draftCommentNode,
+  suggestionNodes
+}: PlateElementProps & {
+  blockPath: Path;
+  commentNodes: NodeEntry<TCommentText>[];
+  draftCommentNode: NodeEntry<TCommentText> | undefined;
+  suggestionNodes: NodeEntry<TElement | TSuggestionText>[];
+}) => {
+  const editor = useEditorRef();
+
+  const resolvedSuggestion = useResolveSuggestion(suggestionNodes, blockPath);
+
+  const resolvedDiscussions = useResolvedDiscussion(commentNodes, blockPath);
+
+  const suggestionsCount = resolvedSuggestion.length;
+  const discussionsCount = resolvedDiscussions.length;
+  const totalCount = suggestionsCount + discussionsCount;
+
+  const activeSuggestionId = usePluginOption(suggestionPlugin, 'activeId');
+  const activeSuggestion
+    = activeSuggestionId
+      && resolvedSuggestion.find(s => s.suggestionId === activeSuggestionId);
+
+  const commentingBlock = usePluginOption(commentPlugin, 'commentingBlock');
+  const activeCommentId = usePluginOption(commentPlugin, 'activeId');
+  const isCommenting = activeCommentId === getDraftCommentKey();
+  const activeDiscussion
+    = activeCommentId
+      && resolvedDiscussions.find(d => d.id === activeCommentId);
+
+  const noneActive = !activeSuggestion && !activeDiscussion;
+
+  const sortedMergedData = [...resolvedDiscussions, ...resolvedSuggestion].sort(
+    (a, b) => a.createdAt.getTime() - b.createdAt.getTime()
+  );
+
+  const selected
+    = resolvedDiscussions.some(d => d.id === activeCommentId)
+      || resolvedSuggestion.some(s => s.suggestionId === activeSuggestionId);
+
+  const [_open, setOpen] = useState(selected);
+
+  // in some cases, we may comment the multiple blocks
+  const commentingCurrent
+    = !!commentingBlock && PathApi.equals(blockPath, commentingBlock);
+
+  const open
+    = _open
+      || selected
+      || (isCommenting && !!draftCommentNode && commentingCurrent);
+
+  const anchorElement = useMemo(() => {
+    let activeNode: NodeEntry | undefined;
+
+    if (activeSuggestion) {
+      activeNode = suggestionNodes.find(
+        ([node]) => TextApi.isText(node)
+          && editor.getApi(SuggestionPlugin).suggestion.nodeId(node)
+          === activeSuggestion.suggestionId
+      );
+    }
+    if (activeCommentId) {
+      if (activeCommentId === getDraftCommentKey()) {
+        activeNode = draftCommentNode;
+      } else {
+        activeNode = commentNodes.find(
+          ([node]) => editor.getApi(CommentPlugin).comment.nodeId(node)
+            === activeCommentId
+        );
+      }
+    }
+    if (!activeNode) return null;
+
+    return editor.api.toDOMNode(activeNode[0])!;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    open,
+    activeSuggestion,
+    activeCommentId,
+    editor.api,
+    suggestionNodes,
+    draftCommentNode,
+    commentNodes
+  ]);
+
+  if (suggestionsCount + resolvedDiscussions.length === 0 && !draftCommentNode)
+    return <div className="w-full">{children}</div>;
+
+  return (
+    <div className="flex w-full justify-between">
+      <Popover
+        onOpenChange={(_open_) => {
+          if (!_open_ && isCommenting && draftCommentNode) {
+            editor.tf.unsetNodes(getDraftCommentKey(), {
+              at: [],
+              mode: 'lowest',
+              match: n => n[getDraftCommentKey()]
+            });
+          }
+
+          setOpen(_open_);
+        }}
+        open={open}>
+        <div className="w-full">{children}</div>
+        {anchorElement && (
+          <PopoverAnchor
+            asChild
+            className="w-full"
+            virtualRef={{ current: anchorElement }} />
+        )}
+
+        <PopoverContent
+          align="center"
+          className="max-h-[min(50dvh,calc(-24px+var(--radix-popper-available-height)))] w-[380px] min-w-[130px] max-w-[calc(100vw-24px)] overflow-y-auto p-0 data-[state=closed]:opacity-0"
+          onCloseAutoFocus={e => e.preventDefault()}
+          onOpenAutoFocus={e => e.preventDefault()}
+          side="bottom">
+          {isCommenting ? (
+            <CommentCreateForm className="p-4" focusOnMount />
+          ) : noneActive ? (
+            sortedMergedData.map((item, index) => isResolvedSuggestion(item) ? (
+              <BlockSuggestionCard
+                idx={index}
+                isLast={index === sortedMergedData.length - 1}
+                key={item.suggestionId}
+                suggestion={item} />
+            ) : (
+              <BlockComment
+                discussion={item}
+                isLast={index === sortedMergedData.length - 1}
+                key={item.id} />
+            ))
+          ) : (
+            <>
+              {activeSuggestion && (
+                <BlockSuggestionCard
+                  idx={0}
+                  isLast={true}
+                  key={activeSuggestion.suggestionId}
+                  suggestion={activeSuggestion} />
+              )}
+
+              {activeDiscussion && (
+                <BlockComment discussion={activeDiscussion} isLast={true} />
+              )}
+            </>
+          )}
+        </PopoverContent>
+
+        {totalCount > 0 && (
+          <div className="relative left-0 size-0 select-none">
+            <PopoverTrigger asChild>
+              <Button
+                className="mt-1 ml-1 flex h-6 gap-1 px-1.5 py-0 text-muted-foreground/80 hover:text-muted-foreground/80 data-[active=true]:bg-muted"
+                contentEditable={false}
+                data-active={open}
+                variant="ghost">
+                {suggestionsCount > 0 && discussionsCount === 0 && (
+                  <PencilLineIcon className="size-4 shrink-0" />
+                )}
+
+                {suggestionsCount === 0 && discussionsCount > 0 && (
+                  <MessageSquareTextIcon className="size-4 shrink-0" />
+                )}
+
+                {suggestionsCount > 0 && discussionsCount > 0 && (
+                  <MessagesSquareIcon className="size-4 shrink-0" />
+                )}
+
+                <span className="font-semibold text-xs">{totalCount}</span>
+              </Button>
+            </PopoverTrigger>
+          </div>
+        )}
+      </Popover>
+    </div>
+  );
+};
+
+function BlockComment({
+  discussion,
+  isLast
+}: {
+  discussion: TDiscussion;
+  isLast: boolean;
+}) {
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  return (
+    <Fragment key={discussion.id}>
+      <div className="p-4">
+        {discussion.comments.map((comment, index) => (
+          <Comment
+            comment={comment}
+            discussionLength={discussion.comments.length}
+            documentContent={discussion?.documentContent}
+            editingId={editingId}
+            index={index}
+            key={comment.id ?? index}
+            setEditingId={setEditingId}
+            showDocumentContent />
+        ))}
+        <CommentCreateForm discussionId={discussion.id} />
+      </div>
+
+      {!isLast && <div className="h-px w-full bg-muted" />}
+    </Fragment>
+  );
+}
+
+const useResolvedDiscussion = (
+  commentNodes: NodeEntry<TCommentText>[],
+  blockPath: Path
+): TDiscussion[] => {
+  const { api, getOption, setOption } = useEditorPlugin(commentPlugin);
+
+  const discussions = usePluginOption(discussionPlugin, 'discussions');
+
+  useEffect(() => {
+    commentNodes.forEach(([node]) => {
+      const id = api.comment.nodeId(node);
+      const map = getOption('uniquePathMap');
+
+      if (!id) return;
+
+      const previousPath = map.get(id);
+
+      // If there are no comment nodes in the corresponding path in the map, then update it.
+      if (PathApi.isPath(previousPath)) {
+        const nodes = api.comment.node({ id, at: previousPath });
+
+        if (!nodes) {
+          setOption('uniquePathMap', new Map(map).set(id, blockPath));
+
+          return;
+        }
+
+        return;
+      }
+
+      setOption('uniquePathMap', new Map(map).set(id, blockPath));
+    });
+  }, [
+    api,
+    blockPath,
+    commentNodes,
+    getOption,
+    setOption
+  ]);
+
+  const commentsIds = new Set(
+    commentNodes.map(([node]) => api.comment.nodeId(node)).filter(Boolean)
+  );
+
+  return discussions
+    .map((d: TDiscussion) => ({
+      ...d,
+      createdAt: new Date(d.createdAt)
+    }))
+    .filter((item: TDiscussion) => {
+      /** If comment cross blocks just show it in the first block */
+      const commentsPathMap = getOption('uniquePathMap');
+      const firstBlockPath = commentsPathMap.get(item.id);
+
+      if (!firstBlockPath) return false;
+      if (!PathApi.equals(firstBlockPath, blockPath)) return false;
+
+      return (
+        api.comment.has({ id: item.id })
+        && commentsIds.has(item.id)
+        && !item.isResolved
+      );
+    });
+};