Merge pull request #48 from alekswebnet/3.2.0

3.2.0

Author: alekswebnet

README.md

@@ -1,10 +1,6 @@
 # pdfjs-viewer-element
 
-Custom element that embeds [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html) using the `iframe`.
-
-The package provides a custom element, based on PDF.js [viewer options](https://github.com/mozilla/pdf.js/wiki/Viewer-options) and [URL parameters](https://github.com/mozilla/pdf.js/wiki/Debugging-PDF.js#url-parameters) API. 
-
-Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and works with most [JS frameworks](https://custom-elements-everywhere.com/).
+Standalone, isolated, drop-in [PDF.js default viewer](https://mozilla.github.io/pdf.js/web/viewer.html).
 
 [![npm version](https://img.shields.io/npm/v/pdfjs-viewer-element?logo=npm&logoColor=fff)](https://www.npmjs.com/package/pdfjs-viewer-element)
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/alekswebnet/pdfjs-viewer-element)
@@ -17,11 +13,12 @@ Supported in all [major browsers](https://caniuse.com/custom-elementsv1), and wo
 - Standalone isolated web component with no runtime dependencies
 - Drop-in, iframe-based PDF.js default viewer for any web app
 - Works with same-origin and cross-origin PDF documents
-- Configure via attributes and URL parameters (page, zoom, search, pagemode, locale)
+- Configure via attributes (page, zoom, search, pagemode, locale)
 - Programmatic access to `PDFViewerApplication` via the `initPromise` public property
-- Theme control (automatic/light/dark) plus custom CSS injection
+- Built-in Paper & Ink default theme, with theme control (automatic/light/dark) and custom CSS injection
+- Resource path attributes for PDF.js internals (`worker-src`, `c-map-url`, `icc-url`, `standard-font-data-url`, `wasm-url`, and more)
 - Locale override support using PDF.js viewer locales
-- Supports all modern browsers and most JS frameworks
+- Supports all [major browsers](https://caniuse.com/custom-elementsv1) and most [JS frameworks](https://custom-elements-everywhere.com/).
 
 ## Docs
 
@@ -89,6 +86,13 @@ The element is block-level and needs an explicit height.
 | `locale-src-template` | Locale file URL template. Must contain `{locale}` placeholder. Used together with `locale`. | `https://cdn.jsdelivr.net/gh/mozilla-l10n/firefox-l10n@main/{locale}/toolkit/toolkit/pdfviewer/viewer.ftl` |
 | `viewer-css-theme` | Viewer theme: `AUTOMATIC`, `LIGHT`, `DARK`. | `AUTOMATIC` |
 | `worker-src` | PDF.js worker URL override. | `<package-url>/pdf.worker.min.mjs` |
+| `debugger-src` | PDF.js debugger script URL (`debuggerSrc` option). | `./debugger.mjs` |
+| `c-map-url` | CMap directory URL (`cMapUrl` option). | `../web/cmaps/` |
+| `icc-url` | ICC profile directory URL (`iccUrl` option). | `../web/iccs/` |
+| `image-resources-path` | Image resources directory (`imageResourcesPath` option). | `./images/` |
+| `sandbox-bundle-src` | Sandbox bundle URL (`sandboxBundleSrc` option). | `../build/pdf.sandbox.mjs` |
+| `standard-font-data-url` | Standard fonts directory (`standardFontDataUrl` option). | `../web/standard_fonts/` |
+| `wasm-url` | WASM assets directory (`wasmUrl` option). | `../web/wasm/` |
 
 Play with attributes on [API docs page](https://alekswebnet.github.io/pdfjs-viewer-element/#api).
 
@@ -99,7 +103,7 @@ Most attributes can be updated dynamically:
 - `src` updates by calling PDF.js `open({ url })` without rebuilding the viewer.
 - `page`, `search`, `phrase`, `zoom`, `pagemode` update via hash parameters.
 - `viewer-css-theme` updates the viewer theme at runtime.
-- `worker-src` updates viewer options for subsequent document loads.
+- `worker-src`, `debugger-src`, `c-map-url`, `icc-url`, `image-resources-path`, `sandbox-bundle-src`, `standard-font-data-url`, `wasm-url` update viewer options for subsequent document loads.
 - `locale` rebuilds the viewer so localization resources can be applied.
 
 ## Worker source
@@ -139,6 +143,8 @@ Example:
 
 ## Viewer CSS theme
 
+The component includes and applies a default Paper & Ink theme from `src/themes/paper-and-ink.css`.
+
 Use `viewer-css-theme` attribute to set light or dark theme manually:
 
 ```html
@@ -157,6 +163,24 @@ viewerElement.setAttribute('viewer-css-theme', 'LIGHT')
 viewerElement.setAttribute('viewer-css-theme', 'AUTOMATIC')
 ```
 
+## PDF.js resource attributes
+
+You can override additional PDF.js viewer resource paths when needed:
+
+```html
+<pdfjs-viewer-element
+  src="/file.pdf"
+  worker-src="/pdf.worker.min.mjs"
+  debugger-src="/debugger.mjs"
+  c-map-url="/cmaps/"
+  icc-url="/iccs/"
+  image-resources-path="/images/"
+  sandbox-bundle-src="/pdf.sandbox.mjs"
+  standard-font-data-url="/standard_fonts/"
+  wasm-url="/wasm/">
+</pdfjs-viewer-element>
+```
+
 ## Viewer custom styles
 
 You can add your own CSS rules to the viewer application using `injectViewerStyles(styles: string)`:

image.webp

@@ -1,6 +1,6 @@
 {
   "name": "pdfjs-viewer-element",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "license": "MIT",
   "author": {
     "name": "Oleksandr Shevchuk",

package.json

@@ -13,6 +13,13 @@ const DEFAULTS = {
   locale: '',
   viewerCssTheme: 'AUTOMATIC',
   workerSrc: DEFAULT_WORKER_SRC,
+  debuggerSrc: './debugger.mjs',
+  cMapUrl: '../web/cmaps/',
+  iccUrl: '../web/iccs/',
+  imageResourcesPath: './images/',
+  sandboxBundleSrc: '../build/pdf.sandbox.mjs',
+  standardFontDataUrl: '../web/standard_fonts/',
+  wasmUrl: '../web/wasm/',
   localeSrcTemplate: 'https://cdn.jsdelivr.net/gh/mozilla-l10n/firefox-l10n@main/{locale}/toolkit/toolkit/pdfviewer/viewer.ftl'
 } as const
 
@@ -36,7 +43,9 @@ export class PdfjsViewerElement extends HTMLElement {
 
   static get observedAttributes() {
     return[
-      'src', 'locale', 'viewer-css-theme', 'worker-src', 
+      'src', 'locale', 'viewer-css-theme', 'worker-src',
+      'debugger-src', 'c-map-url', 'icc-url', 'image-resources-path',
+      'sandbox-bundle-src', 'standard-font-data-url', 'wasm-url',
       'page', 'search', 'phrase', 'zoom', 'pagemode', 'iframe-title'
     ]
   }
@@ -182,6 +191,13 @@ export class PdfjsViewerElement extends HTMLElement {
   private applyViewerOptions = () => {
     const viewerOptions = this.iframe.contentWindow?.PDFViewerApplicationOptions
     viewerOptions?.set('workerSrc', this.getAttribute('worker-src') || DEFAULTS.workerSrc)
+    viewerOptions?.set('debuggerSrc', this.getAttribute('debugger-src') || DEFAULTS.debuggerSrc)
+    viewerOptions?.set('cMapUrl', this.getAttribute('c-map-url') || DEFAULTS.cMapUrl)
+    viewerOptions?.set('iccUrl', this.getAttribute('icc-url') || DEFAULTS.iccUrl)
+    viewerOptions?.set('imageResourcesPath', this.getAttribute('image-resources-path') || DEFAULTS.imageResourcesPath)
+    viewerOptions?.set('sandboxBundleSrc', this.getAttribute('sandbox-bundle-src') || DEFAULTS.sandboxBundleSrc)
+    viewerOptions?.set('standardFontDataUrl', this.getAttribute('standard-font-data-url') || DEFAULTS.standardFontDataUrl)
+    viewerOptions?.set('wasmUrl', this.getAttribute('wasm-url') || DEFAULTS.wasmUrl)
     viewerOptions?.set('defaultUrl', this.getFullPath(this.getAttribute('src') || DEFAULTS.src))
     viewerOptions?.set('disablePreferences', true)
     viewerOptions?.set('eventBusDispatchToDOM', true)
@@ -203,13 +219,15 @@ export class PdfjsViewerElement extends HTMLElement {
 
   private buildViewerEntry = async () => {
     return new Promise<void>(async (resolve) => {
-      const [viewerEntry, viewerCss] = await Promise.all([
+      const [viewerEntry, viewerCss, paperAndInkTheme] = await Promise.all([
         import('./web/viewer.html?raw'),
         import('./web/viewer.css?inline'),
+        import('./themes/paper-and-ink.css?inline')
       ])
       const completeHtml = viewerEntry.default
         .replace('</head>', `
           <style>${viewerCss.default}</style>
+          <style>${paperAndInkTheme.default}</style>
           ${Array.from(this.viewerStyles).map(style => `<style>${style}</style>`).join('\n')}
         </head>`)
       this.iframe.addEventListener('load', () => resolve(), { once: true })
@@ -263,6 +281,25 @@ export class PdfjsViewerElement extends HTMLElement {
   async attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
     if (oldValue === newValue) return
     if (!this.iframe) return
+
+    const optionByAttribute = {
+      'worker-src': { key: 'workerSrc', fallback: DEFAULTS.workerSrc },
+      'debugger-src': { key: 'debuggerSrc', fallback: DEFAULTS.debuggerSrc },
+      'c-map-url': { key: 'cMapUrl', fallback: DEFAULTS.cMapUrl },
+      'icc-url': { key: 'iccUrl', fallback: DEFAULTS.iccUrl },
+      'image-resources-path': { key: 'imageResourcesPath', fallback: DEFAULTS.imageResourcesPath },
+      'sandbox-bundle-src': { key: 'sandboxBundleSrc', fallback: DEFAULTS.sandboxBundleSrc },
+      'standard-font-data-url': { key: 'standardFontDataUrl', fallback: DEFAULTS.standardFontDataUrl },
+      'wasm-url': { key: 'wasmUrl', fallback: DEFAULTS.wasmUrl }
+    } as const
+
+    if (name in optionByAttribute) {
+      const viewerOptions = this.iframe.contentWindow?.PDFViewerApplicationOptions
+      const { key, fallback } = optionByAttribute[name as keyof typeof optionByAttribute]
+      viewerOptions?.set(key, newValue || fallback)
+      return
+    }
+
     switch (name) {
       case 'src': {
         const viewerApp = this.iframe.contentWindow?.PDFViewerApplication
@@ -286,11 +323,6 @@ export class PdfjsViewerElement extends HTMLElement {
       case 'viewer-css-theme':
         this.applyViewerTheme()
         return
-      case 'worker-src': {
-        const viewerOptions = this.iframe.contentWindow?.PDFViewerApplicationOptions
-        viewerOptions?.set('workerSrc', newValue || DEFAULTS.workerSrc)
-        return
-      }
       default:
         await this.applyIframeHash()
     }