<Canvas> Comments

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>
  )
}

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>
)

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


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);
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

Render the Velt Comment Pin component and set the position

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>
  )
}

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>
  )
}

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

Self-Host Data

Webhooks

Security

Miscellaneous

<Canvas> Comments

Import the VeltCommentPin component and the useCommentAnnotations() hook.

Add custom metadata when comment is added

Retrieve all Comment Annotations

Render the Velt Comment Pin component and set the position

Import the VeltCommentPin component and the useCommentAnnotations() hook.

Add custom metadata when comment is added

Retrieve all Comment Annotations

Render the Velt Comment Pin component and set the position

Add custom metadata when comment is added

Retrieve all Comment Annotations

Render the Velt Comment Pin component and set the position