udecode / plate

A rich-text editor powered by AI
https://platejs.org
Other
12.14k stars 741 forks source link

CommentsPlugin - deleting a comment does not remove it from the editor comment store #3717

Open DuncanLHS opened 3 weeks ago

DuncanLHS commented 3 weeks ago

Description

I'm monitoring the editor comments state with:

const comments = editor.useOption(CommentsPlugin, "comments")

This is triggering fine when adding or updating comments and replies (effectively add with parentId), but not with delete. It seems like the node is removed from the editor value but the comment remains in the store. Running getCommentNodesByID() in the deleted comment ID returns an empty array as you'd expect.

I have been through the CommentsPlugin source but I'm struggling to get my head around where this should be happening.

The expected behaviour would be to also remove the comment from the store when deleting if I'm not mistaken?

Reproduction URL

No response

Reproduction steps

1. Render a Plate Editor
2. Create a comment
3. Delete a comment
4. Inspect the Plate comment store.

Plate version

39.2.4

Slate React version

0.110.1

Screenshots

No response

Logs

No response

Browsers

No response

DuncanLHS commented 3 weeks ago

To add, the issue seems to be in useCommentDeleteButton

The onClick event is either removing the node editor OR removing the comment from the store depending on whether the comment is active or not. Not sure what the intention is here but to me it's counter-intuitive, I would expect a delete action to perform both, regardless of whether the comment is active or not:

onClick: () => {
        if (activeCommentId === id) {
          // Removes the comment nodes from the editor.
          unsetCommentNodesById(editor, { id })
          setOption("activeCommentId", null)
        } else {
          // Removes the comment from the comments store.
          api.comment.removeComment(id)
        }

        onCommentDelete?.(id)
      },

Proposed change to onClick:

onClick: () => {
        // Always clean up both nodes and store
        unsetCommentNodesById(editor, { id })
        api.comment.removeComment(id)

        // Reset active comment if this was the active one
        if (activeCommentId === id) {
          setOption("activeCommentId", null)
        }

        onCommentDelete?.(id)
      },

I'll not submit a PR for now as there may be intended behaviour that I've missed.