feedbackkit-web 1.0.48 → 1.0.50

package/dist/feedbackkit.js

@@ -1672,7 +1672,11 @@ class Widget {
     button2.dataset.position = options.position ?? "bottom-right";
     button2.dataset.compact = String(!!options.compact);
     const label = options.label ?? "Feedback";
-    button2.setAttribute("aria-label", label);
+    const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+    const shortcutLabel = isMac ? "⌘⇧F" : "Ctrl+Shift+F";
+    button2.title = `${label} (${shortcutLabel})`;
+    button2.setAttribute("aria-label", `${label} (${shortcutLabel})`);
+    button2.setAttribute("aria-keyshortcuts", isMac ? "Meta+Shift+F" : "Control+Shift+F");
     button2.innerHTML = `${icons.feedback}<span class="fk-trigger-label"></span>`;
     button2.querySelector(".fk-trigger-label").textContent = label;
     button2.addEventListener("click", onClick);
@@ -1725,16 +1729,38 @@ class Widget {
     if (secondary) host.style.setProperty("--fk-secondary", secondary);
     else host.style.removeProperty("--fk-secondary");
   }
+  shouldCaptureScreenshot(options, captureOptions) {
+    if (options.captureScreenshot !== void 0) return options.captureScreenshot;
+    if (options.includeScreenshot !== void 0) return options.includeScreenshot;
+    if (captureOptions.enabled !== void 0) return captureOptions.enabled;
+    if (captureOptions.includeScreenshot !== void 0) return captureOptions.includeScreenshot;
+    if (captureOptions.mode === "off") return false;
+    if (this.deps.includeScreenshot && !this.deps.includeScreenshot()) return false;
+    const config = this.deps.configuration();
+    if (config) {
+      if (typeof config.captureScreenshot === "boolean") return config.captureScreenshot;
+      if (typeof config.captureScreenshot === "object" && config.captureScreenshot !== null) {
+        if (config.captureScreenshot.enabled !== void 0) return config.captureScreenshot.enabled;
+        if (config.captureScreenshot.includeScreenshot !== void 0) return config.captureScreenshot.includeScreenshot;
+        if (config.captureScreenshot.mode === "off") return false;
+      }
+      if (config.includeScreenshot !== void 0) return config.includeScreenshot;
+    }
+    return true;
+  }
   async run(options) {
     const shadow = this.mount();
     this.applyTheme();
-    this.trigger?.setAttribute("aria-busy", "true");
     const captureOptions = this.deps.captureOptions();
+    const shouldCapture = this.shouldCaptureScreenshot(options, captureOptions);
+    if (shouldCapture) {
+      this.trigger?.setAttribute("aria-busy", "true");
+    }
     const [shot, environment] = await Promise.all([
-      captureViewport({ ...captureOptions, exclude: this.isOwnNode }).catch((error) => {
+      shouldCapture ? captureViewport({ ...captureOptions, exclude: this.isOwnNode }).catch((error) => {
         console.warn("[FeedbackKit] Screenshot capture failed; continuing without one.", error);
         return null;
-      }),
+      }) : Promise.resolve(null),
       collectEnvironment({
         screenName: this.deps.currentScreen(),
         appVersion: this.deps.configuration()?.appVersion,
@@ -1744,21 +1770,31 @@ class Widget {
     const logs = this.deps.logs();
     this.trigger?.removeAttribute("aria-busy");
     return new Promise((resolve) => {
-      const dialog = new Dialog(shadow, shot, environment, logs, this.deps, options, (result) => {
-        resolve(result);
-      });
+      const dialog = new Dialog(
+        shadow,
+        shot,
+        environment,
+        logs,
+        this.deps,
+        options,
+        !shouldCapture,
+        (result) => {
+          resolve(result);
+        }
+      );
       dialog.show();
     });
   }
 }
 class Dialog {
-  constructor(shadow, shot, environment, logs, deps, options, done) {
+  constructor(shadow, shot, environment, logs, deps, options, screenshotDisabled, done) {
     this.shadow = shadow;
     this.shot = shot;
     this.environment = environment;
     this.logs = logs;
     this.deps = deps;
     this.options = options;
+    this.screenshotDisabled = screenshotDisabled;
     this.done = done;
     this.editor = null;
     this.includeLogs = true;
@@ -1779,7 +1815,13 @@ class Dialog {
     this.toolButtons = /* @__PURE__ */ new Map();
     this.swatches = [];
     this.onKeyDown = (e) => this.handleKey(e);
-    this.includeScreenshot = shot !== null;
+    if (this.screenshotDisabled || !shot) {
+      this.includeScreenshot = false;
+    } else if (options.includeScreenshot !== void 0) {
+      this.includeScreenshot = options.includeScreenshot;
+    } else {
+      this.includeScreenshot = true;
+    }
   }
   show() {
     this.previousFocus = document.activeElement;
@@ -1853,7 +1895,7 @@ class Dialog {
       this.resizeObserver.observe(wrap);
     }
     const note = el("div", "fk-off-note");
-    note.textContent = this.shot ? "Screenshot won't be included" : "Screenshot unavailable on this page";
+    note.textContent = this.shot || this.screenshotDisabled ? "Screenshot won't be included" : "Screenshot unavailable on this page";
     wrap.append(note);
     stage.append(toolbar, wrap);
     return stage;
@@ -1883,6 +1925,16 @@ class Dialog {
     const close = iconButton("fk-close", icons.close, "Close");
     close.addEventListener("click", () => this.cancel());
     header.append(title, close);
+    let renderAttachment = () => {
+    };
+    const attachFile = (file) => {
+      if (file.size > MAX_ATTACHMENT_BYTES) {
+        this.showError(`"${file.name}" is larger than 10 MB.`);
+        return;
+      }
+      this.attachment = { filename: file.name, mimeType: file.type || "application/octet-stream", data: file };
+      renderAttachment();
+    };
     const textLabel = el("label", "fk-label");
     textLabel.textContent = this.options.copy?.label ?? "What's the problem?";
     textLabel.setAttribute("for", "fk-text");
@@ -1891,6 +1943,27 @@ class Dialog {
     this.textarea.className = "fk-textarea";
     this.textarea.placeholder = this.options.copy?.placeholder ?? "Describe what happened and what you expected instead…";
     this.textarea.addEventListener("input", () => this.refreshState());
+    this.textarea.addEventListener("paste", (e) => {
+      const items = e.clipboardData?.items;
+      if (!items || items.length === 0) return;
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.kind === "file") {
+          const file = item.getAsFile();
+          if (file) {
+            let filename = file.name;
+            if (!filename || filename === "image.png") {
+              const ext = file.type.startsWith("image/") ? file.type.split("/")[1] || "png" : "bin";
+              filename = `clipboard-${Date.now()}.${ext}`;
+            }
+            const attached = new File([file], filename, { type: file.type || "application/octet-stream" });
+            attachFile(attached);
+            e.preventDefault();
+            break;
+          }
+        }
+      }
+    });
     const textGroup = el("div");
     textGroup.append(textLabel, this.textarea);
     const productsGroup = el("div");
@@ -1909,12 +1982,7 @@ class Dialog {
       const file = input.files?.[0];
       input.value = "";
       if (!file) return;
-      if (file.size > MAX_ATTACHMENT_BYTES) {
-        this.showError(`"${file.name}" is larger than 10 MB.`);
-        return;
-      }
-      this.attachment = { filename: file.name, mimeType: file.type || "application/octet-stream", data: file };
-      renderAttachment();
+      attachFile(file);
     };
     fileInput.addEventListener("change", () => onFile(fileInput));
     cameraInput.addEventListener("change", () => onFile(cameraInput));
@@ -1926,7 +1994,7 @@ class Dialog {
     const summary = el("span", "fk-options-summary");
     const renderSummary = () => {
       const parts = [];
-      if (this.shot && !this.includeScreenshot) parts.push("No screenshot");
+      if (!this.shot) parts.push("No screenshot");
       if (this.notifyReporter) parts.push("Notify me");
       summary.textContent = parts.join(" · ");
     };
@@ -1950,16 +2018,6 @@ class Dialog {
       menu.append(item("Attach file…", () => fileInput.click()));
       if (window.matchMedia?.("(pointer: coarse)").matches) menu.append(item("Take photo", () => cameraInput.click()));
       menu.append(el("hr", "fk-menu-sep"));
-      if (this.shot) {
-        menu.append(
-          item("Include screenshot", () => {
-            this.includeScreenshot = !this.includeScreenshot;
-            this.stage.dataset.screenshot = this.includeScreenshot ? "on" : "off";
-            renderSummary();
-            this.refreshState();
-          }, this.includeScreenshot)
-        );
-      }
       menu.append(
         item("Notify me when it's fixed", () => {
           this.notifyReporter = !this.notifyReporter;
@@ -1973,7 +2031,7 @@ class Dialog {
       menu.querySelector(".fk-menu-item")?.focus();
     };
     const attachGroup = el("div", "fk-attach-group");
-    const renderAttachment = () => {
+    renderAttachment = () => {
       attachGroup.replaceChildren();
       if (!this.attachment) return;
       const chip = el("span", "fk-file");
@@ -2010,7 +2068,17 @@ class Dialog {
     this.sendButton.title = "Send (⌘/Ctrl + Enter)";
     this.sendButton.addEventListener("click", () => void this.send());
     actions.append(cancel, this.sendButton);
-    composer.append(header, textGroup, productsGroup, optionsRow);
+    composer.append(header, textGroup, productsGroup);
+    if (this.shot) {
+      composer.append(
+        switchControl("Include screenshot", this.includeScreenshot, (on) => {
+          this.includeScreenshot = on;
+          this.stage.dataset.screenshot = on ? "on" : "off";
+          this.refreshState();
+        })
+      );
+    }
+    composer.append(optionsRow);
     if (meta) composer.append(meta);
     composer.append(el("div", "fk-spacer"), this.errorBox, actions);
     this.refreshState();
@@ -2281,6 +2349,7 @@ const widget = new Widget({
   defaultProductKey: () => configuration?.defaultProductKey,
   logs: () => logCapture?.buffer.snapshot() ?? [],
   captureOptions: () => FeedbackKit.captureOptions,
+  includeScreenshot: () => FeedbackKit.includeScreenshot,
   currentScreen: () => FeedbackKit.currentScreen,
   identity: () => ({ reporterId: reporterId(), user: getUser() })
 });
@@ -2369,6 +2438,8 @@ const FeedbackKit = {
   theme: null,
   /** Screenshot capture settings. See `CaptureOptions`. */
   captureOptions: {},
+  /** Whether screenshots should be captured and included in reports by default. Default `true`. */
+  includeScreenshot: true,
   /** The hosted dashboard's ingestion endpoint, used when `configure` gets no `endpoint`. */
   DEFAULT_ENDPOINT,
   /**
@@ -2401,7 +2472,12 @@ const FeedbackKit = {
    * `null` if the user cancels. Nothing is sent anywhere; delivery is yours.
    */
   present(options = {}) {
-    return widget.open({ submit: false, onReport: options.onReport });
+    return widget.open({
+      submit: false,
+      onReport: options.onReport,
+      captureScreenshot: options.captureScreenshot,
+      includeScreenshot: options.includeScreenshot
+    });
   },
   /**
    * Opens the dialog and, on Send, delivers the report to the configured
@@ -2412,7 +2488,13 @@ const FeedbackKit = {
     if (!configuration) {
       return Promise.reject(new Error("FeedbackKit.configure({ projectKey }) must be called before presentAndSubmit()."));
     }
-    return widget.open({ submit: true, onReport: options.onSubmitted, onError: options.onError });
+    return widget.open({
+      submit: true,
+      onReport: options.onSubmitted,
+      onError: options.onError,
+      captureScreenshot: options.captureScreenshot,
+      includeScreenshot: options.includeScreenshot
+    });
   },
   /** Sends an already-built report (e.g. one from `present`) to the configured endpoint. */
   submit(report) {
@@ -2429,10 +2511,17 @@ const FeedbackKit = {
    * configured, otherwise `present` and logs the report to the console.
    */
   showFloatingTriggerButton(options = {}) {
+    if (options.keyboardShortcut !== false && options.enableKeyboardShortcut !== false && !shortcutHandler) {
+      FeedbackKit.enableKeyboardShortcut(typeof options.keyboardShortcut === "object" ? options.keyboardShortcut : {});
+    }
     whenBodyReady(
       () => widget.showTrigger(options, () => {
-        if (configuration) void FeedbackKit.presentAndSubmit();
-        else void FeedbackKit.present({ onReport: (r) => console.info("[FeedbackKit] report", r) });
+        const openOptions = {
+          captureScreenshot: options.captureScreenshot,
+          includeScreenshot: options.includeScreenshot
+        };
+        if (configuration) void FeedbackKit.presentAndSubmit(openOptions);
+        else void FeedbackKit.present({ ...openOptions, onReport: (r) => console.info("[FeedbackKit] report", r) });
       })
     );
   },
@@ -2447,7 +2536,8 @@ const FeedbackKit = {
     FeedbackKit.disableKeyboardShortcut();
     const key = (options.key ?? "F").toLowerCase();
     shortcutHandler = (e) => {
-      if (!(e.metaKey || e.ctrlKey) || !e.shiftKey || e.altKey || e.key.toLowerCase() !== key) return;
+      const matchesKey = e.key.toLowerCase() === key || e.code.toLowerCase() === `key${key}`;
+      if (!(e.metaKey || e.ctrlKey) || !e.shiftKey || e.altKey || !matchesKey) return;
       e.preventDefault();
       if (configuration) void FeedbackKit.presentAndSubmit();
       else void FeedbackKit.present({ onReport: (r) => console.info("[FeedbackKit] report", r) });