Export the redraw function from the TextAnnotator

[oleksandr-danylchenko]

Context

By default, the highlights layer gets redrawn whenever a user scrolls a page. To trigger that redraw process, the scroll event listener is attached to the document.body:

text-annotator-js/packages/text-annotator/src/highlight/baseRenderer.ts

Lines 132 to 134 in 35056b3

	// Refresh on scroll
	const onScroll = () => redraw(true);
	document.addEventListener('scroll', onScroll, { capture: true, passive: true });

Issue

Unfortunately, when the TextAnnotator is rendered on a page with the overflow: hidden styles applied to the body - no scroll events will be processed. Which will make the highlights look out of sync with the annotated content.
Such style is common for web apps written with mobile-development frameworks like the Ionic Capacitor.

Screen.Recording.2024-06-06.at.12.30.46.mov

Suggested Changes

Export the redraw method from the TextAnnotator instance to allow manual triggering for the highlights layer updates. The consuming app will know where the alternative scroll listener should be attached and when the redrawing should be triggered 👌🏻