utils.js

// DOM utility functions

const TEXT_INPUT_TYPES = new Set(["", "text", "search", "email", "url", "tel"]);
const EDITABLE_DESCENDANT_SELECTOR = [
  "textarea",
  "input[type='text']",
  "input[type='search']",
  "input[type='email']",
  "input[type='url']",
  "input[type='tel']",
  "input:not([type])",
  "[contenteditable='true']",
  "[contenteditable='plaintext-only']",
  ".ProseMirror",
  ".ql-editor",
  "[data-lexical-editor='true']",
  "[data-slate-editor='true']",
].join(", ");

/**
 * Check if element is part of Google AI Search chat (should be excluded)
 */
function isGoogleAISearch(el) {
  // Check if on Google domain
  if (!window.location.hostname.includes("google.")) return false;

  // Check for Google AI Search specific elements/containers
  // Google AI Search uses specific classes and attributes
  let current = el;
  while (current && current !== document.body) {
    const classList = current.classList;
    const id = current.id;

    // Check for AI Overview/AI mode specific containers
    if (
      classList &&
      (classList.contains("aAyTCc") || // AI Overview container
        classList.contains("IThcWe") || // AI chat input area
        classList.contains("eqAnXd") || // AI response area
        current.hasAttribute("data-lb") || // Gemini chat
        current.hasAttribute("jsname"))
    ) {
      return true;
    }

    // Check if it's the search generative experience
    if (id && (id.includes("gsr") || id.includes("sge"))) {
      return true;
    }

    current = current.parentElement;
  }

  return false;
}

/**
 * Check if element is part of Meta AI (should be excluded due to rendering issues)
 */
function isMetaAI(el) {
  const hostname = window.location.hostname;

  // Check if on Meta AI domain
  if (!hostname.includes("meta.ai")) return false;

  // Meta AI uses contenteditable divs for chat input
  // Exclude all input fields on Meta AI due to overlay alignment issues
  return true;
}

/**
 * Check if element is part of DeepSeek (should be excluded due to rendering issues)
 */
function isDeepSeek(el) {
  const hostname = window.location.hostname;

  // Check if on DeepSeek domain
  if (!hostname.includes("deepseek.com")) return false;

  // Exclude all input fields on DeepSeek due to overlay alignment issues
  return true;
}

const BLOCK_BREAK_TAGS = new Set([
  "ADDRESS",
  "ARTICLE",
  "ASIDE",
  "BLOCKQUOTE",
  "DIV",
  "DL",
  "FIELDSET",
  "FIGCAPTION",
  "FIGURE",
  "FOOTER",
  "FORM",
  "H1",
  "H2",
  "H3",
  "H4",
  "H5",
  "H6",
  "HEADER",
  "HR",
  "LI",
  "MAIN",
  "NAV",
  "OL",
  "P",
  "PRE",
  "SECTION",
  "TABLE",
  "TBODY",
  "TD",
  "TH",
  "THEAD",
  "TR",
  "UL",
]);

/**
 * Return true if element has an enabled contenteditable mode.
 */
function hasEditableContentAttr(el) {
  const attr = el.getAttribute?.("contenteditable");
  if (attr == null) return false;
  const value = String(attr).trim().toLowerCase();
  return value !== "false";
}

/**
 * Return the top-most editable root for a contenteditable subtree.
 */
function getContentEditableRoot(el) {
  let root = el;
  while (root?.parentElement?.isContentEditable) {
    root = root.parentElement;
  }
  return root;
}

/**
 * Find likely editable descendant inside wrapper containers (e.g. role=textbox).
 */
function findEditableDescendant(el) {
  if (!el || typeof el.querySelector !== "function") return null;
  return el.querySelector(EDITABLE_DESCENDANT_SELECTOR);
}

/**
 * Return true for controls we should never attach to.
 */
function isBlockedField(el) {
  if (!el || typeof el.matches !== "function") return true;

  if (el.disabled || el.readOnly) return true;
  if (el.getAttribute("aria-disabled") === "true") return true;
  if (el.closest("[inert]")) return true;

  if (
    el.matches(
      "input[type='password'], input[type='hidden'], input[type='file'], input[type='checkbox'], input[type='radio'], input[type='submit'], input[type='button'], input[type='reset'], select, button",
    )
  ) {
    return true;
  }

  return false;
}

/**
 * Check if an element is visible on the page
 */
function isVisible(el) {
  if (!el) return false;
  const style = window.getComputedStyle(el);
  if (style.visibility === "hidden" || style.display === "none") return false;
  const r = el.getBoundingClientRect();
  return r.width > 30 && r.height > 12;
}

/**
 * Check if an element is a candidate input for PII detection
 */
