Block Discussion

1'use client';
2 
3import * as React from 'react';
4 
5import type { PlateElementProps, RenderNodeWrapper } from 'platejs/react';
6 
7import { getDraftCommentKey } from '@platejs/comment';
8import { CommentPlugin } from '@platejs/comment/react';
9import { getTransientSuggestionKey } from '@platejs/suggestion';
10import { SuggestionPlugin } from '@platejs/suggestion/react';
11import {
12  MessageSquareTextIcon,
13  MessagesSquareIcon,
14  PencilLineIcon,
15} from 'lucide-react';
16import { type AnyPluginConfig, type NodeEntry, PathApi } from 'platejs';
17import { useEditorRef, usePluginOption } from 'platejs/react';
18 
19import { Button } from '@/components/ui/button';
20import {
21  Popover,
22  PopoverAnchor,
23  PopoverContent,
24  PopoverTrigger,
25} from '@/components/ui/popover';
26import { commentPlugin } from '@/registry/components/editor/plugins/comment-kit';
27import type { TDiscussion } from '@/registry/components/editor/plugins/discussion-kit';
28import { useBlockDiscussionItems } from '@/registry/lib/block-discussion-index';
29import { suggestionPlugin } from '@/registry/components/editor/plugins/suggestion-kit';
30 
31import { BlockSuggestionCard, isResolvedSuggestion } from './block-suggestion';
32import { Comment, CommentCreateForm } from './comment';
33 
34export const BlockDiscussion: RenderNodeWrapper<AnyPluginConfig> =
35  (_props) => (props) => <BlockCommentContent {...props} />;
36 
37const BlockCommentContent = ({ children, element }: PlateElementProps) => {
38  const editor = useEditorRef();
39  const commentsApi = editor.getApi(CommentPlugin).comment;
40  const blockPath = editor.api.findPath(element) ?? [];
41  const isTopLevelBlock = blockPath.length === 1;
42  const draftCommentNode = isTopLevelBlock
43    ? commentsApi.node({ at: blockPath, isDraft: true })
44    : undefined;
45  const commentNodes = isTopLevelBlock
46    ? [...commentsApi.nodes({ at: blockPath })]
47    : [];
48  const suggestionNodes = isTopLevelBlock
49    ? [
50        ...editor.getApi(SuggestionPlugin).suggestion.nodes({ at: blockPath }),
51      ].filter(([node]) => !node[getTransientSuggestionKey()])
52    : [];
53  const { resolvedDiscussions, resolvedSuggestions } =
54    useBlockDiscussionItems(blockPath);
55 
56  const suggestionsCount = resolvedSuggestions.length;
57  const discussionsCount = resolvedDiscussions.length;
58  const totalCount = suggestionsCount + discussionsCount;
59 
60  const activeSuggestionId = usePluginOption(suggestionPlugin, 'activeId');
61  const activeSuggestion =
62    activeSuggestionId &&
63// … truncated