@solhun/feedback-kit-web 0.6.0 → 0.6.1

package/dist/index.cjs

@@ -1009,7 +1009,7 @@ var import_feedback_kit_core3 = require("@solhun/feedback-kit-core");
 var import_react = require("react");
 
 // src/version.ts
-var VERSION = true ? "0.6.0" : "dev";
+var VERSION = true ? "0.6.1" : "dev";
 
 // src/feedback-kit.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1072,26 +1072,41 @@ async function transcodeToJpeg(dataUrl) {
     return null;
   }
 }
+function looksLikeImageName(name) {
+  return /\.(png|jpe?g|gif|webp|bmp|avif|heic|heif)$/i.test(name);
+}
+function isImageFile(file) {
+  if (file.type.startsWith("image/")) return true;
+  return (file.type === "" || file.type === "application/octet-stream") && looksLikeImageName(file.name);
+}
+function contentTypeOf(file) {
+  if (file.type !== "") return file.type;
+  const name = file instanceof File ? file.name : "";
+  if (/\.png$/i.test(name)) return "image/png";
+  if (/\.jpe?g$/i.test(name)) return "image/jpeg";
+  return "";
+}
 async function readImageFile(file) {
-  if (!file.type.startsWith("image/")) return null;
+  const named = file instanceof File ? file : null;
+  if (!file.type.startsWith("image/") && !(named !== null && isImageFile(named))) return null;
   const dataUrl = await readDataUrl(file);
   if (!dataUrl) return null;
-  if (file.type === "image/png" || file.type === "image/jpeg") {
+  const type = contentTypeOf(file);
+  if (type === "image/png" || type === "image/jpeg") {
     const base64 = base64Of(dataUrl);
-    return base64 ? { base64, contentType: file.type } : null;
+    return base64 ? { base64, contentType: type } : null;
   }
   return transcodeToJpeg(dataUrl);
 }
 function firstImageOf(transfer) {
   if (!transfer) return null;
   for (const item of Array.from(transfer.items ?? [])) {
-    if (item.kind === "file" && item.type.startsWith("image/")) {
-      const file = item.getAsFile();
-      if (file) return file;
-    }
+    if (item.kind !== "file") continue;
+    const file = item.getAsFile();
+    if (file && isImageFile(file)) return file;
   }
   for (const file of Array.from(transfer.files ?? [])) {
-    if (file.type.startsWith("image/")) return file;
+    if (isImageFile(file)) return file;
   }
   return null;
 }
@@ -1433,6 +1448,23 @@ function FeedbackKit(props) {
     document.addEventListener("keydown", onKeyDownCapture, true);
     return () => document.removeEventListener("keydown", onKeyDownCapture, true);
   }, [kit, widgetState, pickingState.popup]);
+  (0, import_react.useEffect)(() => {
+    if (!kit || !widgetState?.modal.open) return;
+    if (pickingState.popup) return;
+    const locked = widgetState.modal.submitStatus === "sending" || widgetState.modal.submitStatus === "pending";
+    if (locked) return;
+    const controller = kit;
+    async function onPaste(event) {
+      const file = firstImageOf(event.clipboardData);
+      if (!file) return;
+      event.preventDefault();
+      const shot = await readImageFile(file);
+      if (shot) await controller.widget.modal.attachFile(shot);
+    }
+    const handler = (event) => void onPaste(event);
+    document.addEventListener("paste", handler);
+    return () => document.removeEventListener("paste", handler);
+  }, [kit, widgetState, pickingState.popup]);
   if (!kit || !widgetState) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...OWN_UI_PROPS, "data-feedback-kit-loading": "true" });
   }
@@ -1470,6 +1502,14 @@ function FeedbackKit(props) {
     }
     input.value = "";
   }
+  async function attachToModal(transfer) {
+    const file = firstImageOf(transfer);
+    if (!file) return false;
+    const screenshot = await readImageFile(file);
+    if (!screenshot) return false;
+    await activeKit.widget.modal.attachFile(screenshot);
+    return true;
+  }
   async function attachToPopup(transfer) {
     const file = firstImageOf(transfer);
     if (!file) return false;
@@ -1570,6 +1610,14 @@ function FeedbackKit(props) {
                 "aria-modal": "true",
                 "aria-labelledby": "feedback-kit-dialog-title",
                 onKeyDown: handleModalKeyDown,
+                onDragOver: (event) => {
+                  if (!draftLocked && firstImageOf(event.dataTransfer)) event.preventDefault();
+                },
+                onDrop: (event) => {
+                  if (draftLocked || !firstImageOf(event.dataTransfer)) return;
+                  event.preventDefault();
+                  void attachToModal(event.dataTransfer);
+                },
                 style: {
                   width: "min(520px, 100%)",
                   maxHeight: "min(760px, calc(100vh - 40px))",