@files-preview-app/preview-file 1.1.4 → 1.1.5

package/dist/styles.css

@@ -71,6 +71,13 @@
   transition: all 0.2s;
 }
 
+.fp-toolbar-btn svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+  pointer-events: none;
+}
+
 .fp-toolbar-btn:hover {
   background: var(--fp-btn-hover-bg);
 }
@@ -80,6 +87,11 @@
   color: var(--fp-accent);
 }
 
+.fp-viewer.fp-dragover {
+  outline: 2px dashed var(--fp-accent);
+  outline-offset: -4px;
+}
+
 .fp-toolbar-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;

package/dist/vue.cjs

@@ -371,8 +371,39 @@ function createElement(tag, attrs, ...children) {
   }
   return el;
 }
+var ICON_ZOOM_IN = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>`;
+var ICON_ZOOM_OUT = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>`;
+var ICON_FIT_PAGE = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>`;
+var ICON_ROTATE_CW = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>`;
+var ICON_ROTATE_CCW = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>`;
+var ICON_DOWNLOAD = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>`;
+var ICON_PRINT = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>`;
 var ICON_PAGE_PREV = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`;
 var ICON_PAGE_NEXT = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`;
+var ICON_PLAY = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>`;
+var ICON_PAUSE = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>`;
+var ICON_THUMBNAILS = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>`;
+var ICON_CLOSE = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
+var ICON_FULLSCREEN = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>`;
+var ICON_COPY = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
+var ICON_MAP = {
+  "zoom-in": ICON_ZOOM_IN,
+  "zoom-out": ICON_ZOOM_OUT,
+  "fit-page": ICON_FIT_PAGE,
+  "fit-slide": ICON_FIT_PAGE,
+  "rotate-cw": ICON_ROTATE_CW,
+  "rotate-ccw": ICON_ROTATE_CCW,
+  "download": ICON_DOWNLOAD,
+  "print": ICON_PRINT,
+  "thumbnails": ICON_THUMBNAILS,
+  "fullscreen": ICON_FULLSCREEN,
+  "play": ICON_PLAY,
+  "pause": ICON_PAUSE,
+  "close": ICON_CLOSE,
+  "copy": ICON_COPY,
+  "prev": ICON_PAGE_PREV,
+  "next": ICON_PAGE_NEXT
+};
 var ToolbarController = class {
   el;
   toolbarEl;
@@ -483,10 +514,11 @@ var ToolbarController = class {
       type: "button",
       "data-action-id": id
     });
-    if (iconHtml.startsWith("<svg")) {
-      btn.innerHTML = sanitizeSVG(iconHtml);
+    const svg = ICON_MAP[iconHtml] || iconHtml;
+    if (svg && svg.startsWith("<svg")) {
+      btn.innerHTML = sanitizeSVG(svg);
     } else {
-      btn.textContent = iconHtml;
+      btn.textContent = svg || title;
     }
     btn.addEventListener("click", onClick);
     return btn;
@@ -567,6 +599,9 @@ var FilePreviewViewer = class {
   contentEl = null;
   currentBuffer = null;
   currentMetadata = null;
+  keyHandler = null;
+  currentContainer = null;
+  currentOptions = {};
   /**
    * Register a preview plugin.
    */
@@ -621,24 +656,47 @@ var FilePreviewViewer = class {
         emit: (event, payload) => this.eventEmitter.emit(event, payload)
       });
       this.activeInstance = instance;
+      this.hideLoading();
+      this.eventEmitter.emit("loaded", { metadata, plugin: matchedPlugin.id });
       if (options.showToolbar !== false && this.toolbar) {
         const actions = matchedPlugin.getToolbarActions(instance);
+        const hasFullscreen = actions.some((a) => a.id === "fullscreen");
+        if (!hasFullscreen && this.wrapperEl) {
+          actions.push({
+            id: "fullscreen",
+            icon: "fullscreen",
+            label: "Toggle Fullscreen",
+            type: "button",
+            group: "view",
+            execute: () => {
+              if (!document.fullscreenElement) {
+                this.wrapperEl?.requestFullscreen?.();
+              } else {
+                document.exitFullscreen?.();
+              }
+            }
+          });
+        }
         this.toolbar.update(actions);
         this.toolbar.show();
       }
       if (instance.getThumbnails && this.thumbnailPanel) {
-        const thumbnails = await Promise.resolve(instance.getThumbnails());
-        if (thumbnails && thumbnails.length > 0) {
-          this.thumbnailPanel.update(thumbnails, (index) => {
-            instance.goToPage?.(index + 1);
-          });
-          if (options.showThumbnails) {
-            this.thumbnailPanel.show();
+        Promise.resolve().then(async () => {
+          try {
+            const thumbnails = await Promise.resolve(instance.getThumbnails());
+            if (thumbnails && thumbnails.length > 0 && this.thumbnailPanel) {
+              this.thumbnailPanel.update(thumbnails, (index) => {
+                instance.goToPage?.(index + 1);
+              });
+              if (options.showThumbnails) {
+                this.thumbnailPanel.show();
+              }
+            }
+          } catch (e) {
+            console.warn("[FilePreview] Non-critical thumbnail load error:", e);
           }
-        }
+        });
       }
-      this.hideLoading();
-      this.eventEmitter.emit("loaded", { metadata, plugin: matchedPlugin.id });
       return instance;
     } catch (error) {
       this.hideLoading();
@@ -660,6 +718,10 @@ var FilePreviewViewer = class {
    * Destroy the viewer and clean up all resources.
    */
   destroy() {
+    if (this.keyHandler) {
+      window.removeEventListener("keydown", this.keyHandler);
+      this.keyHandler = null;
+    }
     this.abort();
     this.destroyInstance();
     this.toolbar?.destroy();
@@ -675,6 +737,7 @@ var FilePreviewViewer = class {
     this.thumbnailPanel = null;
     this.currentBuffer = null;
     this.currentMetadata = null;
+    this.currentContainer = null;
   }
   /**
    * Get the currently active preview instance.
@@ -704,6 +767,8 @@ var FilePreviewViewer = class {
     return null;
   }
   setupDOM(container, options) {
+    this.currentContainer = container;
+    this.currentOptions = options;
     if (this.wrapperEl?.parentNode === container) return;
     if (this.wrapperEl?.parentNode) {
       this.wrapperEl.parentNode.removeChild(this.wrapperEl);
@@ -712,6 +777,7 @@ var FilePreviewViewer = class {
     const toolbarPos = options.toolbarPosition ?? "top";
     this.wrapperEl = document.createElement("div");
     this.wrapperEl.className = `fp-viewer ${themeClass} ${options.className ?? ""}`.trim();
+    this.wrapperEl.tabIndex = 0;
     const toolbarEl = document.createElement("div");
     toolbarEl.className = "fp-toolbar-container";
     this.contentEl = document.createElement("div");
@@ -733,6 +799,59 @@ var FilePreviewViewer = class {
     container.appendChild(this.wrapperEl);
     this.toolbar = new ToolbarController(toolbarEl);
     this.thumbnailPanel = new ThumbnailPanel(thumbnailEl);
+    this.setupKeyboardShortcuts();
+    this.setupDragAndDrop(container, options);
+  }
+  setupKeyboardShortcuts() {
+    if (this.keyHandler) return;
+    this.keyHandler = (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target?.isContentEditable) {
+        return;
+      }
+      if (!this.activeInstance) return;
+      if (e.key === "ArrowRight" || e.key === "PageDown") {
+        const cur = this.activeInstance.getCurrentPage?.() ?? 1;
+        this.activeInstance.goToPage?.(cur + 1);
+      } else if (e.key === "ArrowLeft" || e.key === "PageUp") {
+        const cur = this.activeInstance.getCurrentPage?.() ?? 1;
+        this.activeInstance.goToPage?.(Math.max(1, cur - 1));
+      } else if (e.key === "+" || e.key === "=") {
+        this.activeInstance.zoomIn?.();
+      } else if (e.key === "-" || e.key === "_") {
+        this.activeInstance.zoomOut?.();
+      } else if (e.key === "0") {
+        this.activeInstance.fitToPage?.();
+      } else if (e.key === "r" || e.key === "R") {
+        this.activeInstance.rotateCW?.();
+      } else if (e.key === "f" || e.key === "F") {
+        if (!document.fullscreenElement) {
+          this.wrapperEl?.requestFullscreen?.();
+        } else {
+          document.exitFullscreen?.();
+        }
+      }
+    };
+    window.addEventListener("keydown", this.keyHandler);
+  }
+  setupDragAndDrop(container, options) {
+    if (!this.wrapperEl) return;
+    this.wrapperEl.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      this.wrapperEl?.classList.add("fp-dragover");
+    });
+    this.wrapperEl.addEventListener("dragleave", (e) => {
+      if (e.relatedTarget === null || !this.wrapperEl?.contains(e.relatedTarget)) {
+        this.wrapperEl?.classList.remove("fp-dragover");
+      }
+    });
+    this.wrapperEl.addEventListener("drop", (e) => {
+      e.preventDefault();
+      this.wrapperEl?.classList.remove("fp-dragover");
+      const file = e.dataTransfer?.files?.[0];
+      if (file) {
+        this.preview(container, file, options);
+      }
+    });
   }
   showLoading() {
     if (!this.contentEl) return;
@@ -751,10 +870,27 @@ var FilePreviewViewer = class {
     this.contentEl.innerHTML = "";
     const errorEl = document.createElement("div");
     errorEl.className = "fp-error";
+    errorEl.style.display = "flex";
+    errorEl.style.flexDirection = "column";
+    errorEl.style.alignItems = "center";
+    errorEl.style.justifyContent = "center";
+    errorEl.style.padding = "32px";
+    errorEl.style.textAlign = "center";
+    const hasDownload = !!(this.currentBuffer && this.currentMetadata);
     errorEl.innerHTML = `