function isCandidateInput(el) {
  if (!el) return false;
  if (isBlockedField(el)) return false;

  if (el.tagName === "TEXTAREA") return true;
  if (el.tagName === "INPUT") {
    const type = (el.type || "").toLowerCase();
    return TEXT_INPUT_TYPES.has(type);
  }

  if (el.isContentEditable || hasEditableContentAttr(el)) {
    return getContentEditableRoot(el) === el;
  }

  const role = (el.getAttribute?.("role") || "").toLowerCase();
  if (role === "textbox") {
    // Accept role=textbox only when element itself is the editable surface.
    const selfEditable =
      el.tagName === "INPUT" ||
      el.tagName === "TEXTAREA" ||
      el.isContentEditable ||
      hasEditableContentAttr(el);
    return selfEditable;
  }

  if (
    el.matches(
      ".ProseMirror, .ql-editor, [data-lexical-editor='true'], [data-slate-editor='true']",
    )
  ) {
    return true;
  }

  return false;
}

/**
 * Resolve an event target (or descendant node) to the actual editable element.
 */
function resolveCandidateInput(node) {
  if (!node) return null;

  let cur = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
  const visited = new Set();

  while (cur && !visited.has(cur)) {
    visited.add(cur);

    // Wrapper containers may receive events; map them to the actual editor node.
    const role = (cur.getAttribute?.("role") || "").toLowerCase();
    if (
      role === "textbox" &&
      !cur.isContentEditable &&
      !hasEditableContentAttr(cur)
    ) {
      const nested = findEditableDescendant(cur);
      if (nested) {
        const resolvedNested = resolveCandidateInput(nested);
        if (resolvedNested) return resolvedNested;
      }
    }

    if (cur.isContentEditable || hasEditableContentAttr(cur)) {
      const root = getContentEditableRoot(cur);
      if (isCandidateInput(root)) return root;
    }

    if (isCandidateInput(cur)) return cur;

    if (cur.parentElement) {
      cur = cur.parentElement;
      continue;
    }

    const rootNode = cur.getRootNode?.();
    if (rootNode?.host && rootNode.host.nodeType === Node.ELEMENT_NODE) {
      cur = rootNode.host;
      continue;
    }

    break;
  }

  return null;
}

/**
 * Read contenteditable text while preserving intentional spaces.
 * Uses DOM text nodes (not innerText) so leading/trailing spaces are retained.
 */
function readContentEditableText(root) {
  const chunks = [];

  const appendText = (text) => {
    if (!text) return;
    chunks.push(text);
  };

  const appendLineBreak = () => {
    if (chunks.length === 0) return;
    if (!chunks[chunks.length - 1].endsWith("\n")) {
      chunks.push("\n");
    }
  };

  const walk = (node) => {
    if (!node) return;

    if (node.nodeType === Node.TEXT_NODE) {
      appendText(node.nodeValue || "");
      return;
    }

    if (node.nodeType !== Node.ELEMENT_NODE) return;

    const tag = node.tagName;
    if (tag === "BR") {
      appendText("\n");
      return;
    }

    const isBlock = BLOCK_BREAK_TAGS.has(tag);
    if (isBlock) appendLineBreak();

    for (const child of node.childNodes) {
      walk(child);
    }

    if (isBlock) appendLineBreak();
  };

  for (const child of root.childNodes) {
    walk(child);
  }

  let text = chunks.join("");

  // Drop only synthetic final newline introduced by block boundary handling.
  if (text.endsWith("\n")) {
    text = text.slice(0, -1);
  }

  return text;
}

// Text manipulation functions

/**
 * Escape HTML special characters
 */
function escapeHtml(s) {
  return s.replace(
    /[&<>"']/g,
    (c) =>
      ({
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': "&quot;",
        "'": "&#39;",
      })[c],
  );
}

/**
 * Read text content from an element (input, textarea, or contenteditable)
 */
function readText(el) {
  if (el.tagName === "TEXTAREA" || el.tagName === "INPUT") {
    return el.value || "";
  }

  if (el.isContentEditable || hasEditableContentAttr(el)) {
    return readContentEditableText(el);
  }

  return el.textContent ?? el.innerText ?? "";
}

/**
 * Write replacement text to an element and trigger appropriate events
 */
function writeReplace(el, newText) {
  if (el.tagName === "TEXTAREA" || el.tagName === "INPUT") {
    setNativeValue(el, newText);
    triggerInput(el);
    return;
  }
  el.textContent = newText;
  el.dispatchEvent(
    new InputEvent("input", {
      bubbles: true,
      inputType: "insertReplacementText",
      data: null,
    }),
  );
}

/**
 * Set native value on input/textarea (bypassing React/framework overrides)
 */
function setNativeValue(el, value) {
  const proto =
    el.tagName === "TEXTAREA"
      ? window.HTMLTextAreaElement.prototype
      : window.HTMLInputElement.prototype;
  const desc = Object.getOwnPropertyDescriptor(proto, "value");
  const setter = desc && desc.set;
  if (setter) setter.call(el, value);
  else el.value = value;
}

/**
 * Trigger input and change events
 */
function triggerInput(el) {
  el.dispatchEvent(new Event("input", { bubbles: true }));
  el.dispatchEvent(new Event("change", { bubbles: true }));
}

/**
 * Generate unique key for entity (for ignore tracking)
 * Use text+type instead of position so ignores persist across edits
 */
function ignoreKey(e) {
  return `${e.type}|${e.text || ""}`;
}