Vizel API / react/src / useVizelComment

Function: useVizelComment()

function useVizelComment(editor, options?): UseVizelCommentResult;

Defined in: packages/react/src/hooks/useVizelComment.ts:84

Hook for managing document comments and annotations.

Parameters

Parameter	Type	Description
editor	Editor | null | undefined	The editor instance (or null while it is still initializing)
options	VizelCommentOptions	Comment configuration options

Returns

UseVizelCommentResult

Comment state and controls

Example

function Editor() {
  const editor = useVizelEditor({
    features: { collaboration: { comments: true } },
  });
  const { comments, addComment, resolveComment, setActiveComment } =
    useVizelComment(editor, { key: "my-comments" });

  const handleAddComment = () => {
    const text = prompt("Enter comment:");
    if (text) addComment(text, "Author");
  };

  return (
    <div>
      <VizelEditor editor={editor} />
      <button onClick={handleAddComment}>Add Comment</button>
      <ul>
        {comments.map((c) => (
          <li key={c.id} onClick={() => setActiveComment(c.id)}>
            {c.text} {c.resolved ? "(resolved)" : ""}
            <button onClick={() => resolveComment(c.id)}>Resolve</button>
          </li>
        ))}
      </ul>
    </div>
  );
}