From 50301be093339fa719638c9d4c80c45504c02320 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sat, 28 Feb 2026 18:43:51 +0200
Subject: [PATCH] client/pdf viewer: add a rudimentary support for a read-only
 view

---
 apps/client/src/services/content_renderer.ts          | 11 ++++++++---
 .../src/widgets/type_widgets/file/PdfViewer.tsx       |  1 +
 packages/pdfjs-viewer/src/custom.css                  |  8 ++++++++
 packages/pdfjs-viewer/src/custom.ts                   |  3 +++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/services/content_renderer.ts b/apps/client/src/services/content_renderer.ts
index c8d8ffecac..ddf0996358 100644
--- a/apps/client/src/services/content_renderer.ts
+++ b/apps/client/src/services/content_renderer.ts
@@ -16,6 +16,8 @@ import protectedSessionHolder from "./protected_session_holder.js";
 import renderService from "./render.js";
 import { applySingleBlockSyntaxHighlight } from "./syntax_highlight.js";
 import utils, { getErrorMessage } from "./utils.js";
+import PdfViewer from "../widgets/type_widgets/file/PdfViewer";
+import { h, render } from "preact";
 
 let idCounter = 1;
 
@@ -195,10 +197,13 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
     const $content = $('<div style="display: flex; flex-direction: column; height: 100%; justify-content: end;">');
 
     if (type === "pdf") {
-        const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
-        $pdfPreview.attr("src", openService.getUrlForDownload(`pdfjs/web/viewer.html?file=../../api/${entityType}/${entityId}/open`));
+        const url = `../../api/${entityType}/${entityId}/open`;
+        const $viewer = $("<div>");
+        render(h(PdfViewer, {pdfUrl: url, editable: false}), $viewer.get(0)!);
+
+        $content.append($viewer);
+
 
-        $content.append($pdfPreview);
     } else if (type === "audio") {
         const $audioPreview = $("<audio controls></audio>")
             .attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`))
diff --git a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx
index 8561b2c468..6415b89dd6 100644
--- a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx
@@ -36,6 +36,7 @@ export default function PdfViewer({ iframeRef: externalIframeRef, pdfUrl, onLoad
         <iframe
             ref={iframeRef}
             class="pdf-preview"
+            style={{width: "100%", height: "100%"}}
             src={`pdfjs/web/viewer.html?file=${pdfUrl}&lang=${locale}&sidebar=${newLayout ? "0" : "1"}&editable=${editable ? "1" : "0"}`}
             onLoad={() => {
                 injectStyles();
diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css
index 3bfca86f0f..22dd9322c1 100644
--- a/packages/pdfjs-viewer/src/custom.css
+++ b/packages/pdfjs-viewer/src/custom.css
@@ -20,6 +20,14 @@
     font-size: 16px;
 }
 
+body.read-only-document {
+    /* TODO: find a more elegant way to display a PDF in a read only view */
+    --toolbar-height: 0;
+    .toolbar {
+        display: none;
+    }
+}
+
 :root button,
 :root dialog,
 :root #toolbarContainer,
diff --git a/packages/pdfjs-viewer/src/custom.ts b/packages/pdfjs-viewer/src/custom.ts
index 49441b49cc..4cd1533455 100644
--- a/packages/pdfjs-viewer/src/custom.ts
+++ b/packages/pdfjs-viewer/src/custom.ts
@@ -7,6 +7,9 @@ import { setupPdfLayers } from "./layers";
 async function main() {
     const urlParams = new URLSearchParams(window.location.search);
     const isEditable = urlParams.get("editable") === "1";
+    
+    document.body.classList.toggle("read-only-document", !isEditable);
+    
     if (urlParams.get("sidebar") === "0") {
         hideSidebar();
     }