​
1. Take action when a comment is added

The useCommentAddHandler() hook can be used to attach a callback to the onCommentAdd event.

import { useCommentAddHandler} from '@veltdev/react';

export default function YourDocument() {

  const commentAddEvent = useCommentAddHandler();
  useEffect(() => {
    console.log('commentAddEvent', commentAddEvent);
  }, [commentAddEvent]);


  return (
    <div>
       
    </div>
  )
}

onCommentAdd Event Data Schema

documentId
string

The document ID where the comment was added

location
Object

The location where the comment was added

addContext
Function

Use this to set custom data on the comment

targetAnnotationId
string

The id of the target annotation

annotation
CommentAnnotation

The annotation that is associated with the comment that was updated

​
2. Take action when comment is updated

The useCommentUpdateHandler() hook can be used to attach a callback to the onCommentUpdate event.

import { useCommentUpdateHandler} from '@veltdev/react';

export default function YourDocument() {

  const commentUpdateEvent = useCommentUpdateHandler();
  useEffect(() => {
    console.log('commentUpdateEvent', commentUpdateEvent);
  }, [commentUpdateEvent]);

  return (
    <div>
       
    </div>
  )
}

onCommentUpdate Event Data Schema

annotation
CommentAnnotation

The annotation that is associated with the comment that was updated

type
string

The type of comment that was updated

targetAnnotationId
string

The ID of the target annotation that contains the comment that was updated

targetCommentId
number

The ID of the target comment that was updated

​
3. Listen to changes in comment mode

The comment mode is toggled on and off when you click on the Comment Tool.

The useCommentModeState() hook can be used to get the Comment mode without having to subscribe to changes. When the Comment mode changes, the hook return value will update.

The subscription is automatically unsubscribed when the component dismounts.

import { useCommentModeState } from '@veltdev/react';

export default function YourDocument() {

  let commentModeState = useCommentModeState()

  return (
    <div>
       Comment Mode is turned on: {commentModeState}
    </div>
  )
}

​
4. Listen to Comment Selection changes

The useCommentSelectionChangeHandler hook can be used to subscribe to Comment selection changes.

import React, { useEffect } from 'react';
import { useCommentSelectionChangeHandler } from '@veltdev/react';

function YourComponent() {
    const commentSelectionChange = useCommentSelectionChangeHandler();

    useEffect(() => {
        console.log('commentSelectionChange', commentSelectionChange);
    }, [commentSelectionChange]);

    return (
        <>
            Selected Comment: {commentSelectionChange.annotation.id}
        </>
    );
}

Was this page helpful?

Add Custom MetadataGeneral Controls