import { VeltComments, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {

  const { client } = useVeltClient();

  // 2
  const addContext = (event) => {
    event?.addContext({ customKey: 'customValue' });
  }
  useEffect(()=>{
    if(client){
      const commentElement = client.getCommentElement();
      // 4
      commentElement.onCommentModeChange().subscribe((mode) => { 
        //mode contains the state after change
      });
    }
  })

  return (
    <div>
        <VeltComments 
            onCommentAdd={(event) => addContext(event)} {/* 1 */}
            onCommentUpdate={(event) => yourMethod(event)} {/* 3 */}
        />
        <VeltCommentTool onCommentModeChange={(mode) => yourMethod(mode)} {/* 4 */}/>
    </div>
  • React / Next.js

  • HTML

1

Take action when a comment is added

The onCommentAdd event is emitted when a new comment is created. You can add a callback function to handle onCommentAdd events when they occur.

<VeltComments onCommentAdd={(event) => yourMethod(event)} />

onCommentAdd Event 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

2

Attach additional context to each comment

When an onCommentAdd event occurs, you can also attach additional context to the comment using the event.addContext() method, which takes in a key-value paired object.

<VeltComments onCommentAdd={(event) => yourMethod(event)} />
const yourMethod = (event) => {
  event?.addContext({ customKey: 'customValue' });
}
3

Take action when comment is updated

The onCommentUpdate event is emitted when a comment is updated.

<VeltComments onCommentUpdate={(event) => yourMethod(event)} />

onCommentUpdate Event 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

4

Listen to changes in comment mode

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

To subscribe to changes in the comment mode, use the onCommentModeChange() method.

As a property on VeltCommentTool:

<VeltCommentTool onCommentModeChange={(mode) => onCommentModeChange(mode)} />

API method:

commentElement.onCommentModeChange().subscribe((mode) => {
    //mode contains the state after change
});