feat(client/pdf): store and restore page position

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

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef } from "preact/hooks";
 
 import FNote from "../../../entities/fnote";
 import server from "../../../services/server";
+import { useViewModeConfig } from "../../collections/NoteList";
 
 const VARIABLE_WHITELIST = new Set([
     "root-background",
@@ -14,6 +15,7 @@ const VARIABLE_WHITELIST = new Set([
 export default function PdfPreview({ note }: { note: FNote }) {
     const iframeRef = useRef<HTMLIFrameElement>(null);
     const { onLoad } = useStyleInjection(iframeRef);
+    const historyConfig = useViewModeConfig(note, "pdfHistory");
 
     useEffect(() => {
         function handleMessage(event: MessageEvent) {
@@ -21,20 +23,29 @@ export default function PdfPreview({ note }: { note: FNote }) {
                 const blob = new Blob([event.data.data], { type: note.mime });
                 server.upload(`notes/${note.noteId}/file`, new File([blob], note.title, { type: note.mime }));
             }
+
+            if (event.data.type === "pdfjs-viewer-save-view-history" && event.data?.data) {
+                historyConfig?.storeFn(JSON.parse(event.data.data));
+            }
         }
 
         window.addEventListener("message", handleMessage);
         return () => {
             window.removeEventListener("message", handleMessage);
         };
-    }, [ note ]);
+    }, [ note, historyConfig ]);
 
-    return (
+    return (historyConfig &&
         <iframe
             ref={iframeRef}
             class="pdf-preview"
             src={`pdfjs/web/viewer.html?file=../../api/notes/${note.noteId}/open`}
-            onLoad={onLoad}
+            onLoad={() => {
+                if (iframeRef.current?.contentWindow) {
+                    iframeRef.current.contentWindow.TRILIUM_VIEW_HISTORY_STORE = historyConfig.config;
+                }
+                onLoad();
+            }}
         />
     );
 }

packages/pdfjs-viewer/src/custom.ts

@@ -1,3 +1,5 @@
+import interceptViewHistory from "./history";
+
 const LOG_EVENT_BUS = false;
 
 async function main() {
@@ -7,11 +9,12 @@ async function main() {
     }
 
     const app = window.PDFViewerApplication;
+    interceptViewHistory();
+
     if (LOG_EVENT_BUS) {
         patchEventBus();
     }
     app.eventBus.on("documentloaded", () => {
-        interceptViewHistory();
         manageSave();
     });
     await app.initializedPromise;
@@ -51,22 +54,6 @@ function manageSave() {
     });
 }
 
-function interceptViewHistory() {
-    const app = window.PDFViewerApplication;
-    let activeFingerprint: string = app.pdfDocument.fingerprints[0];
-
-    const store = app.store;
-    store._writeToStorage = async function() {
-        const fileEntry = store.database.files?.find(f => f.fingerprint === activeFingerprint);
-        const databaseStr = JSON.stringify(fileEntry);
-        console.log("Write attempt.", databaseStr);
-    }
-    store._readFromStorage = async function() {
-        console.log("Read attempt", activeFingerprint);
-        return "{}";
-    }
-}
-
 function patchEventBus() {
     const eventBus = window.PDFViewerApplication.eventBus;
     const originalDispatch = eventBus.dispatch.bind(eventBus);

packages/pdfjs-viewer/src/history.ts

@@ -0,0 +1,24 @@
+export default function interceptViewHistory() {
+    const originalSetItem = Storage.prototype.setItem;
+    Storage.prototype.setItem = function (key: string, value: string) {
+        if (key === "pdfjs.history") {
+            console.log(`Intercepted setting view history: ${key} = ${value}`);
+            window.parent.postMessage({
+                type: "pdfjs-viewer-save-view-history",
+                data: value
+            }, "*");
+            return;
+        }
+
+        return originalSetItem.call(this, key, value);
+    }
+
+    const originalGetItem = Storage.prototype.getItem;
+    Storage.prototype.getItem = function (key: string) {
+        if (key === "pdfjs.history") {
+            return JSON.stringify(window.TRILIUM_VIEW_HISTORY_STORE || {});
+        }
+
+        return originalGetItem.call(this, key);
+    }
+}