feat(client/pdf): save annotations by uploading new revision

apps/client/src/widgets/type_widgets/File.tsx

@@ -1,15 +1,18 @@
 import "./File.css";
 
+import { useEffect } from "preact/hooks";
+
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { getUrlForDownload } from "../../services/open";
+import server from "../../services/server";
 import Alert from "../react/Alert";
 import { useNoteBlob } from "../react/hooks";
 import { TypeWidgetProps } from "./type_widget";
 
 const TEXT_MAX_NUM_CHARS = 5000;
 
-export default function File({ note }: TypeWidgetProps) {
+export default function FileTypeWidget({ note }: TypeWidgetProps) {
     const blob = useNoteBlob(note);
 
     if (blob?.content) {
@@ -42,6 +45,20 @@ function TextPreview({ content }: { content: string }) {
 }
 
 function PdfPreview({ note }: { note: FNote }) {
+    useEffect(() => {
+        function handleMessage(event: MessageEvent) {
+            if (event.data?.type === "pdfjs-viewer-document-modified" && event.data?.data) {
+                const blob = new Blob([event.data.data], { type: note.mime });
+                server.upload(`notes/${note.noteId}/file`, new File([blob], note.title, { type: note.mime }));
+            }
+        }
+
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, [ note ]);
+
     return (
         <iframe
             class="pdf-preview"

packages/pdfjs-viewer/src/custom.mjs

@@ -1,21 +1,26 @@
-document.addEventListener("webviewerloaded", async () => {
+async function main() {
+    // Wait for the PDF viewer application to be available.
+    while (!window.PDFViewerApplication) {
+        await new Promise(r => setTimeout(r, 50));
+    }
+
     const app = PDFViewerApplication;
     await app.initializedPromise;
     
     app.eventBus.on("documentloaded", () => {
         const storage = app.pdfDocument.annotationStorage;
         
-        storage.onSetModified = (data) => {
-            console.log("Annotations modified: ", all);
+        storage.onSetModified = async () => {
+            console.log("Document modified");
+            const data = await app.pdfDocument.saveDocument();
+            window.parent.postMessage({
+                type: "pdfjs-viewer-document-modified",
+                data: data 
+            }, "*");
             storage.resetModified();
         };
-
-        const oldSetValue = storage.setValue;
-        storage.setValue = (key, value) => {
-            console.log("Setting annotation: ", key, value);
-            oldSetValue.call(storage, key, value);
-        }        
     });
-});
+};
 
+main();
 console.log("Custom script loaded");