-      <div class="fp-error-icon">\u26A0\uFE0F</div>
-      <div class="fp-error-message">${message}</div>
+      <div class="fp-error-icon" style="font-size:36px;margin-bottom:8px;">\u26A0\uFE0F</div>
+      <div class="fp-error-message" style="font-size:16px;font-weight:600;margin-bottom:6px;">Cannot preview file</div>
+      <div class="fp-error-sub" style="font-size:13px;color:#64748b;max-width:420px;line-height:1.5;margin-bottom:16px;">${message}</div>
+      ${hasDownload ? '<button class="fp-error-download-btn" style="padding:8px 16px;background:#3b82f6;color:#ffffff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:13px;transition:background 0.2s;">Download Original File</button>' : ""}
     `;
+    if (hasDownload && this.currentBuffer) {
+      const btn = errorEl.querySelector(".fp-error-download-btn");
+      if (btn) {
+        btn.addEventListener("click", () => {
+          downloadFile(this.currentBuffer, this.currentMetadata?.name || "download", this.currentMetadata?.mimeType);
+        });
+      }
+    }
     this.contentEl.appendChild(errorEl);
   }
 };
@@ -1675,6 +1811,16 @@ var CodePlugin = class {
           instance.zoomIn?.();
         }
       },
+      {
+        id: "copy",
+        icon: "copy",
+        label: "Copy Content",
+        type: "button",
+        group: "actions",
+        execute: () => {
+          instance.copy?.();
+        }
+      },
       {
         id: "download",
         icon: "download",
@@ -1762,6 +1908,9 @@ var CodePlugin = class {
       },
       print: () => {
         window.print();
+      },
+      copy: () => {
+        navigator.clipboard?.writeText(text);
       }
     };
   }
@@ -2012,6 +2161,14 @@ var MarkdownPlugin = class {
         group: "zoom",
         execute: () => instance.fitToPage?.()
       },
+      {
+        id: "copy",
+        icon: "copy",
+        label: "Copy Markdown",
+        type: "button",
+        group: "actions",
+        execute: () => instance.copy?.()
+      },
       {
         id: "download",
         icon: "download",
@@ -2162,6 +2319,9 @@ var MarkdownPlugin = class {
       },
       print: () => {
         window.print();
+      },
+      copy: () => {
+        navigator.clipboard?.writeText(text);
       }
     };
   }