@diegotsi/flint-react 0.3.3 → 0.4.0

package/dist/index.cjs

@@ -7897,27 +7897,48 @@ function ScreenAnnotator({ zIndex: zIndex2, onCapture, onCancel }) {
       return;
     }
     setPhase("capturing");
+    const sx = window.scrollX ?? window.pageXOffset ?? 0;
+    const sy = window.scrollY ?? window.pageYOffset ?? 0;
+    const dpr = window.devicePixelRatio ?? 1;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
     await new Promise(
       (resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
     );
     const unpatch = patchGetComputedStyle();
     try {
-      const canvas = await html2canvas_esm_default(document.body, {
+      const fullCanvas = await html2canvas_esm_default(document.body, {
         useCORS: true,
         logging: false,
         allowTaint: true,
+        scale: dpr,
+        scrollX: -sx,
+        scrollY: -sy,
         ignoreElements: (el) => el === overlayRef.current
       });
       unpatch();
-      const dpr = window.devicePixelRatio ?? 1;
-      const sx = window.scrollX ?? window.pageXOffset ?? 0;
-      const sy = window.scrollY ?? window.pageYOffset ?? 0;
+      const canvas = document.createElement("canvas");
+      canvas.width = vw * dpr;
+      canvas.height = vh * dpr;
       const ctx = canvas.getContext("2d");
+      ctx.drawImage(
+        fullCanvas,
+        sx * dpr,
+        sy * dpr,
+        vw * dpr,
+        vh * dpr,
+        // source: viewport region from full capture
+        0,
+        0,
+        vw * dpr,
+        vh * dpr
+        // dest: fill the cropped canvas
+      );
       ctx.fillStyle = "rgba(255,200,0,0.25)";
-      ctx.fillRect((finalRect.x + sx) * dpr, (finalRect.y + sy) * dpr, finalRect.w * dpr, finalRect.h * dpr);
+      ctx.fillRect(finalRect.x * dpr, finalRect.y * dpr, finalRect.w * dpr, finalRect.h * dpr);
       ctx.strokeStyle = "#f97316";
       ctx.lineWidth = 3 * dpr;
-      ctx.strokeRect((finalRect.x + sx) * dpr, (finalRect.y + sy) * dpr, finalRect.w * dpr, finalRect.h * dpr);
+      ctx.strokeRect(finalRect.x * dpr, finalRect.y * dpr, finalRect.w * dpr, finalRect.h * dpr);
       canvas.toBlob((blob) => {
         if (blob) {
           onCapture(new File([blob], "annotation.png", { type: "image/png" }));
@@ -8404,7 +8425,7 @@ function FlintModal({
         onCancel: () => setAnnotating(false)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: overlayRef, style: { ...overlayStyle, opacity: annotating ? 0 : 1, pointerEvents: annotating ? "none" : "auto" }, onClick: handleOverlayClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "flint-modal-title", children: [
+    !annotating && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: overlayRef, style: overlayStyle, onClick: handleOverlayClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: modalStyle, role: "dialog", "aria-modal": "true", "aria-labelledby": "flint-modal-title", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         ModalHeader,
         {
@@ -8942,10 +8963,11 @@ var BLOCKED_HOSTS = /* @__PURE__ */ new Set([
   "logs.browser-intake-datadoghq.com",
   "session-replay.browser-intake-datadoghq.com"
 ]);
-function isBlockedUrl(url) {
+function isBlockedUrl(url, extra) {
   try {
     const host = new URL(url, location.href).hostname;
-    return BLOCKED_HOSTS.has(host) || [...BLOCKED_HOSTS].some((b) => host.endsWith("." + b));
+    const all = [...BLOCKED_HOSTS, ...extra];
+    return all.some((b) => host === b || host.endsWith("." + b));
   } catch {
     return false;
   }
@@ -8959,8 +8981,9 @@ function truncateUrl(url) {
     return url.length > 200 ? url.slice(0, 200) + "\u2026" : url;
   }
 }
-function createNetworkCollector() {
+function createNetworkCollector(extraBlockedHosts = []) {
   const entries = [];
+  const blocked = new Set(extraBlockedHosts);
   let origFetch = null;
   let origXHROpen = null;
   let active = false;
@@ -8978,7 +9001,7 @@ function createNetworkCollector() {
         const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
         const startTime = Date.now();
         const res = await origFetch.call(window, input, init);
-        if (!isBlockedUrl(url)) {
+        if (!isBlockedUrl(url, blocked)) {
           push({
             method,
             url: truncateUrl(url),
@@ -8994,7 +9017,7 @@ function createNetworkCollector() {
         const startTime = Date.now();
         const urlStr = typeof url === "string" ? url : url.href;
         this.addEventListener("load", () => {
-          if (!isBlockedUrl(urlStr)) {
+          if (!isBlockedUrl(urlStr, blocked)) {
             push({
               method: method.toUpperCase(),
               url: truncateUrl(urlStr),
@@ -9094,7 +9117,14 @@ function WidgetContent({
     consoleCollector.current.start();
   }
   if (!networkCollector.current) {
-    networkCollector.current = createNetworkCollector();
+    const flintHost = (() => {
+      try {
+        return new URL(serverUrl).hostname;
+      } catch {
+        return "";
+      }
+    })();
+    networkCollector.current = createNetworkCollector(flintHost ? [flintHost] : []);
     networkCollector.current.start();
   }
   (0, import_react4.useEffect)(() => {