Upgrade pdf.js to 3.6.172 (#13112)

GitOrigin-RevId: 030528343f271a1fc1e07c3bba358873173bec76

services/web/app/src/Features/Project/ProjectController.js

@@ -968,7 +968,7 @@ const ProjectController = {
           SplitTestHandler.getAssignment(
             req,
             res,
-            'pdfjs-31',
+            'pdfjs-36',
             {},
             (error, assignment) => {
               // do not fail editor load if assignment fails

services/web/cypress/support/webpack.cypress.ts

@@ -35,7 +35,7 @@ const buildConfig = () => {
   )
 
   // add entrypoints under '/' for pdfjs workers
-  const pdfjsVersions = ['pdfjs-dist213', 'pdfjs-dist31']
+  const pdfjsVersions = ['pdfjs-dist213', 'pdfjs-dist36']
   for (const name of pdfjsVersions) {
     addWorker(name, `${name}/legacy/build/pdf.worker.js`)
   }

services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.js

@@ -215,7 +215,11 @@ function PdfJsViewer({ url, pdfFile }) {
   useEffect(() => {
     if (pdfJsWrapper) {
       const handleTextlayerrendered = textLayer => {
-        const pageElement = textLayer.source.textLayerDiv.closest('.page')
+        // handle both versions for backwards-compatibility
+        const textLayerDiv =
+          textLayer.source.textLayerDiv ?? textLayer.source.textLayer.div
+
+        const pageElement = textLayerDiv.closest('.page')
 
         if (!pageElement.dataset.listeningForDoubleClick) {
           pageElement.dataset.listeningForDoubleClick = true

services/web/frontend/js/features/pdf-preview/util/pdf-js-versions.js

@@ -6,20 +6,20 @@ import 'core-js/stable/promise/all-settled' // polyfill for Promise.allSettled (
 import getMeta from '../../../utils/meta'
 import { createWorker } from '../../../utils/worker'
 
-async function importPDFJS31() {
-  const cMapUrl = '/js/pdfjs-dist31/cmaps/'
-  const standardFontDataUrl = '/fonts/pdfjs-dist31/'
-  const imageResourcesPath = '/images/pdfjs-dist31/'
+async function importPDFJS36() {
+  const cMapUrl = '/js/pdfjs-dist36/cmaps/'
+  const standardFontDataUrl = '/fonts/pdfjs-dist36/'
+  const imageResourcesPath = '/images/pdfjs-dist36/'
 
   const [PDFJS, PDFJSViewer] = await Promise.all([
-    import('pdfjs-dist31/legacy/build/pdf'),
-    import('pdfjs-dist31/legacy/web/pdf_viewer'),
-    import('pdfjs-dist31/legacy/web/pdf_viewer.css'),
+    import('pdfjs-dist36/legacy/build/pdf'),
+    import('pdfjs-dist36/legacy/web/pdf_viewer'),
+    import('pdfjs-dist36/legacy/web/pdf_viewer.css'),
   ])
 
   createWorker(() => {
     PDFJS.GlobalWorkerOptions.workerPort = new Worker(
-      new URL('pdfjs-dist31/legacy/build/pdf.worker.js', import.meta.url)
+      new URL('pdfjs-dist36/legacy/build/pdf.worker.js', import.meta.url)
     )
   })
 
@@ -61,13 +61,14 @@ async function importPDFJS213() {
 async function importPDFJS() {
   const variant = getMeta('ol-pdfjsVariant', 'default')
 
+  // NOTE: split test variants must have at least 3 characters
   switch (variant) {
     case '213':
     case 'default':
       return importPDFJS213()
 
-    case '318':
-      return importPDFJS31()
+    case '36172':
+      return importPDFJS36()
   }
 }
 

services/web/frontend/stylesheets/app/editor/pdf.less

@@ -171,6 +171,10 @@
       box-sizing: content-box;
       margin-left: auto;
       margin-right: auto;
+      box-shadow: 0 0 8px #bbb;
+      border: none;
+      margin-top: 10px;
+      margin-bottom: 10px;
     }
     .pdfjs-viewer-inner {
       position: absolute;
@@ -209,6 +213,7 @@
     top: 0;
     left: 0;
     display: inline-block;
+    z-index: 2;
     .btn-group {
       transition: opacity 0.5s ease, visibility 0 linear 0.5s;
       visibility: hidden;

services/web/package.json

@@ -215,7 +215,7 @@
     "passport-saml": "^3.2.4",
     "passport-twitter": "^1.0.4",
     "pdfjs-dist213": "npm:pdfjs-dist@2.13.216",
-    "pdfjs-dist31": "npm:pdfjs-dist@3.1.81",
+    "pdfjs-dist36": "npm:pdfjs-dist@3.6.172",
     "prop-types": "^15.7.2",
     "pug": "^3.0.1",
     "pug-runtime": "^3.0.1",

services/web/webpack.config.js

@@ -61,7 +61,7 @@ const mathjaxDir = getModuleDirectory('mathjax')
 const mathjax3Dir = getModuleDirectory('mathjax-3')
 const aceDir = getModuleDirectory('ace-builds')
 
-const pdfjsVersions = ['pdfjs-dist213', 'pdfjs-dist31']
+const pdfjsVersions = ['pdfjs-dist213', 'pdfjs-dist36']
 
 const vendorDir = path.join(__dirname, 'frontend/js/vendor')