fix pdf reload

package.json

@@ -9,7 +9,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "peer-server": "peerjs --port 8000 --key peerjs --path /aincraft --allow_discovery true",
-    "upload": "firebase deploy --only hosting"
+    "upload": "firebase deploy --only hosting",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@codemirror/language": "^6.9.3",
@@ -72,6 +73,7 @@
     "@typescript-eslint/parser": "^6.13.2",
     "eslint": "^8.55.0",
     "eslint-plugin-solid": "^0.13.0",
+    "patch-package": "^8.0.0",
     "peer": "^1.0.2",
     "solid-devtools": "^0.29.2",
     "typescript": "^5.3.3",

patches/pdfjs-dist+3.11.174.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/pdfjs-dist/build/pdf.js b/node_modules/pdfjs-dist/build/pdf.js
+index 4acf16b..a5e346b 100644
+--- a/node_modules/pdfjs-dist/build/pdf.js
++++ b/node_modules/pdfjs-dist/build/pdf.js
+@@ -4260,7 +4260,7 @@ class AnnotationEditorUIManager {
+     this.#activeEditor = null;
+     this.#selectedEditors.clear();
+     this.#commandManager.destroy();
+-    this.#altTextManager.destroy();
++    this.#altTextManager?.destroy();
+   }
+   get hcmFilter() {
+     return (0, _util.shadow)(this, "hcmFilter", this.#pageColors ? this.#filterFactory.addHCMFilter(this.#pageColors.foreground, this.#pageColors.background) : "none");

src/components/common.css

@@ -17,4 +17,9 @@
 .sl-panel {
     height: 100%;
     flex: 1;
+}
+
+/** PDF Slick component */
+.pdfSlick {
+    position: relative;
 }

src/components/share-latex/pdf-viewer.tsx

@@ -1,6 +1,5 @@
 import { usePDFSlick } from "@pdfslick/solid"
-import { createInterval } from "../../utils"
-// import { createSignal, createEffect } from "solid-js"
+import { createEffect } from "solid-js"
 
 export default function PdfViewer(props: {
   pdfUrl: string | undefined
@@ -13,15 +12,14 @@ export default function PdfViewer(props: {
     // eslint-disable-next-line solid/reactivity
   } = usePDFSlick(props.pdfUrl, {})
 
-  createInterval(() => {
-    // TODO: Need some CSS expert to find a better way
-    const ele = document.getElementById('viewerContainer')
-    if (ele) {
-      ele.style.position = 'relative'
-    }
-  }, () => 100)
+  createEffect(() => {
+    // This requires a patch to pdfjs (see patches folder)
+    // https://github.com/mozilla/pdf.js/pull/17445 (contributed upstream)
+    // This also reloads the worker every time, but no big deal due to caching
+    store.pdfSlick?.loadDocument(props.pdfUrl!)
+  });
 
-  return <div class="absolute inset-0 pdfSlick h-full">
+  return <div class="inset-0 pdfSlick h-full" >
       <PDFSlickViewer {...{ store, viewerRef }} class="h-full" />
   </div >
 }