Programmatically add annotation (text_highlighter.js)

[mrgianlu]

Hi All,

I was able to host the viewer and embed it as an iframe in an existing app.
I was also able to send a pdf from the origin encoded as base64, as postmessage to the iframe, to be rendered by the app.
I am also able, during rendering, to extract the textlayer and send it back to the parent app.
In the parent app I am doing some processing, to identify which part of these textlayer needs to be highlighted (by comparing it with an another pdf).

Basically in the textLayer I have a number of span containing the text and the top/left coordinates of it.

From these info, I'd like to programmatically add an annotation (highlight), exactly the same that would happen by clicking on the header tool for highlighting, and manually highlighting the text.

I'd like some input on how to achieve that, did you use the annotationLayer or annotationEditorLayer as container?
Did you use the internal functions or did you just render rectangles on top of it the existing layers (the problem with having annotation outside from the viewer functions would be that they are not maintained in any way, like for resizing, saving, ...)?

I've seen a user in a past conversation tweaking the opening of the AnnotationEditorLayer as FREETEXT to push in some annotation programmatically, but that code was buggy on my end, it was opening the freetext editor menu and never closing it.

The feature that I am trying to mimic is of course ./web/text_highlighter.js, however I am really stuck into how to trigger this piece from outside.

Thank you very much if you will find some time to give me some guidances on how to do this.