Update PDF.js to 5.5.207

Fixes https://github.com/johnfactotum/foliate-js/issues/85

package-lock.json

@@ -16,7 +16,7 @@
         "fflate": "^0.8.2",
         "fs-extra": "^11.2.0",
         "globals": "^15.9.0",
-        "pdfjs-dist": "^4.7.76",
+        "pdfjs-dist": "^5.5.207",
         "rollup": "^4.22.4"
       }
     },
@@ -1006,6 +1006,14 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/node-readable-to-web-readable-stream": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/node-readable-to-web-readable-stream/-/node-readable-to-web-readable-stream-0.4.2.tgz",
+      "integrity": "sha512-/cMZNI34v//jUTrI+UIo4ieHAB5EZRY/+7OmXZgBxaWBMcW2tGdceIw06RFxWxrKZ5Jp3sI2i5TsRo+CBhtVLQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -1014,16 +1022,17 @@
       "license": "MIT"
     },
     "node_modules/pdfjs-dist": {
-      "version": "4.10.38",
+      "version": "5.5.207",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.10.38.tgz",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.5.207.tgz",
-      "integrity": "sha512-/Y3fcFrXEAsMjJXeL9J8+ZG9U01LbuWaYypvDW2ycW1jL269L3js3DVBjDJ0Up9Np1uqDXsDrRihHANhZOlwdQ==",
+      "integrity": "sha512-WMqqw06w1vUt9ZfT0gOFhMf3wHsWhaCrxGrckGs5Cci6ybDW87IvPaOd2pnBwT6BJuP/CzXDZxjFgmSULLdsdw==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
-        "node": ">=20"
+        "node": ">=20.19.0 || >=22.13.0 || >=24"
       },
       "optionalDependencies": {
-        "@napi-rs/canvas": "^0.1.65"
+        "@napi-rs/canvas": "^0.1.95",
+        "node-readable-to-web-readable-stream": "^0.4.2"
       }
     },
     "node_modules/picomatch": {

package.json

@@ -24,7 +24,7 @@
     "fflate": "^0.8.2",
     "fs-extra": "^11.2.0",
     "globals": "^15.9.0",
-    "pdfjs-dist": "^4.7.76",
+    "pdfjs-dist": "^5.5.207",
     "rollup": "^4.22.4"
   },
   "scripts": {

pdf.js

@@ -6,10 +6,10 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsPath('pdf.worker.mjs')
 
 const fetchText = async url => await (await fetch(url)).text()
 
-// https://github.com/mozilla/pdf.js/blob/642b9a5ae67ef642b9a8808fd9efd447e8c350e2/web/text_layer_builder.css
+// https://raw.githubusercontent.com/mozilla/pdf.js/refs/tags/v5.5.207/web/text_layer_builder.css
 const textLayerBuilderCSS = await fetchText(pdfjsPath('text_layer_builder.css'))
 
-// https://github.com/mozilla/pdf.js/blob/642b9a5ae67ef642b9a8808fd9efd447e8c350e2/web/annotation_layer_builder.css
+// https://raw.githubusercontent.com/mozilla/pdf.js/refs/tags/v5.5.207/web/annotation_layer_builder.css
 const annotationLayerBuilderCSS = await fetchText(pdfjsPath('annotation_layer_builder.css'))
 
 const render = async (page, doc, zoom) => {
@@ -57,14 +57,13 @@ const render = async (page, doc, zoom) => {
     container.onpointerup = () => container.classList.remove('selecting')
 
     const div = doc.querySelector('.annotationLayer')
-    await new pdfjsLib.AnnotationLayer({ page, viewport, div }).render({
+    const linkService = {
-        annotations: await page.getAnnotations(),
-        linkService: {
         goToDestination: () => {},
         getDestinationHash: dest => JSON.stringify(dest),
         addLinkAttributes: (link, url) => link.href = url,
-        },
+    }
-    })
+    await new pdfjsLib.AnnotationLayer({ page, viewport, div, linkService })
+        .render({ annotations: await page.getAnnotations() })
 }
 
 const renderPage = async (page, getImageBlob) => {
@@ -87,6 +86,15 @@ const renderPage = async (page, getImageBlob) => {
             margin: 0;
             padding: 0;
         }
+        /*
+        https://github.com/mozilla/pdf.js/commit/bd05b255fabfc313b194bfe9a17ccded4d90fb5a
+        */
+        :root {
+          --user-unit: 1;
+          --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
+          --scale-round-x: 1px;
+          --scale-round-y: 1px;
+        }
         ${textLayerBuilderCSS}
         ${annotationLayerBuilderCSS}
         </style>

vendor/pdfjs/annotation_layer_builder.css

@@ -14,6 +14,8 @@
  */
 
 .annotationLayer {
+  color-scheme: only light;
+
   --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
   --input-focus-border-color: Highlight;
   --input-focus-outline: 1px solid Canvas;
@@ -50,7 +52,7 @@
     }
 
     .popupAnnotation .popup {
-      outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
+      outline: calc(1.5px * var(--total-scale-factor)) solid CanvasText !important;
       background-color: ButtonFace !important;
       color: ButtonText !important;
     }
@@ -67,7 +69,7 @@
     }
 
     .popupAnnotation.focused .popup {
-      outline: calc(3px * var(--scale-factor)) solid Highlight !important;
+      outline: calc(3px * var(--total-scale-factor)) solid Highlight !important;
     }
   }
 
@@ -108,7 +110,6 @@
       white-space: nowrap;
       font: 10px sans-serif;
       line-height: 1.35;
-      user-select: none;
     }
   }
 
