@mention

Internals

The hidden mirror.

To anchor the popover at the caret, the lib runs a hidden <div> next to the textarea — same font, padding, border, line-height — and reads its layout to find the caret's pixel coordinates. Below, the mirror is exposed so you can see what it sees.

type @a — the popover anchors to the mirror's caret span

the mirror div — normally hidden

same font, padding, border, line-height

caret =top0pxleft0pxheight0pxspan.offsetTop / offsetLeft / offsetHeight

Why a mirror

Browsers don't expose textarea caret coordinates directly.

There's no textarea.getCaretRect() API. Range objects only work on contenteditable. The mirror is the general way to compute caret pixels for a textarea — you build a parallel layout that the browser can measure, then read offsets off a zero-width span at the caret position.

The technique predates React: it ships in textarea-caret-position (MIT, 2015) and has been battle-tested across nine years of browser quirks — the Firefox overflowY workaround, the end-of-line non-empty-character contract, the property list a mirror must replicate. The lib ports the math to TypeScript and narrows it to <textarea> only; contenteditable support lands in v0.2 via the Range API instead.