How to integrate Quill-comment with React-quill?

Question

I currently have this Code SandBox where I am trying to get React-Quill and Quill-Comment to work together so that I can let users comment on content that has been written.

Quill comment is not a react package and I am a react noob so I don't know if what I am trying to do it even possible. It appears to partially work because the toolbar add comment button registers the click event.

  let commentCallback;
  function commentAddClick(callback) {
    setOpen(true); //show the modal

    commentCallback = callback; //Appears to do nothing?
    console.log("callback :>> ", callback); //Nothing is ever in the callback
    console.log("commentAddClick");
  }

However, the callback value doesn't appear to have or do anything. When I click the add comment button in the modal:

const commentSave = () => {
    const comment = "This is a comment, forced for testing";
    commentCallback(comment);
    console.log("comment :>> ", comment);

    //let comment = $('#commentInput').val();
    commentCallback(comment);
    addCommentToList(comment, currentTimestamp);
  };

it throws an error that tells me

commentCallback is not a function

I am attempting to following the Vanilla JS example see line 68 here. I assume this problem is related to this warning message that spams on every keypress.

quill:toolbar ignoring attaching to nonexistent format comments-add

How do I resolve the warning message, and get the callback to work? Or, secondarily, is there another good commenting library that will work with Quill?

A working example in Vanilla JS can be found here: https://github.com/nhaouari/quill-comment/tree/master/example/quill-comment-test

I'd like to replicate this in React.

How to integrate Quill-comment with React-quill?

0 Answers