feat(client/pdfjs): rewrite download button

apps/client/src/components/app_context.ts

@@ -382,7 +382,8 @@ export type CommandMappings = {
     reloadTextEditor: CommandData;
     chooseNoteType: CommandData & {
         callback: ChooseNoteTypeCallback
-    }
+    };
+    customDownload: CommandData;
 };
 
 type EventMappings = {

apps/client/src/services/open.ts

@@ -1,6 +1,8 @@
-import utils from "./utils.js";
+import Component from "../components/component.js";
+import FNote from "../entities/fnote.js";
 import options from "./options.js";
 import server from "./server.js";
+import utils from "./utils.js";
 
 type ExecFunction = (command: string, cb: (err: string, stdout: string, stderror: string) => void) => void;
 
@@ -36,9 +38,14 @@ function download(url: string) {
     }
 }
 
-export function downloadFileNote(noteId: string) {
-    const url = `${getFileUrl("notes", noteId)}?${Date.now()}`; // don't use cache
+export function downloadFileNote(note: FNote, parentComponent: Component | null, ntxId: string | null | undefined) {
+    if (note.type === "file" && note.mime === "application/pdf" && parentComponent) {
+        // Special handling, manages its own downloading process.
+        parentComponent.triggerEvent("customDownload", { ntxId });
+        return;
+    }
 
+    const url = `${getFileUrl("notes", note.noteId)}?${Date.now()}`; // don't use cache
     download(url);
 }
 
@@ -97,7 +104,7 @@ async function openCustom(type: string, entityId: string, mime: string) {
             // Note that the path separator must be \ instead of /
             filePath = filePath.replace(/\//g, "\\");
         }
-        const command = `rundll32.exe shell32.dll,OpenAs_RunDLL ` + filePath;
+        const command = `rundll32.exe shell32.dll,OpenAs_RunDLL ${  filePath}`;
         exec(command, (err, stdout, stderr) => {
             if (err) {
                 console.error("Open Note custom: ", err);
@@ -131,10 +138,10 @@ export function getUrlForDownload(url: string) {
     if (utils.isElectron()) {
         // electron needs absolute URL, so we extract current host, port, protocol
         return `${getHost()}/${url}`;
-    } else {
-        // web server can be deployed on subdomain, so we need to use a relative path
-        return url;
     }
+    // web server can be deployed on subdomain, so we need to use a relative path
+    return url;
+
 }
 
 function canOpenInBrowser(mime: string) {

apps/client/src/widgets/ribbon/FilePropertiesTab.tsx

@@ -1,3 +1,5 @@
+import { useContext } from "preact/hooks";
+
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { downloadFileNote, openNoteExternally } from "../../services/open";
@@ -8,11 +10,14 @@ import { formatSize } from "../../services/utils";
 import Button from "../react/Button";
 import { FormFileUploadButton } from "../react/FormFileUpload";
 import { useNoteBlob, useNoteLabel } from "../react/hooks";
+import { ParentComponent } from "../react/react_utils";
+import { TabContext } from "./ribbon-interface";
 
-export default function FilePropertiesTab({ note }: { note?: FNote | null }) {
+export default function FilePropertiesTab({ note, ntxId }: TabContext) {
     const [ originalFileName ] = useNoteLabel(note, "originalFileName");
     const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable();
     const blob = useNoteBlob(note);
+    const parentComponent = useContext(ParentComponent);
 
     return (
         <div className="file-properties-widget">
@@ -40,7 +45,7 @@ export default function FilePropertiesTab({ note }: { note?: FNote | null }) {
                                         text={t("file_properties.download")}
                                         primary
                                         disabled={!canAccessProtectedNote}
-                                        onClick={() => downloadFileNote(note.noteId)}
+                                        onClick={() => downloadFileNote(note, parentComponent, ntxId)}
                                     />
 
                                     <Button

apps/client/src/widgets/ribbon/ImagePropertiesTab.tsx

@@ -44,7 +44,7 @@ export default function ImagePropertiesTab({ note, ntxId }: TabContext) {
                             text={t("image_properties.download")}
                             icon="bx bx-download"
                             primary
-                            onClick={() => downloadFileNote(note.noteId)}
+                            onClick={() => downloadFileNote(note, parentComponent, ntxId)}
                         />
 
                         <Button

apps/client/src/widgets/ribbon/NoteActionsCustom.tsx

@@ -135,13 +135,13 @@ function OpenExternallyButton({ note, noteMime }: NoteActionsCustomInnerProps) {
     );
 }
 
-function DownloadFileButton({ note }: NoteActionsCustomInnerProps) {
+function DownloadFileButton({ note, parentComponent, ntxId }: NoteActionsCustomInnerProps) {
     return (
         <ActionButton
             icon="bx bx-download"
             text={t("file_properties.download")}
             disabled={!note.isContentAvailable()}
-            onClick={() => downloadFileNote(note.noteId)}
+            onClick={() => downloadFileNote(note, parentComponent, ntxId)}
         />
     );
 }

apps/client/src/widgets/type_widgets/file/Pdf.tsx

@@ -7,7 +7,7 @@ import FBlob from "../../../entities/fblob";
 import FNote from "../../../entities/fnote";
 import server from "../../../services/server";
 import { useViewModeConfig } from "../../collections/NoteList";
-import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
+import { useTriliumEvent, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 
 const VARIABLE_WHITELIST = new Set([
     "root-background",
@@ -170,6 +170,13 @@ export default function PdfPreview({ note, blob, componentId, noteContext }: {
         }
     }, [ iframeRef.current?.contentWindow, noteContext ]);
 
+    useTriliumEvent("customDownload", ({ ntxId }) => {
+        if (ntxId !== noteContext.ntxId) return;
+        iframeRef.current?.contentWindow?.postMessage({
+            type: "trilium-request-download"
+        });
+    });
+
     return (historyConfig &&
         <iframe
             tabIndex={300}

packages/pdfjs-viewer/src/custom.ts

@@ -20,6 +20,7 @@ async function main() {
 
     app.eventBus.on("documentloaded", () => {
         manageSave();
+        manageDownload();
         extractAndSendToc();
         setupScrollToHeading();
         setupActiveHeadingTracking();
@@ -85,4 +86,15 @@ function manageSave() {
     });
 }
 
+function manageDownload() {
+    window.addEventListener("message", event => {
+        if (event.origin !== window.location.origin) return;
+
+        if (event.data?.type === "trilium-request-download") {
+            const app = window.PDFViewerApplication;
+            app.eventBus.dispatch("download", { source: window });
+        }
+    });
+}
+
 main();