feat: Initial clean release of CHM

packages/pdf-viewer/hooks/useIsFocused.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+
+const useIsFocused = () => {
+	const [isFocused, setIsFocused] = useState(false);
+
+	useEffect(() => {
+		const onMessage = (event: MessageEvent) => {
+			if (event.data.type === 'blur') {
+				setIsFocused(false);
+			}
+		};
+		const onClick = (_event: MouseEvent) => {
+			setIsFocused(true);
+		};
+		window.addEventListener('message', onMessage);
+		document.addEventListener('click', onClick);
+		return () => {
+			window.removeEventListener('message', onMessage);
+			document.removeEventListener('click', onClick);
+		};
+	}, []);
+
+	return isFocused;
+};
+
+export default useIsFocused;

packages/pdf-viewer/hooks/useIsVisible.ts

@@ -0,0 +1,59 @@
+import { useEffect, useState, MutableRefObject, useRef } from 'react';
+
+
+const useIsVisible = (elementRef: MutableRefObject<HTMLElement>, rootRef: MutableRefObject<HTMLElement>) => {
+	const [isVisible, setIsVisible] = useState(false);
+	const lastVisible = useRef(0);
+	const invisibleOn = useRef(0);
+
+	useEffect(() => {
+		let observer: IntersectionObserver = null;
+		let timeout: number = null;
+		if (elementRef.current) {
+			observer = new IntersectionObserver((entries, _observer) => {
+				let visible = false;
+				// eslint-disable-next-line github/array-foreach -- Old code before rule was applied
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						visible = true;
+						lastVisible.current = Date.now();
+						if ((invisibleOn.current - lastVisible.current) > 300) {
+							setIsVisible(true);
+						} else {
+							if (!timeout) {
+								timeout = window.setTimeout(() => {
+									if (invisibleOn.current < lastVisible.current) {
+										setIsVisible(true);
+									}
+									timeout = null;
+								}, 300);
+							}
+						}
+					}
+				});
+				if (!visible) {
+					invisibleOn.current = Date.now();
+					setIsVisible(false);
+				}
+			}, {
+				root: rootRef.current,
+				rootMargin: '0px 0px 0px 0px',
+				threshold: 0,
+			});
+			observer.observe(elementRef.current);
+		}
+		return () => {
+			if (observer) {
+				observer.disconnect();
+			}
+			if (timeout) {
+				window.clearTimeout(timeout);
+				timeout = null;
+			}
+		};
+	}, [elementRef, rootRef]);
+
+	return isVisible;
+};
+
+export default useIsVisible;

packages/pdf-viewer/hooks/usePdfDocument.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect';
+import PdfDocument from '../PdfDocument';
+
+
+const usePdfDocument = (pdfPath: string) => {
+	const [pdfDocument, setPdfDocument] = useState<PdfDocument>(null);
+
+	useAsyncEffect(async (event: AsyncEffectEvent) => {
+		const pdfData = new PdfDocument(document);
+		await pdfData.loadDoc(pdfPath);
+		if (event.cancelled) return;
+		setPdfDocument(pdfData);
+	}, [pdfPath]);
+
+	return pdfDocument;
+};
+
+export default usePdfDocument;

packages/pdf-viewer/hooks/useScaledSize.ts

@@ -0,0 +1,56 @@
+import { useRef, useState, MutableRefObject } from 'react';
+import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect';
+import PdfDocument from '../PdfDocument';
+import { ScaledSize } from '../types';
+
+export interface ScaledSizeParams {
+	pdfDocument: PdfDocument;
+	pdfId: string;
+	containerWidth: number;
+	rememberScroll: boolean;
+	anchorPage: number;
+	container: MutableRefObject<HTMLElement>;
+	innerContainerEl: MutableRefObject<HTMLElement>;
+	pageGap: number;
+	zoom: number;
+}
+
+const useScaledSize = ({ pdfDocument, pdfId, containerWidth, rememberScroll, anchorPage, container, innerContainerEl, pageGap, zoom }: ScaledSizeParams) => {
+	const [scaledSize, setScaledSize] = useState<ScaledSize>(null);
+	const currentScaleSize = useRef(scaledSize);
+
+	useAsyncEffect(async (event: AsyncEffectEvent) => {
+		if (!pdfDocument || !containerWidth) return;
+		// console.log('scaledSize calculation triggered');
+		const effectiveWidth = Math.min(containerWidth - 20, 900) * (zoom || 1);
+		const scaledSize_ = await pdfDocument.getScaledSize(null, effectiveWidth);
+		if (event.cancelled) return;
+
+		const oldScaleSize = currentScaleSize.current;
+		const oldScrollTop = container.current.scrollTop;
+
+		innerContainerEl.current.style.height = `${(scaledSize_.height + pageGap) * pdfDocument.pageCount}px`;
+
+		// Adjust scroll position after window resize to keep the same page visible
+		if (oldScaleSize && container.current) {
+			container.current.scrollTop = oldScrollTop * (scaledSize_.scale / oldScaleSize.scale);
+		}
+
+		currentScaleSize.current = scaledSize_;
+		setScaledSize(scaledSize_);
+
+		// If loading after note rerender, try to retrieve the old scroll position
+		if (rememberScroll && pdfId && !oldScaleSize && !anchorPage) {
+			const scrollOffset = parseInt(sessionStorage.getItem(`pdf.${pdfId}.scrollTop`), 10) || null;
+			if (scrollOffset) {
+				// Adjusting it according to the new scale
+				container.current.scrollTop = scrollOffset * scaledSize_.scale;
+				// console.log('scroll set',container.current.scrollTop);
+			}
+		}
+	}, [pdfDocument, pdfId, rememberScroll, anchorPage, containerWidth, zoom]);
+
+	return scaledSize;
+};
+
+export default useScaledSize;

