fix: render PDFs with pdf.js instead of a native iframe

common/config/rush/common-versions.json

@@ -58,5 +58,9 @@
     // "typescript": [
     //   "~2.4.0"
     // ]
+
+    // rekoni vendors an older pdfjs-dist server-side for PDF text extraction,
+    // while packages/ui uses a modern build for browser canvas rendering.
+    "pdfjs-dist": ["2.12.313", "4.10.38"]
   }
 }

desktop/webpack.config.js

@@ -21,6 +21,13 @@ const { EsbuildPlugin } = require('esbuild-loader')
 
 const doValidate = !prod || process.env.DO_VALIDATE === 'true'
 
+// pdfjs-dist is a dependency of @hcengineering/ui, not of this package directly.
+// Resolve it from there so the worker entry and the copied cmaps/standard_fonts
+// assets stay in sync with whatever version @hcengineering/ui declares.
+const pdfjsDistDir = path.dirname(
+  require.resolve('pdfjs-dist/package.json', { paths: [path.join(__dirname, '../packages/ui')] })
+)
+
 /**
  * @type {Configuration}
  */
@@ -127,6 +134,11 @@ module.exports = [
     entry: {
       bundle: ['@hcengineering/theme/styles/global.scss', ...['./src/ui/index.ts']],
       'recorder-worker': '@hcengineering/recorder-resources/src/recorder-worker.ts',
+      // Flat, fixed-path fallback for the pdf.js worker (see createPdfWorker() in
+      // @hcengineering/ui's pdf-embed-utils.ts) — used when the primary
+      // `new Worker(new URL('pdfjs-dist/...', import.meta.url))` construction
+      // throws, mirroring the 'recorder-worker' entry above.
+      'pdfjs-worker': path.join(pdfjsDistDir, 'build', 'pdf.worker.min.mjs'),
       findInPageOverlay: './src/ui/findInPageOverlay.ts'
     },
     ignoreWarnings: [
@@ -321,7 +333,13 @@ module.exports = [
     mode,
     plugins: [
       new CopyPlugin({
-        patterns: [{ from: 'public', to: 'public' }]
+        patterns: [
+          { from: 'public', to: 'public' },
+          // pdf.js needs these served alongside the app to render CJK/subset
+          // text and the 14 standard PDF fonts without embedded glyph data.
+          { from: path.join(pdfjsDistDir, 'cmaps'), to: 'cmaps' },
+          { from: path.join(pdfjsDistDir, 'standard_fonts'), to: 'standard_fonts' }
+        ]
       }),
       new HtmlWebpackPlugin({
         template: './src/ui/index.ejs',

dev/prod/package.json

@@ -28,6 +28,7 @@
     "autoprefixer": "^10.4.14",
     "browserslist": "^4.28.2",
     "compression-webpack-plugin": "^10.0.0",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-env": "~7.0.3",
     "css-loader": "^5.2.1",
     "dotenv-webpack": "^8.0.1",
@@ -297,4 +298,4 @@
     "readable-stream": "^4.7.0",
     "svelte": "^4.2.20"
   }
-}
+}

dev/prod/webpack.config.js

@@ -21,8 +21,16 @@ const path = require('path')
 const CompressionPlugin = require('compression-webpack-plugin')
 const DefinePlugin = require('webpack').DefinePlugin
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
 const { Configuration } = require('webpack')
 
+// pdfjs-dist is a dependency of @hcengineering/ui, not of this package directly.
+// Resolve it from there so the copied cmaps/standard_fonts assets stay in sync
+// with whatever version @hcengineering/ui declares.
+const pdfjsDistDir = path.dirname(
+  require.resolve('pdfjs-dist/package.json', { paths: [path.join(__dirname, '../../packages/ui')] })
+)
+
 const mode = process.env.NODE_ENV || 'development'
 const prod = mode === 'production'
 const clientType = process.env.CLIENT_TYPE ?? ''
@@ -438,6 +446,14 @@ module.exports = [
           viewport: 'width=device-width, initial-scale=1.0'
         }
       }),
+      new CopyPlugin({
+        patterns: [
+          // pdf.js needs these served alongside the app to render CJK/subset
+          // text and the 14 standard PDF fonts without embedded glyph data.
+          { from: path.join(pdfjsDistDir, 'cmaps'), to: 'cmaps' },
+          { from: path.join(pdfjsDistDir, 'standard_fonts'), to: 'standard_fonts' }
+        ]
+      }),
       ...(prod ? [new CompressionPlugin()] : []),
       // new MiniCssExtractPlugin({
       //   filename: '[name].[id][contenthash].css'

packages/presentation/src/components/PDFViewer.svelte

@@ -15,6 +15,7 @@
 <script lang="ts">
   // import { Doc } from '@hcengineering/core'
   import type { Blob, Ref } from '@hcengineering/core'
+  import { getMetadata } from '@hcengineering/platform'
   import { Button, Dialog, EmbeddedPDF, Label, Spinner } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import presentation, { getFileUrl } from '..'
@@ -29,7 +30,6 @@
   export let showIcon = true
   export let fullSize = false
   export let isLoading = false
-  export let css: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -47,6 +47,8 @@
 
   $: src = file !== undefined ? getFileUrl(file, name) : undefined
 
+  $: token = getMetadata(presentation.metadata.Token)
+
   $: isImage = contentType !== undefined && contentType.startsWith('image/')
 </script>
 
@@ -97,7 +99,7 @@
         <img class="img-fit" {src} alt="" />
       </div>
     {:else}
-      <EmbeddedPDF {src} {name} {css} fit />
+      <EmbeddedPDF {src} {name} {token} fit />
     {/if}
   {:else}
     <div class="centered">

packages/ui/lang/en.json

@@ -111,6 +111,8 @@
         "ThisYear": "This year",
         "EmojiStyle": "Emoji Style",
         "EmojiSystem": "System Default",
-        "EmojiNoto": "Noto Color"
+        "EmojiNoto": "Noto Color",
+        "Download": "Download",
+        "FailedToLoadPdf": "Failed to load the document"
     }
 }

packages/ui/package.json

@@ -52,7 +52,8 @@
     "fast-equals": "^5.2.2",
     "svelte": "^4.2.20",
     "plyr": "3.7.8",
-    "blurhash": "^2.0.5"
+    "blurhash": "^2.0.5",
+    "pdfjs-dist": "4.10.38"
   },
   "repository": {
     "type": "git",