react-web-pdf-editor 0.1.3 → 0.1.5

package/README.md

@@ -2,6 +2,8 @@
 
 View and edit PDFs in the browser with React. Open a file, annotate it, change the page order, and export a new PDF. Rendering uses [PDF.js](https://mozilla.github.io/pdf.js/). Export uses [pdf-lib](https://pdf-lib.js.org/).
 
+[Live demos](https://react-web-pdf-editor-demo.vercel.app/) open the same sample PDF three ways: a direct client import, a browser-only dynamic import, and a toolbar you render yourself.
+
 The editor includes:
 
 - Continuous page viewing, zoom, and in-document search
@@ -13,6 +15,18 @@ The editor includes:
 
 Annotations stay in memory until you export. Changing the `file` prop starts a fresh document and clears them.
 
+## Demos
+
+The [examples site](https://react-web-pdf-editor-demo.vercel.app/) loads `/file/compressed.tracemonkey-pldi-09.pdf` on every route. Replace that URL with your own PDF when you copy the code.
+
+| Example | Live page | What it shows |
+| --- | --- | --- |
+| Quick start | [/quick-start](https://react-web-pdf-editor-demo.vercel.app/quick-start) | A client component imports `PdfEditor`, loads the stylesheet, and opens a PDF with a document name and a full-viewport height (`file`, `name`, and `style`). |
+| Basic demo | [/basic-demo](https://react-web-pdf-editor-demo.vercel.app/basic-demo) | `next/dynamic` loads `PdfEditor` with `ssr: false`, so canvas, `window`, and the PDF.js worker run in the browser. Safe to render from an App Router page. |
+| Custom toolbar | [/custom](https://react-web-pdf-editor-demo.vercel.app/custom) | A `toolbar` render prop. The bar renames the document, switches tools, and exports through `ToolbarApi`. |
+
+The custom toolbar covers select, draw, highlight, text, image, and signature, plus undo, redo, zoom, pages, search, and export. The [quick start](#quick-start), [Next.js](#nextjs), and [custom toolbar](#custom-toolbar) sections below are those same patterns.
+
 ## Install
 
 ```bash
@@ -30,6 +44,8 @@ import "react-web-pdf-editor/styles.css";
 
 ## Quick start
 
+This is the [quick start demo](https://react-web-pdf-editor-demo.vercel.app/quick-start): a client component that imports `PdfEditor` directly.
+
 ```tsx
 import { PdfEditor } from "react-web-pdf-editor";
 import "react-web-pdf-editor/styles.css";
@@ -240,7 +256,7 @@ onExport={(blob) => {
 
 ## Custom toolbar
 
-`toolbar` receives a `ToolbarApi`. `showToolbar={false}` removes the bar entirely.
+`toolbar` receives a `ToolbarApi`. `showToolbar={false}` removes the bar entirely. The [custom toolbar demo](https://react-web-pdf-editor-demo.vercel.app/custom) is a full bar on this API: select, draw, highlight, text, image, and signature, plus undo, redo, zoom, pages, search, and export.
 
 ```tsx
 import { PdfEditor, Toolbar } from "react-web-pdf-editor";
@@ -357,13 +373,13 @@ Keep the default thumbnails by rendering `PagesSidebar`:
 
 ## Workers
 
-PDF.js renders pages on a worker. The default worker URL is a version-matched file on unpkg:
+PDF.js renders pages on a worker. The default is the legacy build, because that worker runs in its own thread and does not see polyfills on the page. The URL is a version-matched file on unpkg:
 
 ```text
-https://unpkg.com/pdfjs-dist@<version>/build/pdf.worker.min.mjs
+https://unpkg.com/pdfjs-dist@<version>/legacy/build/pdf.worker.min.mjs
 ```
 
-Self-host that file and pass `workerSrc` when the CDN is blocked or you want the worker on your own origin. Copy it from `node_modules/pdfjs-dist/build/pdf.worker.min.mjs`.
+Self-host that file and pass `workerSrc` when the CDN is blocked or you want the worker on your own origin. Copy it from `node_modules/pdfjs-dist/legacy/build/pdf.worker.min.mjs`. A custom `workerSrc` has to be that legacy worker.
 
 ```tsx
 <PdfEditor file={file} workerSrc="/pdf.worker.min.mjs" />
@@ -381,7 +397,7 @@ Export uses a second worker shipped with this package. Vite, Webpack, and other
 
 ## Next.js
 
-Load the editor in the browser. The package talks to workers, canvas, and `window` during render.
+Load the editor in the browser. The package talks to workers, canvas, and `window` during render. This is the [basic demo](https://react-web-pdf-editor-demo.vercel.app/basic-demo). A direct import from a client component, without `next/dynamic`, is the [quick start demo](https://react-web-pdf-editor-demo.vercel.app/quick-start).
 
 ```tsx
 "use client";

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var pdfLib = require('pdf-lib');
-var pdfjsDist = require('pdfjs-dist');
+var pdf_mjs = require('pdfjs-dist/legacy/build/pdf.mjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -620,9 +620,9 @@ var init_exportPdf = __esm({
     HIGHLIGHT_OPACITY = 0.38;
   }
 });
-var DEFAULT_WORKER_SRC = `https://unpkg.com/pdfjs-dist@${pdfjsDist.version}/build/pdf.worker.min.mjs`;
+var DEFAULT_WORKER_SRC = `https://unpkg.com/pdfjs-dist@${pdf_mjs.version}/legacy/build/pdf.worker.min.mjs`;
 function configurePdfWorker(workerSrc) {
-  pdfjsDist.GlobalWorkerOptions.workerSrc = workerSrc ?? DEFAULT_WORKER_SRC;
+  pdf_mjs.GlobalWorkerOptions.workerSrc = workerSrc ?? DEFAULT_WORKER_SRC;
 }
 var SWATCHES = ["#facc15", "#4ade80", "#38bdf8", "#f472b6", "#fb923c"];
 function sameColor(a, b) {
@@ -3357,10 +3357,10 @@ function PdfPage({
       canvas.style.height = `${cssHeight}px`;
       context.drawImage(offscreen, 0, 0);
       textLayerDiv.replaceChildren();
-      pdfjsDist.setLayerDimensions(textLayerDiv, viewport);
+      pdf_mjs.setLayerDimensions(textLayerDiv, viewport);
       textLayerDiv.style.setProperty("--scale-factor", String(viewport.scale));
       textLayerDiv.style.setProperty("--total-scale-factor", String(viewport.scale));
-      textLayer = new pdfjsDist.TextLayer({
+      textLayer = new pdf_mjs.TextLayer({
         textContentSource: page.streamTextContent(),
         container: textLayerDiv,
         viewport
@@ -7181,7 +7181,7 @@ function usePdfDocument(file, workerSrc) {
           setLoadPhase("loading");
           setDownloadProgress(null);
         }
-        loadingTask = pdfjsDist.getDocument(source);
+        loadingTask = pdf_mjs.getDocument(source);
         const incoming = await loadingTask.promise;
         if (cancelled) {
           await incoming.destroy();