web-remarq 0.1.2 → 0.1.4

package/dist/index.js

@@ -164,8 +164,17 @@ function getStableId(el) {
   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;
 }
@@ -454,7 +463,7 @@ var CSS = `
 .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);
@@ -757,13 +766,13 @@ var Toolbar = class {
     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();
@@ -796,7 +805,6 @@ var Overlay = class {
     container.appendChild(this.tooltipEl);
   }
   show(target) {
-    var _a;
     try {
       const rect = target.getBoundingClientRect();
       this.overlayEl.style.display = "block";
@@ -804,13 +812,7 @@ var Overlay = class {
       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`;
@@ -831,6 +833,43 @@ var Overlay = class {
     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;
@@ -877,7 +916,10 @@ var Popup = class {
     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();
@@ -891,7 +933,6 @@ var Popup = class {
       }
     };
     document.addEventListener("keydown", this.keyHandler);
-    requestAnimationFrame(() => textarea.focus());
   }
   showDetail(info, position, callbacks) {
     this.hide();
@@ -934,7 +975,9 @@ var Popup = class {
     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();
@@ -957,22 +1000,22 @@ var Popup = class {
     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`;
@@ -1175,6 +1218,25 @@ var mutationObserver = null;
 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;
 }
@@ -1232,7 +1294,6 @@ function scheduleRefresh() {
   });
 }
 function handleInspectClick(e) {
-  var _a, _b;
   if (!inspecting) return;
   const target = e.target;
   if (!target || target.closest("[data-remarq-theme]")) return;
@@ -1244,11 +1305,12 @@ function handleInspectClick(e) {
   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, {
@@ -1260,6 +1322,7 @@ function handleInspectClick(e) {
         comment,
         fingerprint: fp,
         route: currentRoute(),
+        viewport: `${window.innerWidth}x${window.innerHeight}`,
         timestamp: Date.now(),
         status: "pending"
       };
@@ -1303,7 +1366,11 @@ function handleMarkerClick(annotationId) {
       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" });
@@ -1330,26 +1397,27 @@ function exportMarkdown() {
     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) {