How to create TextHighllight same as default TextHighllight Annotation

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.4.0

Detailed description of issue
When I create TextHiglightAnnotation by programmatically then it make difference from the default pdfjs TextHiglightAnnotation.

Expected behaviour
I want to create the TextHiglightAnnotation same as pdfjs default TextHiglightAnnotation

image

Does your issue happen with every document, or just one?
Yes. Need for all document annotation.

Code snippet

documentViewer.addEventListener('documentLoaded', () => {
      const highlight = new Annotations.TextHighlightAnnotation();
        highlight.Author = annot.Author;
        highlight.Hidden = false;
        highlight.Quads = annot.Quads;
        highlight.StrokeColor = new Annotations.Color(255, 176, 176, 1);
        highlight.PageNumber = annot.getPageNumber();
        highlight.Locked = false;
        highlight.setCustomData("trn-custom-data", "Test Data");
        highlight.Subject = 'Highlight';
        annotManager.addAnnotation(highlight, true);
        annotManager.drawAnnotations(1);
    })
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

Hello arman,

Setting the contents of the highlight with: highlight.setContents('Test') will show “Test” in the comments panel like the default TextHighlight.

You can also use getSelectedText and getSelectedTextQuads to set the contents and get the Quads of the annotation PDFJS Express WebViewer Class: DocumentViewer

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

5

Hey tgordon,

I set the contents using highlight.setContents(getSelectedText()). But you can see that the opacity of default pdfjs highlight annotation is less than the programatically created highlight annotation.

And when I click the edit button of default pdfjs highlight annotation, it show me a comment field and I can not edit the actual content but in self created annotation it give me the access to edit my actual content. Again when I drag the text of default pdfjs highlight annotation from PDF it edit the actual content in the right side bar. But when I drag the text of self created highlight annotation from pdf it do not edit my actual content, it create another text over my content.

See Video Ref Here

Here is my code snippet.

const highlight = new Annotations.TextHighlightAnnotation();
        highlight.Author = annot.Author;
        highlight.Hidden = false;
        highlight.Quads = annot.Quads;
        highlight.StrokeColor = new Annotations.Color(255, 176, 176, 1);
        highlight.PageNumber = annot.getPageNumber();
        highlight.Locked = false;
        highlight.setContents(getSelectedText());
        highlight.setCustomData("trn-custom-data", "Test Data");
        highlight.Subject = 'Highlight';
        annotManager.addAnnotation(highlight, true);
        annotManager.drawAnnotations(1);
    })
6

Hello arman,

It looks like you’ve created a whole new tool, I would suggest extending off the current TextHighlightCreateTool and adjusting the tool’s behaviour:
See more here: Customize PDF.js Express Viewer Annotations in Toolbar | Documentation

If you can send the tool’s code as well, this would help debug why the text isnt being shown in the notes panel when selecting text. Thanks!

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

7

Here is my code. Please let me know what is the problem.


docViewer.on('textSelected', (quads, text, pageNumber) => {
        if (text && quads && pageNumber) {
          this.setState({ selectedTexts: text, selectedTextQuads: quads, selectedTextPageNumber: pageNumber });
        }
      });


instance.UI.textPopup.add({
        type: 'actionButton',
        title: '' ",
        onClick: () => {
          const { selectedTexts, selectedTextQuads, selectedTextPageNumber } = this.state;
          if (selectedTexts && selectedTextQuads && selectedTextPageNumber) {
            let r = 255;
            let g = 176;
            let b = 176;
            const highlight = new Annotations.TextHighlightAnnotation();
            highlight.Author = this.state.author;
            highlight.Quads = this.state.selectedTextQuads;
            highlight.StrokeColor = new Annotations.Color(r, g, b);
            highlight.PageNumber = this.state.selectedTextPageNumber;
            highlight.Locked = false; // is editable or not
            highlight.setContents(this.state.selectedTexts);
            highlight.Subject = 'Citation';
            annotManager.addAnnotation(highlight);
          } else {
            BasicToaster.show({
              message: 'Please select some text .',
              intent: Intent.WARNING,
              timeout: 6000
            });
          }


        }
      });
8

Hello arman,

Looking at your code, you are mixing our two different version’s name-spacing. Here is an updated code snippet using our v8.0+ name-spacing:


instance.Core.documentViewer.addEventListener('textSelected', (quads, text, pageNumber) => {
    if (text && quads && pageNumber) {
        this.setState({ selectedTexts: text, selectedTextQuads: quads, selectedTextPageNumber: pageNumber });
    }
});


instance.UI.textPopup.add({
        type: 'actionButton',
        title: "",
        onClick: () => {
          const { selectedTexts, selectedTextQuads, selectedTextPageNumber } = this.state;
          if (selectedTexts && selectedTextQuads && selectedTextPageNumber) {
            let r = 255;
            let g = 176;
            let b = 176;
            const highlight = new instance.Core.Annotations.TextHighlightAnnotation();
            highlight.Author = this.state.author;
            highlight.Quads = this.state.selectedTextQuads;
            highlight.StrokeColor = new instance.Core.Annotations.Color(r, g, b);
            highlight.PageNumber = this.state.selectedTextPageNumber;
            highlight.Locked = false; // is editable or not
            highlight.setContents(this.state.selectedTexts);
            highlight.Subject = 'Citation';
            instance.Core.annotationManager.addAnnotation(highlight);
          } else {
            BasicToaster.show({
              message: 'Please select some text .',
              intent: Intent.WARNING,
              timeout: 6000
            });
          }


        }
      });

Using this made the annotation correctly for me.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron