feat(frontend): replace iframe with PDF.js viewer (#39)
- Install pdfjs-dist v5 and add optimizeDeps pre-bundle config - New PdfViewer.svelte component: renders each page on a <canvas> with correct device-pixel-ratio scaling, overlays a text layer (enables text selection; foundation for annotations in #40), prev/next navigation, zoom controls, and lazy page rendering (only current ±1 pre-fetched — avoids freezing on multi-page documents) - Replace the <iframe> in documents/[id]/+page.svelte with PdfViewer; image attachments continue to use <img>; detection now uses doc.contentType instead of filename extension - Unit tests for navigation controls and page counter (pdfjs mocked) - E2E tests: PDF renders as canvas (not iframe), nav controls visible, image fallback stays as <img>; minimal.pdf fixture for upload tests Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@ import { m } from '$lib/paraglide/messages.js';
|
||||
import { formatDate } from '$lib/utils/date';
|
||||
import { diffWords } from 'diff';
|
||||
import ExpandableText from '$lib/components/ExpandableText.svelte';
|
||||
import PdfViewer from '$lib/components/PdfViewer.svelte';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
@@ -873,16 +874,12 @@ function versionLabel(v: VersionSummary, index: number): string {
|
||||
</div>
|
||||
<p class="font-sans text-sm tracking-wide uppercase">{m.doc_no_scan()}</p>
|
||||
</div>
|
||||
{:else if fileUrl && doc.originalFilename.toLowerCase().endsWith('.pdf')}
|
||||
<iframe
|
||||
src="{fileUrl}#zoom=page-width"
|
||||
title={m.doc_preview_iframe_title()}
|
||||
class="h-full w-full border-none bg-white"
|
||||
></iframe>
|
||||
{:else if fileUrl && doc.contentType?.startsWith('application/pdf')}
|
||||
<PdfViewer url={fileUrl} />
|
||||
{:else if fileUrl}
|
||||
<div class="flex h-full w-full items-center justify-center overflow-auto p-8">
|
||||
<img
|
||||
src="{fileUrl}#zoom=page-width"
|
||||
src={fileUrl}
|
||||
alt={m.doc_image_alt()}
|
||||
class="max-h-full max-w-full object-contain shadow-2xl"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user