@@ -118,12 +119,23 @@
     pointer-events: auto;
     box-sizing: border-box;
     transform-origin: 0 0;
+    user-select: none;
 
     &:has(div.annotationContent) {
       canvas.annotationContent {
         display: none;
       }
     }
+
+    .overlaidText {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      display: inline-block;
+      overflow: hidden;
+    }
   }
 
   .textLayer.selecting ~ & section {
@@ -143,7 +155,6 @@
     > a:hover {
     opacity: 0.2;
     background-color: rgb(255 255 0);
-    box-shadow: 0 2px 10px rgb(255 255 0);
   }
 
   .linkAnnotation.hasBorder:hover {
@@ -169,7 +180,7 @@
     background-image: var(--annotation-unfocused-field-background);
     border: 2px solid var(--input-unfocused-border-color);
     box-sizing: border-box;
-    font: calc(9px * var(--scale-factor)) sans-serif;
+    font: calc(9px * var(--total-scale-factor)) sans-serif;
     height: 100%;
     margin: 0;
     vertical-align: top;
@@ -296,7 +307,7 @@
 
   .popupAnnotation {
     position: absolute;
-    font-size: calc(9px * var(--scale-factor));
+    font-size: calc(9px * var(--total-scale-factor));
     pointer-events: none;
     width: max-content;
     max-width: 45%;
@@ -305,16 +316,18 @@
 
   .popup {
     background-color: rgb(255 255 153);
-    box-shadow: 0 calc(2px * var(--scale-factor))
+    color: black;
-      calc(5px * var(--scale-factor)) rgb(136 136 136);
+    box-shadow: 0 calc(2px * var(--total-scale-factor))
-    border-radius: calc(2px * var(--scale-factor));
+      calc(5px * var(--total-scale-factor)) rgb(136 136 136);
+    border-radius: calc(2px * var(--total-scale-factor));
     outline: 1.5px solid rgb(255 255 74);
-    padding: calc(6px * var(--scale-factor));
+    padding: calc(6px * var(--total-scale-factor));
     cursor: pointer;
     font: message-box;
     white-space: normal;
     word-wrap: break-word;
     pointer-events: auto;
+    user-select: text;
   }
 
   .popupAnnotation.focused .popup {
@@ -322,36 +335,41 @@
   }
 
   .popup * {
-    font-size: calc(9px * var(--scale-factor));
+    font-size: calc(9px * var(--total-scale-factor));
   }
 
   .popup > .header {
     display: inline-block;
   }
 
-  .popup > .header h1 {
+  .popup > .header > .title {
     display: inline;
+    font-weight: bold;
   }
 
   .popup > .header .popupDate {
     display: inline-block;
-    margin-left: calc(5px * var(--scale-factor));
+    margin-left: calc(5px * var(--total-scale-factor));
     width: fit-content;
   }
 
   .popupContent {
     border-top: 1px solid rgb(51 51 51);
-    margin-top: calc(2px * var(--scale-factor));
+    margin-top: calc(2px * var(--total-scale-factor));
-    padding-top: calc(2px * var(--scale-factor));
+    padding-top: calc(2px * var(--total-scale-factor));
   }
 
   .richText > * {
     white-space: pre-wrap;
-    font-size: calc(9px * var(--scale-factor));
+    font-size: calc(9px * var(--total-scale-factor));
   }
 
   .popupTriggerArea {
     cursor: pointer;
+
+    &:hover {
+      backdrop-filter: var(--hcm-highlight-filter);
+    }
   }
 
   section svg {

vendor/pdfjs/text_layer_builder.css

@@ -14,6 +14,8 @@
  */
 
 .textLayer {
+  color-scheme: only light;
+
   position: absolute;
   text-align: initial;
   inset: 0;
@@ -38,19 +40,30 @@
     transform-origin: 0% 0%;
   }
 
+  /* We multiply the font size by --min-font-size, and then scale the text
+   * elements by 1/--min-font-size. This allows us to effectively ignore the
+   * minimum font size enforced by the browser, so that the text layer <span>s
+   * can always match the size of the text in the canvas. */
+  --min-font-size: 1;
+  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+  --min-font-size-inv: calc(1 / var(--min-font-size));
+
   > :not(.markedContent),
   .markedContent span:not(.markedContent) {
     z-index: 1;
+
+    --font-height: 0; /* set by text_layer.js */
+    font-size: calc(var(--text-scale-factor) * var(--font-height));
+
+    --scale-x: 1;
+    --rotate: 0deg;
+    transform: rotate(var(--rotate)) scaleX(var(--scale-x))
+      scale(var(--min-font-size-inv));
   }
 
-  /* Only necessary in Google Chrome, see issue 14205, and most unfortunately
+  .markedContent {
-   * the problem doesn't show up in "text" reference tests. */
+    display: contents;
-  /*#if !MOZCENTRAL*/
-  span.markedContent {
-    top: 0;
-    height: 0;
   }
-  /*#endif*/
 
   span[role="img"] {
     user-select: none;