How to create custom annotation comment with id?

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.0.1

Detailed description of issue
I want to create my own custom comment for highlight annotation and also for sticky note annotation. I just want to know how to create that with a specific id so that I can update or delete it in my DB using that id.

I already check this function “createAnnotationReply(annotation, initialText)” but I can not set my own custom id. This function only accepts a valid string as a comment.

Expected behaviour
I expect when I edit or delete any comment against highlights or note annotation then I can detect which comment I m deleting or updating by custom comment id.

Does your issue happen with every document, or just one?
I want this for every document where I want to create custom annotation comment.

Link to document
{Provide a link to the document in question if possible}

Code snippet
I actually need something like the below code snippet for creating my custom comment.

const noteText = new Annotations.StickyAnnotation();
noteText.Author = “Author”;
noteText.Id = note.id.toString();
noteText.Locked = false;
noteText.setContents(note.text);
noteText.Subject = ‘Note’;
annotManager.addAnnotation(noteText, true);

3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Hey there!

The assigned ID of an annotation cannot actually be changed since it is tracked and internally. However there are a lot of other ways to do this.

What we typically do in our applications is add an additional column to our database called “annotationId” or something similar, and there we store the WebViewer annotation id. So your “id” column would be your unique database ID and primary index, and your “annotationId” column would be set to the ID we assign the annotation in WebViewer.

Another way you can do this is by setting custom data on the annotation using the setCustomData and getCustomData APIs.

  const { annotationManager } = instance.Core;

  annotationManager.addEventListener('annotationChanged', async (annots, action) => {
    if(action === 'add') {
      for(const annot of annots) {
        annot.setCustomData('u_id', 'some unique ID')
      }
    } else { // For edit and delete
      for(const annot of annots) {
        const myId = annot.getCustomData('u_id')
        console.log(myId)
      }
    }
  })

The great thing is that custom data is serialized, so even when you export/import annotations, that data persists.

Hope this helps!

Thanks,
Logan

5

The second approach sounds good to me. Thanks, Logan

6

One more thing how do I differentiate the note comment and highlight comment? As they both have Subject = ‘Note’

7

Happy new year! Sorry for the delay, was on vacation visiting family for the holidays.

You can check what kind of annotation it is like this:

  instance.Core.annotationManager.addEventListener('annotationChanged', async (annots, action) => {
    if(action === 'add') {
      annots.forEach(annot => {
        
        if(annot instanceof instance.Core.Annotations.TextHighlightAnnotation) {
          // highlight
        }

        if(annot instanceof instance.Core.Annotations.StickyAnnotation) {
          // note
        }

      })
    }
  })

Thanks,
Logan

8

Happy new year. Hope you enjoyed your vacation. And thanks for the reply. But actually what I want to know is that, if I have Highlight Annotation and StickyNoteAnnotation I want to comment on them. Now how can I differentiate the comment as they both have Subject=‘Note’. I mean how to detect which one is TextHighlight Annotation comment and which one is StickyNoteAnnotation comment.

9

Hey!

Comments have a ‘InReplyTo’ field which you can use to get the parent annotation:

  instance.Core.annotationManager.addEventListener('annotationChanged', async (annots, action) => {
    if(action === 'add') {
      annots.forEach(annot => {

        const { InReplyTo } = annot;

        if(InReplyTo) {
          const parentAnnot = instance.Core.annotationManager.getAnnotationById(InReplyTo);

          if(parentAnnot instanceof instance.Core.Annotations.TextHighlightAnnotation) {
            // highlight
            console.log('highlight')
          }
  
          if(parentAnnot instanceof instance.Core.Annotations.StickyAnnotation) {
            // note
            console.log('note')
          }
        }
      })
    }
  })