web-remarq 0.1.2 → 0.1.4

package/dist/web-remarq.global.global.js

@@ -187,8 +187,17 @@ var WebRemarq = (() => {
     return id;
   }
   function getTextContent(el) {
-    var _a, _b;
-    const text = (_b = (_a = el.textContent) == null ? void 0 : _a.trim()) != null ? _b : null;
+    var _a, _b, _c;
+    let text = "";
+    for (const node of Array.from(el.childNodes)) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        text += (_a = node.textContent) != null ? _a : "";
+      }
+    }
+    text = text.trim();
+    if (!text && el.children.length <= 3) {
+      text = (_c = (_b = el.textContent) == null ? void 0 : _b.trim()) != null ? _c : "";
+    }
     if (!text) return null;
     return text.length > TEXT_MAX_LENGTH ? text.slice(0, TEXT_MAX_LENGTH) : text;
   }
@@ -477,7 +486,7 @@ var WebRemarq = (() => {
 .remarq-marker[data-status="resolved"] { background: var(--remarq-resolved); opacity: 0.7; }
 
 .remarq-popup {
-  position: fixed;
+  position: absolute;
   z-index: 2147483647;
   width: 300px;
   background: var(--remarq-bg);
@@ -780,13 +789,13 @@ var WebRemarq = (() => {
       this.exportMenu = document.createElement("div");
       this.exportMenu.className = "remarq-export-menu";
       const mdBtn = document.createElement("button");
-      mdBtn.textContent = "Markdown (clipboard)";
+      mdBtn.textContent = "Markdown (file)";
       mdBtn.addEventListener("click", () => {
         this.callbacks.onExportMd();
         this.closeExportMenu();
       });
       const jsonBtn = document.createElement("button");
-      jsonBtn.textContent = "JSON (file)";
+      jsonBtn.textContent = "JSON (clipboard)";
       jsonBtn.addEventListener("click", () => {
         this.callbacks.onExportJson();
         this.closeExportMenu();
@@ -819,7 +828,6 @@ var WebRemarq = (() => {
       container.appendChild(this.tooltipEl);
     }
     show(target) {
-      var _a;
       try {
         const rect = target.getBoundingClientRect();
         this.overlayEl.style.display = "block";
@@ -827,13 +835,7 @@ var WebRemarq = (() => {
         this.overlayEl.style.left = `${rect.left}px`;
         this.overlayEl.style.width = `${rect.width}px`;
         this.overlayEl.style.height = `${rect.height}px`;
-        const tag = target.tagName.toLowerCase();
-        const text = ((_a = target.textContent) == null ? void 0 : _a.trim().slice(0, 30)) || "";
-        const dataAnnotate = target.getAttribute("data-annotate");
-        let label = `<${tag}>`;
-        if (text) label += ` "${text}"`;
-        if (dataAnnotate) label += ` [${dataAnnotate}]`;
-        this.tooltipEl.textContent = label;
+        this.tooltipEl.textContent = describeElement(target);
         this.tooltipEl.style.display = "block";
         this.tooltipEl.style.top = `${rect.top - 28}px`;
         this.tooltipEl.style.left = `${rect.left}px`;
@@ -854,6 +856,43 @@ var WebRemarq = (() => {
       this.tooltipEl.remove();
     }
   };
+  function describeElement(el) {
+    const tag = el.tagName.toLowerCase();
+    const parts = [`<${tag}>`];
+    const dataAnnotate = el.getAttribute("data-annotate");
+    const dataTestId = el.getAttribute("data-testid") || el.getAttribute("data-test") || el.getAttribute("data-cy");
+    if (dataAnnotate) {
+      parts.push(`[${dataAnnotate}]`);
+    } else if (dataTestId) {
+      parts.push(`[${dataTestId}]`);
+    }
+    if (el.id) {
+      parts.push(`#${el.id}`);
+    }
+    const classes = Array.from(el.classList).filter((c) => !c.match(/^(sc-|css-)/) && !c.match(/^[a-zA-Z0-9]{8,}$/) && !c.match(/__[a-zA-Z0-9]{3,}$/)).slice(0, 2);
+    if (classes.length) {
+      parts.push(`.${classes.join(".")}`);
+    }
+    const directText = getDirectText(el);
+    if (directText) {
+      parts.push(`"${directText}"`);
+    }
+    return parts.join(" ");
+  }
+  function getDirectText(el) {
+    var _a, _b, _c;
+    let text = "";
+    for (const node of Array.from(el.childNodes)) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        text += (_a = node.textContent) != null ? _a : "";
+      }
+    }
+    text = text.trim();
+    if (!text && el.children.length <= 2) {
+      text = (_c = (_b = el.textContent) == null ? void 0 : _b.trim()) != null ? _c : "";
+    }
+    return text.slice(0, 30);
+  }
 
   // src/ui/popup.ts
   var POPUP_WIDTH = 300;
@@ -900,7 +939,10 @@ var WebRemarq = (() => {
       popup2.appendChild(actions);
       this.container.appendChild(popup2);
       this.popupEl = popup2;
-      this.adjustPosition(popup2, position);
+      requestAnimationFrame(() => {
+        this.adjustPosition(popup2, position);
+        textarea.focus();
+      });
       this.keyHandler = (e) => {
         if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
           const comment = textarea.value.trim();
@@ -914,7 +956,6 @@ var WebRemarq = (() => {
         }
       };
       document.addEventListener("keydown", this.keyHandler);
-      requestAnimationFrame(() => textarea.focus());
     }
     showDetail(info, position, callbacks) {
       this.hide();
@@ -957,7 +998,9 @@ var WebRemarq = (() => {
       popup2.appendChild(actions);
       this.container.appendChild(popup2);
       this.popupEl = popup2;
-      this.adjustPosition(popup2, position);
+      requestAnimationFrame(() => {
+        this.adjustPosition(popup2, position);
+      });
       this.keyHandler = (e) => {
         if (e.key === "Escape") {
           this.hide();
@@ -980,22 +1023,22 @@ var WebRemarq = (() => {
       this.hide();
     }
     adjustPosition(popup2, position) {
-      const popupRect = popup2.getBoundingClientRect();
-      const viewH = window.innerHeight;
-      const viewW = window.innerWidth;
+      const popupHeight = popup2.offsetHeight;
+      const viewportBottom = window.scrollY + window.innerHeight;
+      const viewportRight = window.scrollX + window.innerWidth;
       let top = position.top;
       let left = position.left;
-      if (top + popupRect.height > viewH - POPUP_MARGIN) {
-        top = position.top - popupRect.height - 16;
+      if (top + popupHeight > viewportBottom - POPUP_MARGIN) {
+        top = position.anchorBottom - popupHeight;
       }
-      if (top < POPUP_MARGIN) {
-        top = POPUP_MARGIN;
+      if (top < window.scrollY + POPUP_MARGIN) {
+        top = window.scrollY + POPUP_MARGIN;
       }
-      if (left + POPUP_WIDTH > viewW - POPUP_MARGIN) {
-        left = viewW - POPUP_WIDTH - POPUP_MARGIN;
+      if (left + POPUP_WIDTH > viewportRight - POPUP_MARGIN) {
+        left = viewportRight - POPUP_WIDTH - POPUP_MARGIN;
       }
-      if (left < POPUP_MARGIN) {
-        left = POPUP_MARGIN;
+      if (left < window.scrollX + POPUP_MARGIN) {
+        left = window.scrollX + POPUP_MARGIN;
       }
       popup2.style.top = `${top}px`;
       popup2.style.left = `${left}px`;
@@ -1198,6 +1241,25 @@ var WebRemarq = (() => {
   var unsubRoute = null;
   var refreshScheduled = false;
   var elementCache = /* @__PURE__ */ new Map();
+  function describeTarget(el) {
+    var _a, _b, _c, _d;
+    const parts = [];
+    if (el.id) parts.push(`#${el.id}`);
+    const dataAnnotate = el.getAttribute((_a = options.dataAttribute) != null ? _a : "data-annotate");
+    const dataTestId = el.getAttribute("data-testid") || el.getAttribute("data-test") || el.getAttribute("data-cy");
+    if (dataAnnotate) parts.push(`[${dataAnnotate}]`);
+    else if (dataTestId) parts.push(`[${dataTestId}]`);
+    const classes = Array.from(el.classList).filter((c) => !c.match(/^(sc-|css-)/) && !c.match(/^[a-zA-Z0-9]{8,}$/) && !c.match(/__[a-zA-Z0-9]{3,}$/)).slice(0, 2);
+    if (classes.length) parts.push(`.${classes.join(".")}`);
+    let text = "";
+    for (const node of Array.from(el.childNodes)) {
+      if (node.nodeType === Node.TEXT_NODE) text += (_b = node.textContent) != null ? _b : "";
+    }
+    text = text.trim();
+    if (!text && el.children.length <= 2) text = (_d = (_c = el.textContent) == null ? void 0 : _c.trim()) != null ? _d : "";
+    if (text) parts.push(`"${text.slice(0, 30)}"`);
+    return parts.join(" ") || "";
+  }
   function currentRoute() {
     return location.pathname + location.hash;
   }
@@ -1255,7 +1317,6 @@ var WebRemarq = (() => {
     });
   }
   function handleInspectClick(e) {
-    var _a, _b;
     if (!inspecting) return;
     const target = e.target;
     if (!target || target.closest("[data-remarq-theme]")) return;
@@ -1267,11 +1328,12 @@ var WebRemarq = (() => {
     popup.show(
       {
         tag: target.tagName.toLowerCase(),
-        text: (_b = (_a = target.textContent) == null ? void 0 : _a.trim().slice(0, 30)) != null ? _b : ""
+        text: describeTarget(target)
       },
       {
-        top: rect.bottom + 8,
-        left: rect.left
+        top: window.scrollY + rect.bottom + 8,
+        left: window.scrollX + rect.left,
+        anchorBottom: window.scrollY + rect.top - 8
       },
       (comment) => {
         const fp = createFingerprint(target, {
@@ -1283,6 +1345,7 @@ var WebRemarq = (() => {
           comment,
           fingerprint: fp,
           route: currentRoute(),
+          viewport: `${window.innerWidth}x${window.innerHeight}`,
           timestamp: Date.now(),
           status: "pending"
         };
@@ -1326,7 +1389,11 @@ var WebRemarq = (() => {
         comment: ann.comment,
         status: ann.status
       },
-      { top: rect.bottom + 8, left: rect.left },
+      {
+        top: window.scrollY + rect.bottom + 8,
+        left: window.scrollX + rect.left,
+        anchorBottom: window.scrollY + rect.top - 8
+      },
       {
         onResolve: () => {
           storage.update(ann.id, { status: "resolved" });
@@ -1353,26 +1420,27 @@ var WebRemarq = (() => {
       if (fp.textContent) desc += ` "${fp.textContent}"`;
       if (fp.parentAnchor) desc += ` (${fp.parentAnchor})`;
       if (fp.dataAnnotate) desc += fp.parentAnchor ? ` > ${fp.dataAnnotate}` : ` (${fp.dataAnnotate})`;
-      lines.push(`${i + 1}. [${ann.status}] ${desc}: "${ann.comment}"`);
+      const viewport = ann.viewport ? ` @${ann.viewport}` : "";
+      lines.push(`${i + 1}. [${ann.status}]${viewport} ${desc}: "${ann.comment}"`);
     });
     const text = lines.join("\n");
-    try {
-      navigator.clipboard.writeText(text);
-    } catch (e) {
-      console.warn("[web-remarq] Clipboard write failed");
-    }
-  }
-  function exportJSON() {
-    const data = storage.exportJSON();
-    const json = JSON.stringify(data, null, 2);
-    const blob = new Blob([json], { type: "application/json" });
+    const blob = new Blob([text], { type: "text/markdown" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = `remarq-annotations-${Date.now()}.json`;
+    a.download = `remarq-annotations-${Date.now()}.md`;
     a.click();
     URL.revokeObjectURL(url);
   }
+  function exportJSON() {
+    const data = storage.exportJSON();
+    const json = JSON.stringify(data, null, 2);
+    try {
+      navigator.clipboard.writeText(json);
+    } catch (e) {
+      console.warn("[web-remarq] Clipboard write failed");
+    }
+  }
   function setupMutationObserver() {
     mutationObserver = new MutationObserver((mutations) => {
       for (const m of mutations) {