@hienlh/ppm 0.13.56 → 0.13.58

package/src/web/components/editor/pdf-preview.tsx

@@ -1,12 +1,36 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Loader2, FileWarning, ExternalLink } from "lucide-react";
 import { useBlobUrl } from "./use-blob-url";
 
 export function PdfPreview({ filePath, projectName }: { filePath: string; projectName: string }) {
-  const { blobUrl, error } = useBlobUrl(filePath, projectName, "application/pdf");
+  const [refreshKey, setRefreshKey] = useState(0);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const pageHashRef = useRef("");
+
+  const { blobUrl, error } = useBlobUrl(filePath, projectName, "application/pdf", refreshKey);
+
+  // Auto-reload: listen for file:changed WS events
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (detail.projectName !== projectName || detail.path !== filePath) return;
+      // Save current page hash before re-fetch (Chrome PDF viewer uses #page=N&zoom=...)
+      try {
+        pageHashRef.current = iframeRef.current?.contentWindow?.location.hash || "";
+      } catch { /* cross-origin */ }
+      setRefreshKey((k) => k + 1);
+    };
+    window.addEventListener("file:changed", handler);
+    return () => window.removeEventListener("file:changed", handler);
+  }, [filePath, projectName]);
 
   const openInNewTab = useCallback(() => { if (blobUrl) window.open(blobUrl, "_blank"); }, [blobUrl]);
 
+  // Append saved page hash to blob URL so PDF viewer restores position
+  const iframeSrc = blobUrl
+    ? `${blobUrl}${pageHashRef.current}`
+    : undefined;
+
   if (error) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3 text-text-secondary">
@@ -26,7 +50,7 @@ export function PdfPreview({ filePath, projectName }: { filePath: string; projec
           <ExternalLink className="size-3" /> Open in new tab
         </button>
       </div>
-      <iframe src={blobUrl} title={filePath} className="flex-1 w-full border-none" />
+      <iframe ref={iframeRef} src={iframeSrc} title={filePath} className="flex-1 w-full border-none" />
     </div>
   );
 }

package/src/web/components/editor/use-blob-url.ts

@@ -1,18 +1,21 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { projectUrl, getAuthToken } from "@/lib/api-client";
 
 /** Shared hook: fetch a project file as a blob URL via /files/raw endpoint.
- *  Detects absolute paths (external files) and uses /api/fs/raw instead. */
+ *  Detects absolute paths (external files) and uses /api/fs/raw instead.
+ *  Pass a changing `refreshKey` to re-fetch without unmounting. */
 export function useBlobUrl(
   filePath: string,
   projectName: string,
   mimeOverride?: string,
+  refreshKey = 0,
 ) {
   const [blobUrl, setBlobUrl] = useState<string | null>(null);
   const [error, setError] = useState(false);
+  const urlRef = useRef<string | null>(null);
 
   useEffect(() => {
-    let revoke: string | undefined;
+    let cancelled = false;
     const isExternal = /^(\/|[A-Za-z]:[/\\])/.test(filePath);
     const url = isExternal
       ? `/api/fs/raw?path=${encodeURIComponent(filePath)}`
@@ -24,16 +27,22 @@ export function useBlobUrl(
         return r.blob();
       })
       .then((blob) => {
+        if (cancelled) return;
         const final = mimeOverride ? new Blob([blob], { type: mimeOverride }) : blob;
         const u = URL.createObjectURL(final);
-        revoke = u;
+        // Revoke old URL only after new one is ready (avoids blank flash)
+        if (urlRef.current) URL.revokeObjectURL(urlRef.current);
+        urlRef.current = u;
         setBlobUrl(u);
       })
-      .catch(() => setError(true));
-    return () => {
-      if (revoke) URL.revokeObjectURL(revoke);
-    };
-  }, [filePath, projectName, mimeOverride]);
+      .catch(() => { if (!cancelled) setError(true); });
+    return () => { cancelled = true; };
+  }, [filePath, projectName, mimeOverride, refreshKey]);
+
+  // Revoke on unmount
+  useEffect(() => () => {
+    if (urlRef.current) URL.revokeObjectURL(urlRef.current);
+  }, []);
 
   return { blobUrl, error };
 }

