Fix annotations highlights not rendered in Firefox 130

hypothesis · Sep 12, 2024 · e3a5dbf · e3a5dbf
1 parent 4b60a07
commit e3a5dbf
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/src/annotator/anchoring/pdf.ts b/src/annotator/anchoring/pdf.ts
@@ -6,7 +6,7 @@ import type {
   TextQuoteSelector,
   Selector,
 } from '../../types/api';
-import type { PDFPageView, PDFViewer } from '../../types/pdfjs';
+import type { PDFPageView, PDFViewer, TextLayer } from '../../types/pdfjs';
 import { translateOffsets } from '../util/normalize';
 import { matchQuote } from './match-quote';
 import { createPlaceholder } from './placeholder';
@@ -259,6 +259,21 @@ function isSpace(char: string) {
 
 const isNotSpace = (char: string) => !isSpace(char);
 
+export function isTextLayerRenderingDone(textLayer: TextLayer): boolean {
+  if (textLayer.renderingDone !== undefined) {
+    return textLayer.renderingDone;
+  }
+
+  if (!textLayer.div) {
+    return false;
+  }
+
+  // When a Page is rendered, the div gets an element with the class
+  // endOfContent appended. If that element exists, we can consider the text
+  // layer is done rendering
+  return textLayer.div.querySelectorAll('.endOfContent').length > 0;
+}
+
 /**
  * Locate the DOM Range which a position selector refers to.
  *
@@ -285,7 +300,7 @@ async function anchorByPosition(
   if (
     page.renderingState === RenderingStates.FINISHED &&
     page.textLayer &&
-    page.textLayer.renderingDone
+    isTextLayerRenderingDone(page.textLayer)
   ) {
     // The page has been rendered. Locate the position in the text layer.
     //

diff --git a/src/annotator/integrations/pdf.tsx b/src/annotator/integrations/pdf.tsx
@@ -19,6 +19,7 @@ import {
   canDescribe,
   describe,
   documentHasText,
+  isTextLayerRenderingDone,
 } from '../anchoring/pdf';
 import { isInPlaceholder, removePlaceholder } from '../anchoring/placeholder';
 import { TextRange } from '../anchoring/text-range';
@@ -356,7 +357,7 @@ export class PDFIntegration extends TinyEmitter implements Integration {
     const pageCount = this._pdfViewer.pagesCount;
     for (let pageIndex = 0; pageIndex < pageCount; pageIndex++) {
       const page = this._pdfViewer.getPageView(pageIndex);
-      if (!page?.textLayer?.renderingDone) {
+      if (!page?.textLayer || !isTextLayerRenderingDone(page.textLayer)) {
         continue;
       }
 

diff --git a/src/types/pdfjs.ts b/src/types/pdfjs.ts
@@ -192,7 +192,11 @@ export type PDFViewerApplication = {
 };
 
 export type TextLayer = {
-  renderingDone: boolean;
+  /**
+   * This prop is private in PDF.js >=4.5, so we cannot safely trust it's
+   * publicly exposed
+   */
+  renderingDone?: boolean;
   /**
    * New name for root element of text layer in PDF.js >= v3.2.146
    */