docblocks-react-ui 0.0.0-stage → 0.1.1

package/dist/pdf/index.d.mts

@@ -0,0 +1,5 @@
+import { f as PdfPreviewProps } from "../index-D6_ysSmQ.mjs";
+//#region src/pdf/PdfFirstPage.d.ts
+declare function PdfFirstPage({ id, url, name }: PdfPreviewProps): import("react").JSX.Element;
+//#endregion
+export { PdfFirstPage, type PdfPreviewProps };

package/dist/pdf/index.mjs

@@ -0,0 +1,164 @@
+import { a as isSafeDownloadHref, c as cn, n as TriangleAlert, t as isEmbeddablePdfUrl } from "../constants-D4FTL0ph.mjs";
+import { t as LoaderCircle } from "../LoaderCircle-AGVFE4IP.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GlobalWorkerOptions, RenderingCancelledException, getDocument } from "pdfjs-dist";
+//#region src/pdf/pdf-worker.ts
+/** The pdfjs-dist worker wiring (the side-effect): the worker file is
+* copied next to this entry at build time (dist/pdf/), so the relative
+* reference resolves in the consumer's browser with no bundler asset
+* handling (the dist is served as static ESM). The path is composed at
+* runtime so the bundler leaves the new URL untouched.
+*
+* The JBIG2 decoder (the wasm module + the no-wasm js fallback) is copied
+* next to the worker at build time and loaded by the worker from this
+* base url — pdfjs resolves `${wasmUrl}jbig2.wasm`, so the worker's
+* directory is the base. Derived from the worker URL object (not
+* import.meta.url) so a bundler's `new URL(_, import.meta.url)` asset
+* rewrite cannot mangle the directory form. Scanned PDFs encode their
+* text layers as JBIG2; without a resolvable wasmUrl the worker fails to
+* initialize those layers and the page renders as a bare background image
+* (the text is dropped). */
+const WORKER_URL = new URL(`./pdf.worker.min.mjs`, import.meta.url);
+GlobalWorkerOptions.workerSrc = WORKER_URL.toString();
+const WASM_URL = new URL("./", WORKER_URL).toString();
+//#endregion
+//#region src/pdf/PdfFirstPage.tsx
+/** The first-page preview of one `pdf`-subtype image block: fetch the
+* resolved blob, render page 1 to a canvas via pdfjs-dist. The previous
+* phase stands until the (re-)render settles (no flicker while the url
+* changes). A failure stands the error note over the native iframe
+* fallback (the document stays viewable). The in-flight fetch is aborted
+* on unmount / url change and the render task + document are released,
+* so a torn-down preview leaves no network request or pdf.js worker
+* behind. */
+function PdfFirstPage({ id, url, name }) {
+	const canvasRef = useRef(null);
+	const loadingTaskRef = useRef(null);
+	const renderTaskRef = useRef(null);
+	const [phase, setPhase] = useState("loading");
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		const controller = new AbortController();
+		let cancelled = false;
+		setPhase("loading");
+		setError(null);
+		const run = async () => {
+			try {
+				const response = await fetch(url, { signal: controller.signal });
+				if (cancelled) return;
+				if (!response.ok) throw new Error(`Failed to fetch the PDF (HTTP ${response.status}).`);
+				const data = new Uint8Array(await response.arrayBuffer());
+				if (cancelled) return;
+				const task = getDocument({
+					data,
+					wasmUrl: WASM_URL
+				});
+				loadingTaskRef.current = task;
+				const pdf = await task.promise;
+				if (cancelled) {
+					loadingTaskRef.current = null;
+					task.destroy().catch(() => void 0);
+					return;
+				}
+				const page = await pdf.getPage(1);
+				if (cancelled) {
+					loadingTaskRef.current = null;
+					task.destroy().catch(() => void 0);
+					return;
+				}
+				const canvas = canvasRef.current;
+				if (canvas === null) return;
+				const ratio = window.devicePixelRatio || 1;
+				const viewport = page.getViewport({ scale: ratio });
+				canvas.width = Math.max(1, Math.floor(viewport.width));
+				canvas.height = Math.max(1, Math.floor(viewport.height));
+				canvas.style.width = `${Math.max(1, Math.floor(viewport.width / ratio))}px`;
+				canvas.style.height = `${Math.max(1, Math.floor(viewport.height / ratio))}px`;
+				const renderTask = page.render({
+					canvas,
+					viewport
+				});
+				renderTaskRef.current = renderTask;
+				await renderTask.promise;
+				if (renderTaskRef.current === renderTask) renderTaskRef.current = null;
+				if (!cancelled) setPhase("ready");
+			} catch (cause) {
+				if (cancelled || cause instanceof RenderingCancelledException || cause instanceof DOMException && cause.name === "AbortError") return;
+				const message = cause instanceof Error ? cause.message : String(cause);
+				setError(message);
+				setPhase("error");
+			}
+		};
+		run();
+		return () => {
+			cancelled = true;
+			controller.abort();
+			const renderTask = renderTaskRef.current;
+			renderTaskRef.current = null;
+			if (renderTask !== null) renderTask.cancel();
+			const task = loadingTaskRef.current;
+			loadingTaskRef.current = null;
+			if (task !== null) task.destroy().catch(() => void 0);
+		};
+	}, [url]);
+	if (phase === "error") return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "docblocks/image-pdf-preview",
+		"data-block-id": id,
+		"data-block-type": "image",
+		"data-phase": "error",
+		className: "mx-0 my-(--docblocks-block-spacing)",
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "docblocks/image-pdf-error",
+			className: "\n            mb-2 flex items-center gap-2 rounded-(--docblocks-radius) border-(length:--docblocks-table-border-width)\n            border-(--docblocks-table-border-color) bg-(--muted) px-3 py-2 text-sm text-(--muted-foreground)\n          ",
+			children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-4 shrink-0" }), /* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: [
+					"PDF preview unavailable (",
+					error,
+					"). Showing the built-in viewer."
+				]
+			})]
+		}), isEmbeddablePdfUrl(url) ? /* @__PURE__ */ jsx("iframe", {
+			"data-slot": "docblocks/image-pdf",
+			"data-subtype": "pdf",
+			sandbox: "",
+			src: url,
+			title: name ?? "document",
+			className: "\n              block aspect-video w-full rounded-(--docblocks-image-radius)\n              border-(length:--docblocks-table-border-width) border-(--docblocks-table-border-color) outline-none\n            "
+		}) : isSafeDownloadHref(url) ? /* @__PURE__ */ jsx("a", {
+			"data-slot": "docblocks/image-pdf-download",
+			href: url,
+			download: name ?? void 0,
+			className: "inline-block text-sm underline underline-offset-2",
+			children: name ?? "document"
+		}) : /* @__PURE__ */ jsx("span", {
+			"data-slot": "docblocks/image-pdf-download",
+			className: "inline-block text-sm",
+			children: name ?? "document"
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "docblocks/image-pdf-preview",
+		"data-block-id": id,
+		"data-block-type": "image",
+		"data-phase": phase,
+		className: "relative mx-0 my-(--docblocks-block-spacing) flex justify-center",
+		children: [/* @__PURE__ */ jsx("canvas", {
+			ref: canvasRef,
+			"data-slot": "docblocks/image-pdf-canvas",
+			className: cn(`
+            block max-w-full rounded-(--docblocks-image-radius) border-(length:--docblocks-table-border-width)
+            border-(--docblocks-table-border-color) bg-(--background)
+          `, phase === "ready" ? "h-auto" : "hidden")
+		}), phase === "loading" && /* @__PURE__ */ jsxs("div", {
+			className: "flex h-48 w-full items-center justify-center gap-2 text-sm text-(--muted-foreground)",
+			children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin" }), /* @__PURE__ */ jsx("span", {
+				"data-slot": "docblocks/image-pdf-loading",
+				children: "loading preview…"
+			})]
+		})]
+	});
+}
+//#endregion
+export { PdfFirstPage };