package/dist/web/assets/keybindings-store-Rf9YKWAp.js

@@ -1 +0,0 @@
-import"./vendor-markdown-0Mxgxy0L.js";import"./api-client-DiZgVOok.js";import{D as e}from"./index-CP6EIXkh.js";export{e as useKeybindingsStore};

package/dist/web/assets/notification-store-C3tg-ZXm.js

@@ -1 +0,0 @@
-import"./vendor-markdown-0Mxgxy0L.js";import"./api-client-DiZgVOok.js";import{P as e}from"./index-CP6EIXkh.js";export{e as useNotificationStore};

package/dist/web/assets/pdf-preview-BdmR2RsT.js

@@ -1 +0,0 @@
-import{o as e}from"./rolldown-runtime-FhOqtrmT.js";import{b as t,x as n}from"./vendor-markdown-0Mxgxy0L.js";import{t as r}from"./file-exclamation-point-B__2Hrd6.js";import"./api-client-DiZgVOok.js";import{$ as i,ct as a}from"./index-CP6EIXkh.js";import{t as o}from"./use-blob-url-CI2h4qu0.js";var s=e(n(),1),c=t();function l({filePath:e,projectName:t}){let{blobUrl:n,error:l}=o(e,t,`application/pdf`),u=(0,s.useCallback)(()=>{n&&window.open(n,`_blank`)},[n]);return l?(0,c.jsxs)(`div`,{className:`flex flex-col items-center justify-center h-full gap-3 text-text-secondary`,children:[(0,c.jsx)(r,{className:`size-10 text-text-subtle`}),(0,c.jsx)(`p`,{className:`text-sm`,children:`Failed to load PDF.`})]}):n?(0,c.jsxs)(`div`,{className:`flex flex-col h-full`,children:[(0,c.jsxs)(`div`,{className:`flex items-center justify-between px-3 py-1.5 border-b border-border bg-background shrink-0`,children:[(0,c.jsx)(`span`,{className:`text-xs text-text-secondary truncate`,children:e}),(0,c.jsxs)(`button`,{onClick:u,className:`flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary transition-colors`,children:[(0,c.jsx)(a,{className:`size-3`}),` Open in new tab`]})]}),(0,c.jsx)(`iframe`,{src:n,title:e,className:`flex-1 w-full border-none`})]}):(0,c.jsx)(`div`,{className:`flex items-center justify-center h-full`,children:(0,c.jsx)(i,{className:`size-5 animate-spin text-text-subtle`})})}export{l as PdfPreview};

package/dist/web/assets/use-blob-url-CI2h4qu0.js

@@ -1 +0,0 @@
-import{o as e}from"./rolldown-runtime-FhOqtrmT.js";import{x as t}from"./vendor-markdown-0Mxgxy0L.js";import{i as n,r}from"./api-client-DiZgVOok.js";var i=e(t(),1);function a(e,t,a){let[o,s]=(0,i.useState)(null),[c,l]=(0,i.useState)(!1);return(0,i.useEffect)(()=>{let i,o=/^(\/|[A-Za-z]:[/\\])/.test(e)?`/api/fs/raw?path=${encodeURIComponent(e)}`:`${n(t)}/files/raw?path=${encodeURIComponent(e)}`,c=r();return fetch(o,{headers:c?{Authorization:`Bearer ${c}`}:{}}).then(e=>{if(!e.ok)throw Error(`Failed`);return e.blob()}).then(e=>{let t=a?new Blob([e],{type:a}):e,n=URL.createObjectURL(t);i=n,s(n)}).catch(()=>l(!0)),()=>{i&&URL.revokeObjectURL(i)}},[e,t,a]),{blobUrl:o,error:c}}export{a as t};