Function measureCursorPosition

web/components/collaboration/CursorGhost.tsx:29–63

* Approximates pixel position of a text offset inside a textarea. * Uses a hidden mirror div that matches the textarea's styling.

(
  textarea: HTMLTextAreaElement,
  offset: number
)

 * Uses a hidden mirror div that matches the textarea's styling.
 */
function measureCursorPosition(
  textarea: HTMLTextAreaElement,
  offset: number
): { top: number; left: number } {
  const mirror = document.createElement("div");
  const computed = window.getComputedStyle(textarea);

  mirror.style.position = "absolute";
  mirror.style.visibility = "hidden";
  mirror.style.whiteSpace = "pre-wrap";
  mirror.style.wordWrap = "break-word";
  mirror.style.width = computed.width;
  mirror.style.font = computed.font;
  mirror.style.lineHeight = computed.lineHeight;
  mirror.style.padding = computed.padding;
  mirror.style.border = computed.border;
  mirror.style.boxSizing = computed.boxSizing;

  const text = textarea.value.slice(0, offset);
  mirror.textContent = text;

  const span = document.createElement("span");
  span.textContent = "\u200b"; // zero-width space
  mirror.appendChild(span);

  document.body.appendChild(mirror);
  const rect = textarea.getBoundingClientRect();
  const spanRect = span.getBoundingClientRect();
  document.body.removeChild(mirror);

  return {
    top: spanRect.top - rect.top + textarea.scrollTop,
    left: spanRect.left - rect.left,
  };
}

// ─── CursorGhost ─────────────────────────────────────────────────────────────