[breaking] Update pdfjs-dist to 3.3.122

README.md

@@ -41,10 +41,10 @@ React-PDF supports all modern browsers. It is tested with the latest versions of
 
 The following browsers are supported in React-PDF v6:
 
-- Chrome ≥76
-- Edge (Chromium-based)
+- Chrome ≥85
+- Edge ≥85
 - Safari ≥14.1
-- Firefox ≥90(?)
+- Firefox ESR
 
 You may extend the list of supported browsers by providing additional polyfills (e.g. for `Promise.allSettled`) and configuring your bundler to transpile `pdfjs-dist`.
 

package.json

@@ -38,7 +38,7 @@
     "make-cancellable-promise": "^1.0.0",
     "make-event-props": "^1.4.2",
     "merge-refs": "^1.0.0",
-    "pdfjs-dist": "2.16.105",
+    "pdfjs-dist": "3.3.122",
     "prop-types": "^15.6.2",
     "tiny-invariant": "^1.0.0",
     "tiny-warning": "^1.0.0"

src/Page/AnnotationLayer.css

@@ -39,6 +39,16 @@
   }
 }
 
+[data-main-rotation='90'] {
+  transform: rotate(90deg) translateY(-100%);
+}
+[data-main-rotation='180'] {
+  transform: rotate(180deg) translate(-100%, -100%);
+}
+[data-main-rotation='270'] {
+  transform: rotate(270deg) translateX(-100%);
+}
+
 .annotationLayer {
   position: absolute;
   top: 0;

src/Page/AnnotationLayer.spec.jsx

@@ -214,68 +214,6 @@ describe('AnnotationLayer', () => {
       },
     );
 
-    it('renders annotations at a given rotation', async () => {
-      const {
-        func: onRenderAnnotationLayerSuccess,
-        promise: onRenderAnnotationLayerSuccessPromise,
-      } = makeAsyncCallback();
-      const rotate = 90;
-
-      const { container } = render(
-        <AnnotationLayer
-          linkService={linkService}
-          onRenderAnnotationLayerSuccess={onRenderAnnotationLayerSuccess}
-          page={page}
-          rotate={rotate}
-        />,
-      );
-
-      expect.assertions(2);
-
-      await onRenderAnnotationLayerSuccessPromise;
-
-      const annotationLayer = container.firstElementChild;
-
-      const { width, height } = window.getComputedStyle(annotationLayer);
-
-      const viewport = page.getViewport({ scale: 1 });
-
-      // Expect the annotation layer to be rotated
-      expect(parseInt(width, 10)).toBe(Math.floor(viewport.width));
-      expect(parseInt(height, 10)).toBe(Math.floor(viewport.height));
-    });
-
-    it('renders annotations at a given scale', async () => {
-      const {
-        func: onRenderAnnotationLayerSuccess,
-        promise: onRenderAnnotationLayerSuccessPromise,
-      } = makeAsyncCallback();
-      const scale = 2;
-
-      const { container } = render(
-        <AnnotationLayer
-          linkService={linkService}
-          onRenderAnnotationLayerSuccess={onRenderAnnotationLayerSuccess}
-          page={page}
-          scale={scale}
-        />,
-      );
-
-      expect.assertions(2);
-
-      await onRenderAnnotationLayerSuccessPromise;
-
-      const annotationLayer = container.firstElementChild;
-
-      const { width, height } = window.getComputedStyle(annotationLayer);
-
-      const viewport = page.getViewport({ scale });
-
-      // Expect the annotation layer to be scaled
-      expect(parseInt(width, 10)).toBe(Math.floor(viewport.width));
-      expect(parseInt(height, 10)).toBe(Math.floor(viewport.height));
-    });
-
     it('renders annotations with the default imageResourcesPath given no imageResourcesPath', async () => {
       const pdf = await pdfjs.getDocument({ data: annotatedPdfFile.arrayBuffer }).promise;
       const annotatedPage = await pdf.getPage(1);

src/Page/TextLayer.css

@@ -15,6 +15,25 @@
 
 :root {
   --react-pdf-text-layer: 1;
+  --highlight-bg-color: rgba(180, 0, 170, 1);
+  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
+}
+
+@media screen and (forced-colors: active) {
+  :root {
+    --highlight-bg-color: Highlight;
+    --highlight-selected-bg-color: ButtonText;
+  }
+}
+
+[data-main-rotation='90'] {
+  transform: rotate(90deg) translateY(-100%);
+}
+[data-main-rotation='180'] {
+  transform: rotate(180deg) translate(-100%, -100%);
+}
+[data-main-rotation='270'] {
+  transform: rotate(270deg) translateX(-100%);
 }
 
 .textLayer {
@@ -28,6 +47,9 @@
   line-height: 1;
   text-size-adjust: none;
   forced-color-adjust: none;
+  transform-origin: 0 0;
+  z-index: 2;
+  --scale-factor: 1;
 }
 
 .textLayer span,
@@ -49,7 +71,7 @@
 .textLayer .highlight {
   margin: -1px;
   padding: 1px;
-  background-color: rgba(180, 0, 170, 1);
+  background-color: var(--highlight-bg-color);
   border-radius: 4px;
 }
 
@@ -70,7 +92,7 @@
 }
 
 .textLayer .highlight.selected {
-  background-color: rgba(0, 100, 0, 1);
+  background-color: var(--highlight-selected-bg-color);
 }
 
 /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */

src/Page/TextLayer.jsx

@@ -154,9 +154,11 @@ export function TextLayerInternal({
 
     container.innerHTML = '';
 
+    const textContentSource = page.streamTextContent();
+
     const parameters = {
       container,
-      textContent,
+      textContentSource,
       viewport,
     };