Add Custom Metadata

​

1. Add Custom Metadata on Comment Annotation

Custom metadata allows you to add extra information to comments, enhancing their functionality. Here’s what you can do with it:

• Render additional data on comments
• Position comment pins manually
• Create custom UI components
• Enable comment filtering on custom data

To add custom metadata, use the event.addContext() method when a comment is added. This method accepts an object with key-value pairs.

• React / Next.js
• Other Frameworks

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

const yourMethod = (event) => {
  event?.addContext({ customKey: 'customValue' });
}

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

export default function YourDocument() {

  const commentAddEvent = useCommentAddHandler();

  useEffect(() => {
    console.log('commentAddEvent', commentAddEvent);
    commentAddEvent?.addContext({ customKey: 'customValue' });
  }, [commentAddEvent]);

  return (
    <div></div>
  )
}

const commentElement = client.getCommentElement();

commentElement.onCommentAdd().subscribe((event) => {
  event?.addContext({ customKey: 'customValue' });
});

​

2. Update Custom Metadata on Comment Annotation

You can update the custom metadata associated with a comment annotation using the updateContext method. This method is available in two scenarios:

1. In the onCommentUpdate event callback: Use this to update the context when a comment is modified.

2. Via the updateContext API method: Utilize this method to update the context of a comment annotation at any time. For example, you might use this when the name of the dashboard containing the comment annotation changes.

​

#1. onCommentUpdate event

The updateContext method accepts two parameters:

• The new metadata object
• An optional updateContextConfig object. Specify how the new metadata should be applied:
  • { merge: true }: Merges the new metadata with the existing metadata
  • { merge: false } or omitted: Replaces the existing metadata entirely (default behavior)

• React / Next.js
• Other Frameworks

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

const yourMethod = (event) => {
  console.log('commentUpdateEvent', event);
  event?.updateContext({ customKey: 'customValue' }, { merge: true });
}

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

export default function YourDocument() {

  const commentUpdateEvent = useCommentUpdateHandler();
  useEffect(() => {
    console.log('commentUpdateEvent', commentUpdateEvent);
    commentUpdateEvent?.updateContext({ customKey: 'customValue' }, { merge: true });
  }, [commentUpdateEvent]);

  return (
    <div></div>
  )
}

const commentElement = client.getCommentElement();

commentElement.onCommentUpdate().subscribe((event) => {
  console.log('commentUpdateEvent', event);
  event?.updateContext({ customKey: 'customValue' }, { merge: true });
});

​

#2. commentElement.updateContext

The commentElement.updateContext() method accepts three parameters:

• The Comment Annotation ID
• The new metadata object
• An optional updateContextConfig object. Specify how the new metadata should be applied:
  • { merge: true }: Merges the new metadata with the existing metadata
  • { merge: false } or omitted: Replaces the existing metadata entirely (default behavior)

• React / Next.js
• Other Frameworks

const updatedContext = { customKey: 'customValue' };
const updateContextConfig = { merge: true };

const commentElement = client.getCommentElement();
commentElement.updateContext(COMMENT_ANNOTATION_ID, updatedContext, updateContextConfig);