How can I add a notes icon to a book whenever I highlight paragraphs with notes?

[panjadyboy]

No description provided.

[panjadyboy]

Can anyone help on this ?

[johnfactotum]

Easiest way is probably inserting the icon with Range.insertNode(). You can use ignoreClass to ignore it when getting the CFI.

Alternatively, you can append the icon element outside the rendition, and use getClientRects to get the position of the highlighted text and position the icon based on this. (But note that these the rects would be relative to the iframe; see https://github.com/johnfactotum/epubjs-tips#get-position-of-selected-text)

[panjadyboy]

When we use range.insertNode() , icon disappear after sometime . Can you please help how to resolve this ?

[panjadyboy]

Can anybody help me on this ?

[panjadyboy]

Hello , can anyone help me on this??

[johnfactotum]

Ah yes, I forgot about that. If I recall correctly, the problem would be that Epub.js reloads the whole section whenever it resizes. I'm not sure if there's a hook that could be used to account for that. Personally I would try a different approach that doesn't involve mutating the content.