comment-kit

1'use client';
2 
3import type { ExtendConfig, Path } from 'platejs';
4 
5import {
6  type BaseCommentConfig,
7  BaseCommentPlugin,
8  getDraftCommentKey,
9} from '@platejs/comment';
10import { toTPlatePlugin } from 'platejs/react';
11 
12import { CommentLeaf } from '@/registry/ui/comment-node';
13import { getDiscussionClickTarget } from './discussion-kit';
14 
15type CommentConfig = ExtendConfig<
16  BaseCommentConfig,
17  {
18    activeId: string | null;
19    commentingBlock: Path | null;
20    hoverId: string | null;
21  }
22>;
23 
24export const commentPlugin = toTPlatePlugin<CommentConfig>(BaseCommentPlugin, {
25  handlers: {
26    onClick: ({ api, event, setOption, type }) => {
27      const activeTarget = getDiscussionClickTarget({
28        selector: `.slate-${type}`,
29        target: event.target,
30      });
31 
32      if (!activeTarget) {
33        setOption('activeId', null);
34        return;
35      }
36 
37      const commentEntry = api.comment?.node();
38 
39      setOption(
40        'activeId',
41        commentEntry ? (api.comment?.nodeId(commentEntry[0]) ?? null) : null
42      );
43    },
44  },
45  options: {
46    activeId: null,
47    commentingBlock: null,
48    hoverId: null,
49  },
50})
51  .extendTransforms(
52    ({
53      editor,
54      setOption,
55      tf: {
56        comment: { setDraft },
57      },
58    }) => ({
59      setDraft: () => {
60        if (editor.api.isCollapsed()) {
61          editor.tf.select(editor.api.block()![1]);
62        }
63 
64        setDraft();
65 
66        editor.tf.collapse();
67        setOption('activeId', getDraftCommentKey());
68        setOption('commentingBlock', editor.selection!.focus.path.slice(0, 1));
69      },
70    })
71  )
72  .configure({
73    node: { component: CommentLeaf },
74    shortcuts: {
75      setDraft: { keys: 'mod+shift+m' },
76    },
77  });
78 
79export const CommentKit = [commentPlugin];