How to get callback event when a comment box is opened or closed

[ganeshrvel]

Hi,

I'm using the CommentsPlugin in my Plate editor and need to detect when a comment box is opened or closed, including when it's closed by clicking outside the box.

My current code:

'use client';
import type { Value } from '@udecode/plate';
import type { TComment } from '@udecode/plate-comments';
import type { CommentHandlers } from './use-create-editor';
import { Plate } from '@udecode/plate/react';
import React, {useEffect} from 'react';
import { Editor, EditorContainer } from '../plate-ui/editor.tsx';
import { useCreateEditor } from './use-create-editor';

export function PlateEditor({
  readOnly,
  commentHandlers,
  onValueChange,
  initialValue,
  initialComments,
  myUserId,
}) {
  const editableEditor = useCreateEditor({
    commentHandlers,
    myUserId,
    value: initialValue,
    comments: initialComments,
  });
  
  return (
    <Plate
      editor={editableEditor}
      readOnly={readOnly}
      onValueChange={(options) => {
        onValueChange(options.value);
      }}
    >
      <EditorContainer>
        <Editor variant="none" className="min-h-full w-full" />
      </EditorContainer>
    </Plate>
  );
}

type CreateEditorOptions = {
  commentHandlers: CommentHandlers;
  value: Value;
  myUserId: string;
  comments: Record<string, TComment>;
};

export const useCreateEditor = (options: CreateEditorOptions) => {
  const { commentHandlers, myUserId, value, comments } = options;
  
  const commentsPlugin = CommentsPlugin.configure({
    options: {
      comments,
      myUserId,
      onCommentAdd: (value) => {
        console.log("commentsPlugin onCommentAdd", value);
        
        commentHandlers.onCommentAdd(value);
      },
      onCommentDelete: (commentId) => {
        console.log("commentsPlugin onCommentDelete", commentId);
        
        commentHandlers.onCommentDelete(commentId);
      },
      onCommentUpdate: (value) => {
        console.log("commentsPlugin onCommentUpdate", value);
        
        commentHandlers.onCommentUpdate(value);
      },
    },
    render: {
      afterEditable: () => <CommentsPopover />
    },
  });

  return usePlateEditor({
    override: {
      components: withPlaceholders({
        [CommentsPlugin.key]: CommentLeaf,
      }),
    },
    plugins: [
      commentsPlugin,
      FloatingToolbarPlugin,
    ],
    value,
  });
};

I have handlers for comment add/delete/update, but I need an event specifically for when a comment box closes, including when it's closed by clicking outside the comment area.

From looking at the code, I know the CommentsPlugin has an activeId state which seems related to when a comment is active, but I'm not sure how to subscribe to changes in this state.

Is there a built-in way to listen for comment box open/close events?

Any help would be greatly appreciated!