How to delete highlight annotation from pdf with pdf js express in react

I am using pdf js express to draw highlight annotation in pdf. But when I couldn’t delete the annotation from the pdf. I am using this code to create highlight:

  const { Annotations, annotManager } = instance;
  citations.forEach((citation) => {
    if (citation.quads && isNumber(citation.page) && !isNaN(parseInt(citation.id))) {
      const citationAuthor = citation.created_by && citation.created_by.user
        ? `${citation.created_by.user.first_name} ${citation.created_by.user.last_name}`.trim()
        : author;
  
      const highlight = new Annotations.TextHighlightAnnotation();
      highlight.Author = citationAuthor;
      highlight.Quads = citation.quads;
      highlight.PageNumber = citation.page;
      highlight.Id = citation.id.toString();
      highlight.Locked = true;
      highlight.Subject = 'Citation';
      annotManager.addAnnotation(highlight, true);
      annotManager.drawAnnotations(highlight.PageNumber);
    }
  });

I am not finding any way to delete highlight annotation which will basically remove the highlight from the pdf. I tried deleteAnnotation but it is not deleting the highlight from the pdf.

Hi!

Thank you for trying out PDF.js Express.

To delete an annotation you can use the deleteAnnotation API.

annotManager.deleteAnnotation(highlight)

Thanks!
Logan

I am using delete annotation. But it is not working:

let { Annotations, annotManager } = instance;

    citations.forEach((citation) => {

      if (citation.quads && isNumber(citation.page) && !isNaN(parseInt(citation.id))) {

        let citationAuthor = citation.created_by && citation.created_by.user

          ? `${citation.created_by.user.first_name} ${citation.created_by.user.last_name}`.trim()

          : author;

        tempDrawnCitationIds.push(citation.id);

        let highlight = new Annotations.TextHighlightAnnotation();

        highlight.Author = citationAuthor;

        highlight.Quads = citation.quads;

        highlight.PageNumber = citation.page;

        highlight.Id = citation.id.toString();

        highlight.Locked = true; // is editable or not

        highlight.Subject = 'Citation';

        annotManager.deleteAnnotation(highlight);

        annotManager.drawAnnotations(highlight.PageNumber);

      }

    });

Hey there,

Are you trying to delete an annotation that is already part of the document? I’m a little bit confused by your code because you are not adding the annotation to the document first. PDF.js Express does not support deleting annotations that are already baked into the document.