Added support for the custom scrollParent for the scrollIntoView

[oleksandr-danylchenko]

Issue

The scrollIntoView is great and convenient in most cases, especially if you need to scroll to the annotation on load of the page. Thanks!

However, I our mobile app that uses Ionic components library, we faced an edge case with the getScrollParent. The Ionic handles a scrollable content in a bit of a peculiar way. It uses #shadow-dom to hide the "inner-scroll" scrollable element, but its "public" elements all have the overflow: visible¹

Therefore, if we render the text-annotator over such content, the scrollIntoView will be ineffective, operating over non-scrollable elements 🤷🏻‍♂️

Changes Made

Added support for providing a custom scrollParent to overcome the sensible limitations of the getScrollParent.

(Soomo Staged)

Footnotes

1. https://ionicframework.com/docs/api/content#scroll-methods ↩

[oleksandr-danylchenko]

This line seems contradictory to the following one 😅

text-annotator-js/packages/text-annotator/src/api/scrollIntoView.ts

Lines 61 to 62 in c07bdaf

	// The 1st selector is the topmost one as well
	const { range } = current.target.selector[0];

[oleksandr-danylchenko]

Also, due to such scroll handling in Ionic, I needed to add the following redraw workaround:

const AnnotatorScrollRedraw: FC<Pick<Props, 'scrollElement'>> = (props) => {
	const { scrollElement } = props;

	const r = useAnnotator();

	useEffect(() => {
		if (!scrollElement || !r) return;

		const handleScroll = () => r.redraw(true);
		scrollElement.addEventListener('scroll', handleScroll, { capture: true, passive: true });

		return () => scrollElement.removeEventListener('scroll', handleScroll);
	}, [scrollElement, r]);

	return null;
};

(See #104)