Creating replies for PDF annotations

Annotating would not be complete without a discussion of the marked content. Annotations in PDFs allows users to reply to an annotation. A reply is actually just another annotation behind the scenes, specifically a Sticky Note annotation.

Since replies are just Sticky Note annotations, they can be found in the annotation list provided by the AnnotationManager. We can leverage the isReply API on annotations to differentiate from other annotations. Annotations in WebViewer are also aware of their replies which we can get using getReplies.

WebViewer({...}, viewerElement)
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      annotationManager.getAnnotationsList().forEach(annot => {
        if (!annot.isReply()) {
          const replies = annot.getReplies();
          console.log(`- Logging comments for ${annot.Id}`);
          replies.forEach(reply => {
            console.log(`--- ${reply.Id}: ${reply.getContents()}`);
          });
        }
      });
    });
  });

Creating replies through the AnnotationManager is made easy with the createAnnotationReply API. You only need the annotation you are replying to as well as the reply text.

WebViewer({...}, viewerElement)
  .then(instance => {
    const { Annotations, documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      annotationManager.getAnnotationsList().forEach(annot => {
        if (!annot.isReply() && annot instanceof Annotations.RectangleAnnotation) {
          annotationManager.createAnnotationReply(annot, `Viewed on ${new Date()}`);
        }
      });
    });
  });

Since replies are just annotations, deleting replies is the same as deleting an annotation with the annotation manager.

When a reply is added, the addReply event will be triggered on the AnnotationManager. This may be helpful in sending notifications when a reply is added.

WebViewer({...}, viewerElement)
  .then(instance => {
    const { annotationManager } = instance.Core;

    annotationManager.addEventListener('addReply', (reply, parent, root) => {
      
    });
  });

Suppose we wanted to programmatically have a reply letting the user know that a comment was deleted from the parent annotation. This can be achieved by using the createAnnotationReply method along with the deleteReply listener.

WebViewer(…)
.then(instance => {
	const { annotationManager } = instance.Core;

  annotationManager.addEventListener('deleteReply', (annotation, root) => {
      annotationManager.createAnnotationReply(root, `Comment was Removed by ${annotationManager.getCurrentUser()}`);
  });
});

Now that you know how to add annotations, learn how to create them!