Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/docs/llms.txt
Use this file to discover all available pages before exploring further.
React / Next.js
Other Frameworks
Import the VeltCommentPin component and the useCommentAnnotations() hook.
Import the VeltCommentPin component and the useCommentAnnotations() hook.import { VeltCommentPin, useCommentAnnotations } from '@veltdev/react';
Add custom metadata when comment is added
Use the onCommentAdd method to add custom metadata to a comment when a new comment is being added.This metadata can be used later to set the position of the Comment Pin.
You need to set the mandatory commentType: 'manual' property to the metadata object.<VeltComments onCommentAdd={(event) => yourMethod(event)} />
const yourMethod = (event) => {
event?.addContext({ customKey: 'customValue', commentType: 'manual' });
}
Retrieve all Comment Annotations
Retrieve all Comment Annotations using the useCommentAnnotations() hook.To learn more about the useCommentAnnotations() hook, read here.let commentAnnotations = useCommentAnnotations()
Render the Velt Comment Pin component and set the position
Add the Velt Comment Pin component and pass in the Comment Annotation Id.
Now retrieve the context to retrieve the custom metadata you set earlier and use it to set the position of the Comment Pin.
let commentAnnotations = useCommentAnnotations()
return (
<div className='comments-container'>
{
commentAnnotations.map((commentAnnotation) => {
return (
<div key={commentAnnotation.annotationId} style={{
position: 'absolute',
left: commentAnnotation.context.position.x + dragPosition.x,
top: commentAnnotation.context.position.y + dragPosition.y,
transform: 'translate(0%, -100%)'
}}>
<VeltCommentPin annotationId={commentAnnotation.annotationId}></VeltCommentPin>
</div>
)
})
}
</div>
)
Add custom metadata when comment is added
Use the onCommentAdd method to add custom metadata to a comment when a new comment is being added.This metadata can be used later to set the position of the Comment Pin.
You need to set the mandatory commentType: 'manual' property to the metadata object.const veltCommentsTag = document.querySelector('velt-comments');
veltCommentsTag?.addEventListener('onCommentAdd', (event) => {
console.log('*** onCommentAdd ***');
console.log(event.detail);
event.detail?.addContext({ customKey: 'customValue', commentType: 'manual'});
});
Retrieve all Comment Annotations
Retrieve all existing Comment Annotations using the getAllCommentAnnotations() method.To learn more about the getAllCommentAnnotations method, read here.const commentElement = Velt.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
// console.log(commentAnnotations);
});
subscription?.unsubscribe()
Render the Velt Comment Pin component and set the position
Add the Velt Comment Pin component and pass in the Comment Annotation Id.
Now retrieve the context to retrieve the custom metadata you set earlier and use it to set the position of the Comment Pin.const commentElement = Velt.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
renderCommentAnnotations(commentAnnotations);
});
const commentsContainer = document.getElementById('comments-container');
function renderCommentAnnotations(commentAnnotations) {
commentAnnotations.forEach((commentAnnotation) => {
if (!document.getElementById(`comment-pin-container-${commentAnnotation.annotationId}`)) {
// Add Comment Pin if it doesn't exist
const { x, y } = commentAnnotation.context.position;
var commentPinContainer = document.createElement('div');
commentPinContainer.className = 'comment-pin-container';
commentPinContainer.id = `comment-pin-container-${commentAnnotation.annotationId}`;
commentPinContainer.style.left = x + 'px';
commentPinContainer.style.top = y + 'px';
commentPinContainer.innerHTML = `<velt-comment-pin annotation-id="${commentAnnotation?.annotationId}"></velt-comment-pin>`;
commentsContainer?.appendChild(commentPinContainer);
}
});
}
import { VeltCommentPin, useCommentAnnotations } from '@veltdev/react';
export default function YourDocument() {
const yourMethod = (event) => {
event?.addContext({ customKey: 'customValue', commentType: 'manual' });
}
let commentAnnotations = useCommentAnnotations()
return (
<VeltComments onCommentAdd={(event) => yourMethod(event)} />
<div className='comments-container'>
{
commentAnnotations.map((commentAnnotation) => {
return (
<div key={commentAnnotation.annotationId} style={{
position: 'absolute',
left: commentAnnotation.context.position.x + dragPosition.x,
top: commentAnnotation.context.position.y + dragPosition.y,
transform: 'translate(0%, -100%)'
}}>
<VeltCommentPin annotationId={commentAnnotation.annotationId}></VeltCommentPin>
</div>
)
})
}
</div>
)
}
