Tint hashtags in a textarea with a mirror div, not contenteditable

To highlight #hashtags/@mentions in an editable caption box (e.g. a sandboxed widget iframe where only .value/.textContent may touch the DOM), keep the textarea and put an absolutely positioned mirror div underneath with identical font, padding, white-space:pre-wrap and overflow-wrap:anywhere; make the textarea text transparent with caret-color set, and rebuild the mirror from text nodes plus spans on every input. Append a zero-width space so a trailing newline keeps its height, hide the textarea scrollbar (scrollbar-width:none) so wrap widths stay identical, and sync mirror.scrollTop on a capture-phase scroll listener once the box hits its max height. Match tags only at a word start (capture the preceding char, since ES5 has no lookbehind) or 'me@x.com' gets tinted as a mention. For auto-grow, use rows=1, measure scrollHeight after height:auto, cap at N line-heights, and re-measure from a ResizeObserver on the container width: a host that lays the iframe out narrow first otherwise leaves the box huge.