@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.5

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

@@ -1,364 +0,0 @@
-'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: Record<string, unknown>) => Boolean(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
-      );
-    });
-};