packages/pdf-viewer/hooks/useScrollSaver.ts

@@ -0,0 +1,66 @@
+import { useRef, useEffect, MutableRefObject, useState } from 'react';
+import PdfDocument from '../PdfDocument';
+import { ScaledSize } from '../types';
+
+export interface ScrollSaver {
+	container: MutableRefObject<HTMLElement>;
+	scaledSize: ScaledSize;
+	pdfId: string;
+	rememberScroll: boolean;
+	onActivePageChange: (activePage: number)=> void;
+	pdfDocument: PdfDocument;
+	pageGap: number;
+}
+
+const useScrollSaver = ({ container, scaledSize, pdfId, rememberScroll, onActivePageChange, pdfDocument, pageGap }: ScrollSaver) => {
+	const currentScaleSize = useRef(scaledSize);
+	const [currentActivePage, setCurrentActivePage] = useState(1);
+	const currentActivePageRef = useRef(currentActivePage);
+
+	useEffect(() => {
+		let scrollTimer: number = null;
+		const containerElement = container.current;
+
+		const saveScroll = () => {
+			if (!currentScaleSize.current) return;
+			const scale = currentScaleSize.current.scale;
+			const pdfScrollTop = container.current.scrollTop / scale;
+			if (rememberScroll && pdfId) {
+				sessionStorage.setItem(`pdf.${pdfId}.scrollTop`, `${pdfScrollTop}`);
+			}
+			if (onActivePageChange && currentScaleSize.current) {
+				const activePage = pdfDocument.getActivePageNo(currentScaleSize.current, pageGap, container.current.scrollTop);
+				if (currentActivePageRef.current !== activePage) {
+					// console.log('Active page changed', activePage, container.current.scrollTop);
+					currentActivePageRef.current = activePage;
+					onActivePageChange(activePage);
+					setCurrentActivePage(activePage);
+				}
+			}
+		};
+
+		const onScroll = () => {
+			if (scrollTimer) {
+				clearTimeout(scrollTimer);
+				scrollTimer = null;
+			}
+			scrollTimer = window.setTimeout(saveScroll, 200);
+		};
+
+		containerElement.addEventListener('scroll', onScroll);
+
+		return () => {
+			containerElement.removeEventListener('scroll', onScroll);
+			if (scrollTimer) {
+				clearTimeout(scrollTimer);
+				scrollTimer = null;
+			}
+		};
+	}, [container, pdfId, rememberScroll, currentScaleSize, onActivePageChange, pdfDocument, pageGap]);
+
+	useEffect(() => {
+		currentScaleSize.current = scaledSize;
+	}, [scaledSize]);
+};
+
+export default useScrollSaver;

packages/pdf-viewer/hooks/useVisibleOnSelect.ts

@@ -0,0 +1,27 @@
+import { useRef, useEffect, MutableRefObject } from 'react';
+
+export interface VisibleOnSelect {
+	container: MutableRefObject<HTMLElement>;
+	wrapperRef: MutableRefObject<HTMLElement>;
+	isVisible: boolean;
+	isSelected: boolean;
+}
+
+// Used in thumbnail view, to scroll to the newly selected page.
+
+const useVisibleOnSelect = ({ container, wrapperRef, isVisible, isSelected }: VisibleOnSelect) => {
+	const isVisibleRef = useRef(isVisible);
+
+	useEffect(() => {
+		if (isSelected && !isVisibleRef.current) {
+			container.current.scrollTop = wrapperRef.current.offsetTop;
+		}
+	}, [isSelected, isVisibleRef, container, wrapperRef]);
+
+	useEffect(() => {
+		isVisibleRef.current = isVisible;
+	}, [isVisible]);
+
+};
+
+export default useVisibleOnSelect;