overlay.js

// Overlay system for highlighting PII in input fields

// WeakMaps to track overlays, ignore lists, and entity snapshots per element
const overlayMap = new WeakMap();
const ignoreMap = new WeakMap();
const snapshotMap = new WeakMap();

/**
 * True if point is inside a DOMRect.
 */
function pointInRect(x, y, rect) {
  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
}

/**
 * Hit-test a span using line-fragment rects for wrapped text.
 */
function isPointOverSpan(spanEl, x, y) {
  const rects = spanEl.getClientRects();
  if (!rects || rects.length === 0) {
    return pointInRect(x, y, spanEl.getBoundingClientRect());
  }

  for (const rect of rects) {
    if (pointInRect(x, y, rect)) return true;
  }

  return false;
}

/**
 * Get or create the ignore set for an element
 */
function getIgnoreSet(el) {
  let s = ignoreMap.get(el);
  if (!s) {
    s = new Set();
    ignoreMap.set(el, s);
  }
  return s;
}

/**
 * Get entity snapshot for an element
 */
function getSnapshot(el) {
  return snapshotMap.get(el);
}

/**
 * Set entity snapshot for an element
 */
function setSnapshot(el, snapshot) {
  snapshotMap.set(el, snapshot);
}

/**
 * Create and attach overlay to an input element
 */
function ensureOverlay(el) {
  if (overlayMap.has(el)) return overlayMap.get(el);

  const wrapper = document.createElement("div");
  wrapper.style.position = "relative";
  wrapper.style.width = "100%";

  // Preserve display mode for contenteditable elements
  const isContentEditable =
    el.isContentEditable || el.getAttribute("contenteditable") === "true";
  if (isContentEditable) {
    const cs = getComputedStyle(el);
    wrapper.style.display = cs.display;
  }

  const parent = el.parentNode;
  parent.insertBefore(wrapper, el);
  wrapper.appendChild(el);

  const overlay = document.createElement("div");
  overlay.className = "redactosaurus-overlay";

  const cs = getComputedStyle(el);

  // Copy font properties individually to ensure exact match (prevents line drift)
  overlay.style.fontFamily = cs.fontFamily;
  overlay.style.fontSize = cs.fontSize;
  overlay.style.fontWeight = cs.fontWeight;
  overlay.style.fontStyle = cs.fontStyle;

  // Calculate actual line height in pixels to prevent accumulation errors
  let lineHeight = cs.lineHeight;
  if (lineHeight === "normal" || lineHeight.match(/^\d+(\.\d+)?$/)) {
    // If it's "normal" or a unitless number, compute the actual pixel value
    const fontSize = parseFloat(cs.fontSize);
    const ratio = lineHeight === "normal" ? 1.2 : parseFloat(lineHeight);
    lineHeight = Math.round(fontSize * ratio) + "px";
  }
  overlay.style.lineHeight = lineHeight;

  overlay.style.letterSpacing = cs.letterSpacing;
  overlay.style.wordSpacing = cs.wordSpacing;

  // Copy spacing properties exactly
  overlay.style.paddingTop = cs.paddingTop;
  overlay.style.paddingRight = cs.paddingRight;
  overlay.style.paddingBottom = cs.paddingBottom;
  overlay.style.paddingLeft = cs.paddingLeft;
  overlay.style.margin = "0";

  // Copy box and border properties
  overlay.style.border = cs.border;
  overlay.style.borderRadius = cs.borderRadius;
  overlay.style.boxSizing = cs.boxSizing;

  // Copy text positioning
  overlay.style.textAlign = cs.textAlign;
  overlay.style.textIndent = cs.textIndent;
  overlay.style.verticalAlign = cs.verticalAlign;

  overlay.style.whiteSpace = "pre-wrap";
  overlay.style.wordWrap = "break-word";
  overlay.style.overflow = "hidden";

  wrapper.appendChild(overlay);

  const syncScroll = () => {
    if (overlay) {
      overlay.scrollTop = el.scrollTop;
      overlay.scrollLeft = el.scrollLeft;
    }
  };
  el.addEventListener("scroll", syncScroll);

  syncScroll();

  const obj = { wrapper, overlay, syncScroll, bound: false };
  overlayMap.set(el, obj);
  return obj;
}

/**
 * Remove overlay from an element
 */
function removeOverlay(el) {
  const obj = overlayMap.get(el);
  if (!obj) return;

  const orig = el.dataset.redactosaurusOrigColor;
  if (orig) el.style.color = orig;
  el.style.caretColor = "";

  const { wrapper, overlay } = obj;
  if (overlay?.parentNode) overlay.parentNode.removeChild(overlay);

  if (wrapper?.parentNode) {
    wrapper.parentNode.insertBefore(el, wrapper);
    wrapper.parentNode.removeChild(wrapper);
  }

  overlayMap.delete(el);
}

/**
 * Render underlined PII entities in the overlay
 */
function renderUnderlineOverlay(text, entities, overlayEl, ignoredSet) {
  if (!entities || entities.length === 0) {
    overlayEl.innerHTML = escapeHtml(text);
    return;
  }

  const sorted = [...entities].sort((a, b) => a.start - b.start);
  let out = "";
  let cur = 0;

  for (let i = 0; i < sorted.length; i++) {
    const e = sorted[i];
    const key = ignoreKey(e);

    if (ignoredSet.has(key)) continue;
    if (e.start < cur) continue;

    out += escapeHtml(text.slice(cur, e.start));

    const snippet = text.slice(e.start, e.end);
    // Store entity data directly to avoid index mismatch.
    const entityData = JSON.stringify({
      type: e.type,
      start: e.start,
      end: e.end,
      text: e.text,
    });
    out += `<span class="redactosaurus-underline" data-entity='${escapeHtml(entityData)}'>${escapeHtml(snippet)}</span>`;

    cur = e.end;
  }

  out += escapeHtml(text.slice(cur));
  overlayEl.innerHTML = out;
}

/**
 * Bind hover events to overlay spans
 * Since overlay has pointer-events: none, we detect hovers on the input element itself
 */
function bindOverlayEvents(overlayEl, el, entities, ignoredSet) {
  // Remove any existing mousemove listener
  if (el._redactosaurusMouseMove) {
    el.removeEventListener("mousemove", el._redactosaurusMouseMove);
  }

  // Create a mousemove handler to detect when mouse is over PII spans
  const mouseMoveHandler = (e) => {
    const spans = overlayEl.querySelectorAll(".redactosaurus-underline");
    let foundSpan = null;
    let foundEntity = null;

    // Check which span (if any) is under the mouse
    for (const spanEl of spans) {
      if (isPointOverSpan(spanEl, e.clientX, e.clientY)) {
        foundSpan = spanEl;
        try {
          foundEntity = JSON.parse(spanEl.dataset.entity);
          const key = ignoreKey(foundEntity);
          if (ignoredSet.has(key)) {
            foundSpan = null;
            foundEntity = null;
            continue;
          }
        } catch (err) {
          console.error("[Redactosaurus] Failed to parse entity data:", err);
        }
        break;
      }
    }

    if (foundSpan && foundEntity) {
      cancelHideTooltip();
      showGlobalTooltip(foundSpan, foundEntity, el, {
        clientX: e.clientX,
        clientY: e.clientY,
      });
    } else {
      scheduleHideTooltip();
    }
  };

  el._redactosaurusMouseMove = mouseMoveHandler;
  el.addEventListener("mousemove", mouseMoveHandler);
}