@solhun/feedback-kit-web 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -59,6 +59,8 @@ __export(index_exports, {
   isOwnUi: () => isOwnUi2,
   normalizePin: () => import_feedback_kit_core6.normalizePin,
   parseSourceAttr: () => import_feedback_kit_core5.parseSourceAttr,
+  reactComponentPath: () => reactComponentPath,
+  reactComponentSummary: () => reactComponentSummary,
   reencodeWebScreenshot: () => reencodeWebScreenshot,
   resolveConfig: () => import_feedback_kit_core4.resolveConfig,
   shouldShowWidget: () => import_feedback_kit_core4.shouldShowWidget,
@@ -71,6 +73,48 @@ var import_feedback_kit_core4 = require("@solhun/feedback-kit-core");
 var import_feedback_kit_core5 = require("@solhun/feedback-kit-core");
 var import_feedback_kit_core6 = require("@solhun/feedback-kit-core");
 
+// src/react-tree.ts
+function componentName(type) {
+  if (typeof type === "function") {
+    const fn = type;
+    return fn.displayName || fn.name || null;
+  }
+  if (type !== null && typeof type === "object") {
+    const wrapped = type;
+    if (wrapped.displayName) return wrapped.displayName;
+    if (wrapped.render) return componentName(wrapped.render);
+    if (wrapped.type) return componentName(wrapped.type);
+  }
+  return null;
+}
+function fiberOf(node) {
+  for (const key of Object.getOwnPropertyNames(node)) {
+    if (key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")) {
+      const value = node[key];
+      if (value !== null && typeof value === "object") return value;
+    }
+  }
+  return null;
+}
+function reactComponentPath(node, limit = 20) {
+  try {
+    let fiber = fiberOf(node);
+    const names = [];
+    while (fiber && names.length < limit) {
+      const name = componentName(fiber.elementType ?? fiber.type);
+      if (name && names[0] !== name) names.unshift(name);
+      fiber = fiber.return ?? null;
+    }
+    return names;
+  } catch {
+    return [];
+  }
+}
+function reactComponentSummary(node) {
+  const path = reactComponentPath(node);
+  return path.length > 0 ? path.join(" > ") : null;
+}
+
 // src/element-info.ts
 var ELEMENT_TEXT_MAX_CHARS = 200;
 var SELECTOR_MAX_DEPTH = 8;
@@ -160,13 +204,20 @@ function describeElement(el) {
   } catch {
     boundingBox = null;
   }
+  const react = reactComponentSummary(el);
   return {
     tag: el.tagName.toLowerCase(),
     id: el.getAttribute("id"),
     className: el.getAttribute("class"),
     text: visibleText(el),
     boundingBox,
-    attributes,
+    attributes: {
+      ...attributes,
+      // 지목한 요소가 어느 컴포넌트에 속하는지. `div.flex.items-center` 만 오면
+      // 고치는 사람이 코드에서 다시 찾아야 하지만, `LoginForm > SubmitButton` 이
+      // 오면 바로 파일이 열린다. React 가 아니면 이 키 자체가 없다.
+      ...react ? { "react-components": react } : {}
+    },
     selector: cssSelectorPath(el)
   };
 }
@@ -291,6 +342,7 @@ var ElementPickingController = class {
     this.queue = opts.queue;
     this.createReport = opts.createReport;
     this.store = opts.store ?? new MarkerStore();
+    this.onPick = opts.onPick ?? null;
     this.getPathname = opts.getPathname ?? defaultPathname;
     this.doc = opts.doc === void 0 ? defaultDocument() : opts.doc;
     this.getViewport = opts.getViewport ?? defaultViewport;
@@ -404,6 +456,10 @@ var ElementPickingController = class {
   /** 클릭 지점 기준으로 주석 팝업을 연다. 좌표는 해상도 무관한 상대값으로 접어 둔다. */
   openAnnotation(element, clientPoint) {
     const point = (0, import_feedback_kit_core.normalizePin)(clientPoint, this.getViewport());
+    if (this.onPick) {
+      this.onPick(describeElement(element), point);
+      return;
+    }
     this.popup = {
       element: describeElement(element),
       point,
@@ -426,6 +482,26 @@ var ElementPickingController = class {
     this.popup = null;
     this.emit();
   }
+  /**
+   * 제출된 제보를 마커로 남긴다. 모달 경로에서 쓴다 — 마커 생성이 팝업 저장 안에만
+   * 있으면, 리포트 모달로 보낸 지목 제보는 화면에 흔적이 남지 않는다("보냈는지 알 수
+   * 없다"가 이 모드가 없애려던 불편이다).
+   */
+  noteSubmitted(report, delivered) {
+    if (!report.element && !report.pin) return;
+    const pathname = this.getPathname();
+    const marker = {
+      id: report.clientSubmissionId,
+      x: report.pin?.x ?? 0,
+      y: report.pin?.y ?? 0,
+      selector: report.element?.selector ?? null,
+      comment: report.comment,
+      status: delivered ? "done" : "pending",
+      at: report.createdAt
+    };
+    this.markers = this.store.upsert(pathname, marker);
+    this.emit();
+  }
   /**
    * 주석 저장. 마커를 먼저 "전송 중"으로 찍고 나서 보낸다 — 사용자는 결과를 기다리지 않고
    * 다음 요소로 넘어갈 수 있어야 한다.
@@ -523,6 +599,30 @@ function payload(dataUrl) {
 function isOwnUi2(node) {
   return node.hasAttribute?.(OWN_UI_ATTR) === true || node.closest?.(`[${OWN_UI_ATTR}]`) !== null;
 }
+function freezeCanvases(source, clone) {
+  const originals = source.querySelectorAll("canvas");
+  const clones = clone.querySelectorAll("canvas");
+  for (let index = 0; index < originals.length && index < clones.length; index++) {
+    const from = originals[index];
+    const to = clones[index];
+    let dataUrl;
+    try {
+      dataUrl = from.toDataURL("image/png");
+    } catch {
+      continue;
+    }
+    if (!dataUrl.startsWith("data:image") || dataUrl.length < 64) continue;
+    const box = from.getBoundingClientRect();
+    if (box.width < 1 || box.height < 1) continue;
+    const image = clone.createElement("img");
+    image.src = dataUrl;
+    image.setAttribute("style", to.getAttribute("style") ?? "");
+    image.style.width = `${box.width}px`;
+    image.style.height = `${box.height}px`;
+    image.className = to.className;
+    to.replaceWith(image);
+  }
+}
 var captureWebScreenshot = async () => {
   const doc = globalThis.document;
   const view = doc?.defaultView;
@@ -540,6 +640,8 @@ var captureWebScreenshot = async () => {
       scale: Math.min(2, Math.max(1, view.devicePixelRatio || 1)),
       // 위젯 자신의 UI 는 결과에서 뺀다.
       ignoreElements: isOwnUi2,
+      // 캔버스(Rive·차트 등)는 이미지로 바꿔 넘긴다 — freezeCanvases 주석 참고.
+      onclone: (cloned) => freezeCanvases(doc, cloned),
       // 외부 이미지가 CORS 를 안 열어두면 그것 때문에 전체가 실패할 수 있다.
       // 못 가져오는 리소스는 건너뛰고 나머지를 그린다.
       useCORS: true,
@@ -580,13 +682,21 @@ var reencodeWebScreenshot = async (shot, quality) => {
 var import_feedback_kit_core2 = require("@solhun/feedback-kit-core");
 function createWebWidget(opts) {
   const store = opts.store ?? new MarkerStore();
+  let widgetRef = null;
   const picking = new ElementPickingController({
     queue: opts.queue,
     createReport: opts.createReport,
     store,
     getPathname: opts.getPathname,
     doc: opts.doc,
-    getViewport: opts.getViewport
+    getViewport: opts.getViewport,
+    // 요소를 고르면 인라인 팝업이 아니라 **리포트 모달**을 연다.
+    // 코멘트만 받던 팝업과 달리 스크린샷·우선순위까지 같은 화면에서 받는다.
+    // 모드는 켜진 채로 둬서 한 번 켜고 여러 요소를 연달아 지목할 수 있다.
+    onPick: (element, point) => {
+      void widgetRef?.openReport({ element });
+      widgetRef?.modal.setPin(point);
+    }
   });
   const widget = new import_feedback_kit_core2.WidgetController({
     ...opts,
@@ -600,6 +710,14 @@ function createWebWidget(opts) {
       else picking.stop();
     }
   });
+  widgetRef = widget;
+  const originalSubmit = widget.submitReport.bind(widget);
+  widget.submitReport = async () => {
+    const outcome = await originalSubmit();
+    const report = widget.modal.getLastReport();
+    if (report?.element) picking.noteSubmitted(report, outcome?.delivered === true);
+    return outcome;
+  };
   picking.restore();
   return {
     widget,
@@ -1404,6 +1522,8 @@ function webContextProviders() {
   isOwnUi,
   normalizePin,
   parseSourceAttr,
+  reactComponentPath,
+  reactComponentSummary,
   reencodeWebScreenshot,
   resolveConfig,
   shouldShowWidget,