fix: preserve text selection across pages

Author: reycn

src/features/reader/ReadingTextLayer.vue

@@ -38,7 +38,7 @@ let layer,
   highlights,
   frameHost,
   layoutZoom = 1;
-let unbindSelection, retentionTimer;
+let unbindSelection, retentionTimer, selectionRelease;
 const originals = new WeakMap();
 const emphasisKeys = new WeakMap();
 const topicSentenceClassifier = inject('topicSentenceClassifier', null);
@@ -246,6 +246,10 @@ watch(
   ],
   async () => {
     clearTimeout(retentionTimer);
+    if (selectionRelease) {
+      host.value?.ownerDocument.removeEventListener('selectionchange', selectionRelease);
+      selectionRelease = null;
+    }
     // Retain completed and in-flight text in the bounded virtual page window.
     // A transient hide during zoom must not restart font measurement.
     if (
@@ -259,6 +263,32 @@ watch(
       // DOM text. A page genuinely scrolled away releases its native layout.
       retentionTimer = setTimeout(() => {
         if (props.active) return;
+        const selection = host.value?.ownerDocument.getSelection();
+        if (selection?.rangeCount && selection.getRangeAt(0).intersectsNode(host.value)) {
+          // Release the retained layer as soon as the selection moves away.
+          selectionRelease = () => {
+            const current = host.value?.ownerDocument.getSelection();
+            if (
+              host.value &&
+              current?.rangeCount &&
+              current.getRangeAt(0).intersectsNode(host.value)
+            )
+              return;
+            host.value?.ownerDocument.removeEventListener('selectionchange', selectionRelease);
+            selectionRelease = null;
+            if (!props.active) {
+              generation++;
+              unbindSelection?.();
+              unbindSelection = null;
+              layer?.cancel();
+              layer = null;
+              rendered = false;
+              host.value?.replaceChildren();
+            }
+          };
+          host.value.ownerDocument.addEventListener('selectionchange', selectionRelease);
+          return;
+        }
         generation++;
         unbindSelection?.();
         unbindSelection = null;
@@ -368,6 +398,8 @@ watch(
 );
 onBeforeUnmount(() => {
   clearTimeout(retentionTimer);
+  if (selectionRelease)
+    host.value?.ownerDocument.removeEventListener('selectionchange', selectionRelease);
   generation++;
   unbindSelection?.();
   layer?.cancel();

src/features/reader/reader-viewport.mjs

@@ -2,6 +2,15 @@ import { visibleReaderWindow } from './reader-layout.mjs';
 
 export function createReaderViewport({ renderState, session, motion, view, activity, actions }) {
   function setRenderWindow(numbers) {
+    // A native range needs its page nodes to remain mounted while scrolling.
+    const selection = renderState.layoutElement.value?.ownerDocument?.getSelection();
+    if (selection?.rangeCount) {
+      const range = selection.getRangeAt(0);
+      for (const [number, page] of renderState.pageEls)
+        if (page.isConnected && range.intersectsNode(page) && !numbers.includes(number))
+          numbers.push(number);
+      numbers.sort((a, b) => a - b);
+    }
     const current = renderState.renderWindow.value;
     if (current.size !== numbers.length || numbers.some((n) => !current.has(n)))
       renderState.renderWindow.value = new Set(numbers);

src/features/reader/text-layer-selection.mjs

@@ -136,6 +136,24 @@ export function bindTextLayerSelection(host, getSpans) {
   const document = host.ownerDocument;
   const view = document.defaultView;
   let gesture;
+  let scrollFrame, pointer;
+  const scroller = host.closest('.reader');
+  function autoScroll() {
+    scrollFrame = 0;
+    if (!gesture || !pointer || !scroller) return;
+    const bounds = scroller.getBoundingClientRect();
+    const edge = 48;
+    const speed =
+      pointer.y < bounds.top + edge
+        ? -Math.min(24, (bounds.top + edge - pointer.y) / 3)
+        : pointer.y > bounds.bottom - edge
+          ? Math.min(24, (pointer.y - bounds.bottom + edge) / 3)
+          : 0;
+    if (!speed) return;
+    scroller.scrollTop += speed;
+    extend({ clientX: pointer.x, clientY: pointer.y, preventDefault() {} }, false);
+    scrollFrame = view.requestAnimationFrame(autoScroll);
+  }
   // A caret in PDF whitespace must follow the nearest visual run rather than
   // jump to a later DOM node in another column.
   function caret(x, y) {
@@ -196,16 +214,23 @@ export function bindTextLayerSelection(host, getSpans) {
       .getSelection()
       ?.setBaseAndExtent(anchor.node, anchor.offset, anchor.node, anchor.offset);
   }
-  function extend(event) {
+  function extend(event, scheduleScroll = true) {
     if (!gesture) return;
+    pointer = { x: event.clientX, y: event.clientY };
+    if (scheduleScroll && !scrollFrame) scrollFrame = view.requestAnimationFrame(autoScroll);
     const focus = caret(event.clientX, event.clientY);
     if (!focus || !gesture.node.isConnected) return;
     event.preventDefault();
     document
       .getSelection()
       ?.setBaseAndExtent(gesture.node, gesture.offset, focus.node, focus.offset);
   }
-  const finish = () => (gesture = null);
+  const finish = () => {
+    gesture = null;
+    pointer = null;
+    view.cancelAnimationFrame(scrollFrame);
+    scrollFrame = 0;
+  };
   host.addEventListener('mousedown', begin, true);
   textRuns.set(host, getSpans);
   document.addEventListener('mousemove', extend);
@@ -228,6 +253,7 @@ export function bindTextLayerSelection(host, getSpans) {
   layers.set(host, end);
   if (!listeners) installSharedListeners(document);
   return () => {
+    finish();
     host.removeEventListener('mousedown', begin, true);
     document.removeEventListener('mousemove', extend);
     document.removeEventListener('mouseup', finish);