Comment Leaf

1'use client';
2 
3import * as React from 'react';
4 
5import type { TCommentText } from 'platejs';
6import type { PlateLeafProps } from 'platejs/react';
7 
8import { getCommentCount } from '@platejs/comment';
9import { PlateLeaf, useEditorPlugin, usePluginOption } from 'platejs/react';
10 
11import { cn } from '@/lib/utils';
12import { commentPlugin } from '@/registry/components/editor/plugins/comment-kit';
13 
14export function CommentLeaf(props: PlateLeafProps<TCommentText>) {
15  const { children, leaf } = props;
16 
17  const { api, setOption } = useEditorPlugin(commentPlugin);
18  const hoverId = usePluginOption(commentPlugin, 'hoverId');
19  const activeId = usePluginOption(commentPlugin, 'activeId');
20 
21  const isOverlapping = getCommentCount(leaf) > 1;
22  const currentId = api.comment.nodeId(leaf);
23  const isActive = activeId === currentId;
24  const isHover = hoverId === currentId;
25 
26  return (
27    <PlateLeaf
28      {...props}
29      className={cn(
30        'border-b-2 border-b-highlight/[.36] bg-highlight/[.13] transition-colors duration-200',
31        (isHover || isActive) && 'border-b-highlight bg-highlight/25',
32        isOverlapping && 'border-b-2 border-b-highlight/[.7] bg-highlight/25',
33        (isHover || isActive) &&
34          isOverlapping &&
35          'border-b-highlight bg-highlight/45'
36      )}
37      attributes={{
38        ...props.attributes,
39        onClick: () => setOption('activeId', currentId ?? null),
40        onMouseEnter: () => setOption('hoverId', currentId ?? null),
41        onMouseLeave: () => setOption('hoverId', null),
42      }}
43    >
44      {children}
45    </PlateLeaf>
46  );
47}