fix(Mention): Fix overlay positioned incorrectly with multi-line text that have text wrapping

[deepan]

Fixes: #248

The current calculatePosition implementation does not account for line wrapping in lines before the last line, which causes an incorrect vertical (Y-axis) offset.

While we could extend calculatePosition to handle wrapping for all lines, this approach would still be error prone. Our calculations rely on estimating line breaks by dividing character width by the text area width, which can differ from the browser’s actual text-wrapping behaviour.

To avoid this mismatch, this PR introduces a more reliable approach using a mirror div. The mirror contains three span elements: the text before the trigger character, the trigger character itself, and the text after it. By measuring the trigger character’s offset relative to the text area, we can determine the overlay position accurately, independent of line wrapping.

Attaching a video of the fixed version for reference

Screen.Recording.2026-01-08.at.8.43.29.PM.mov

[vercel]

@deepan is attempting to deploy a commit to the sadmann7 Team on Vercel.

A member of the Team first needs to authorize it.