@impakers/debug 1.4.7 → 1.4.9

package/dist/react.mjs

@@ -1535,68 +1535,14 @@ function findNearestComponentSource(element, maxAncestors = 10) {
 }
 
 // src/utils/capture-element.ts
-var UNSUPPORTED_RE = /oklab|oklch|color-mix/i;
-function sanitizeUnsupportedColors(clonedDoc) {
-  try {
-    for (let i = 0; i < clonedDoc.styleSheets.length; i++) {
-      try {
-        const sheet = clonedDoc.styleSheets[i];
-        const rules = sheet.cssRules || sheet.rules;
-        if (!rules) continue;
-        sanitizeCSSRules(sheet, rules);
-      } catch {
-      }
-    }
-  } catch {
-  }
-  clonedDoc.querySelectorAll("style").forEach((styleEl) => {
-    const text = styleEl.textContent || "";
-    if (UNSUPPORTED_RE.test(text)) {
-      styleEl.textContent = text.replace(
-        /[^{};\n]+:\s*[^;{}]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;{}]*/gi,
-        ""
-      );
-    }
-  });
-  clonedDoc.querySelectorAll("*").forEach((el) => {
-    const s = el.style;
-    if (!s?.cssText) return;
-    if (UNSUPPORTED_RE.test(s.cssText)) {
-      s.cssText = s.cssText.replace(
-        /[^;]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;]*/gi,
-        ""
-      );
-    }
-  });
-}
-function sanitizeCSSRules(sheet, rules) {
-  for (let j = rules.length - 1; j >= 0; j--) {
-    const rule = rules[j];
-    if ("cssRules" in rule && rule.cssRules) {
-      sanitizeCSSRules(sheet, rule.cssRules);
-      continue;
-    }
-    if (rule instanceof CSSStyleRule) {
-      const style = rule.style;
-      for (let k = style.length - 1; k >= 0; k--) {
-        const prop = style[k];
-        const val = style.getPropertyValue(prop);
-        if (UNSUPPORTED_RE.test(val)) {
-          style.setProperty(prop, "transparent");
-        }
-      }
-    }
-  }
-}
 async function captureElement(el, options = {}) {
   const { quality = 0.7, maxScale = 2 } = options;
-  const html2canvas = (await import("html2canvas")).default;
+  const html2canvas = (await import("html2canvas-pro")).default;
   const canvas = await html2canvas(el, {
     useCORS: true,
     allowTaint: true,
     scale: Math.min(window.devicePixelRatio, maxScale),
-    logging: false,
-    onclone: (clonedDoc) => sanitizeUnsupportedColors(clonedDoc)
+    logging: false
   });
   return canvas.toDataURL("image/jpeg", quality);
 }
@@ -1607,15 +1553,14 @@ async function captureFullPage(options = {}) {
   const hiddenEls = document.querySelectorAll(allSelectors.join(", "));
   try {
     hiddenEls.forEach((el) => el.style.visibility = "hidden");
-    const html2canvas = (await import("html2canvas")).default;
+    const html2canvas = (await import("html2canvas-pro")).default;
     const canvas = await html2canvas(document.body, {
       useCORS: true,
       allowTaint: true,
       scale: 1,
       logging: false,
       width: window.innerWidth,
-      height: window.innerHeight,
-      onclone: (clonedDoc) => sanitizeUnsupportedColors(clonedDoc)
+      height: window.innerHeight
     });
     return canvas.toDataURL("image/jpeg", quality);
   } catch {
@@ -3902,10 +3847,10 @@ function DebugWidget({ endpoint, getUser, onHide }) {
         if (routeMatch?.context) {
           metadata.routeDebug = routeMatch.context;
         }
-        const descriptionParts = [comment];
+        const debugParts = [];
         if (debugTargets.length > 0) {
-          descriptionParts.push(
-            "\n\n---\n**\uB514\uBC84\uAE45 \uD0C0\uAC9F \uD30C\uC77C**:",
+          debugParts.push(
+            "**\uB514\uBC84\uAE45 \uD0C0\uAC9F \uD30C\uC77C**:",
             ...debugTargets.map((target) => {
               const suffix = target.line ? `:${target.line}${typeof target.column === "number" ? `:${target.column}` : ""}` : "";
               return `- [${target.kind}] \`${target.file}${suffix}\` (${target.reason})`;
@@ -3940,29 +3885,29 @@ function DebugWidget({ endpoint, getUser, onHide }) {
           elementInfo.push(`**\uC811\uADFC\uC131**: ${pendingAnnotation.accessibility}`);
         }
         if (elementInfo.length > 0) {
-          descriptionParts.push(`
-
+          debugParts.push(`
 ---
 ${elementInfo.join("\n")}`);
         }
         if (metadata.consoleErrors?.length) {
-          descriptionParts.push(`
+          debugParts.push(`
 **\uCD5C\uADFC \uCF58\uC194 \uC5D0\uB7EC**:`);
-          metadata.consoleErrors.slice(-10).forEach((e) => descriptionParts.push(`- \`${e.slice(0, 200)}\``));
+          metadata.consoleErrors.slice(-10).forEach((e) => debugParts.push(`- \`${e.slice(0, 200)}\``));
         }
         if (metadata.consoleLogs?.length) {
           const recentLogs = metadata.consoleLogs.filter((l) => l.level === "error" || l.level === "warn").slice(-10);
           if (recentLogs.length > 0) {
-            descriptionParts.push(`
+            debugParts.push(`
 **\uCD5C\uADFC \uCF58\uC194 \uB85C\uADF8**:`);
-            recentLogs.forEach((l) => descriptionParts.push(`- [${l.level}] \`${l.message.slice(0, 200)}\``));
+            recentLogs.forEach((l) => debugParts.push(`- [${l.level}] \`${l.message.slice(0, 200)}\``));
           }
         }
         const result = await submitFeedback(endpoint, {
           title: comment.slice(0, 100),
-          description: descriptionParts.join("\n"),
+          description: comment,
           priority: "medium",
           metadata,
+          debugInfo: debugParts.length > 0 ? debugParts.join("\n") : void 0,
           screenshot,
           feedbackUrl: window.location.pathname,
           feedbackMarker: {