phuocng / mirror-a-text-area Goto Github PK

(Hi. Thank you for putting all these interesting articles together.)
I believe there's an issue with the mirroring from the first article, and this issue find its way in the next parts as well.
Although you're setting the scrollTop of the mirrored div to the scrollTop of the textarea on scroll, it's still going out of sync for some reasons once one or more empty new lines are entered at the bottom of the textarea.
Here's a screenshot of the issue:

I just typed a few more "you\n\n"s so that the area gets a scrollbar, and then I scrolled up a bit.
I don't know why this is happening yet, but it's obviously not expected.
I've encountered and reproduced this in my own code too, when I was trying your first article (just doing the mirroring). I just used a red color (any color other than transparent works as well) instead of transparent, and it's in sync on scroll, however, as soon as I entered a newline at the last line, it went out of sync.

I have a use case to show the suggestions inline upon hovering the highlighted word. I tried with higher z-index to mirrored/highlight div but it stopping me from inputting into text area itself. Any other way to add the mouse events to delegate to mirrored/highlight div so that we can show suggestions like grammarly extension ?

Example: when I hover on a mark tag/highlighted content it should me a suggestions like grammarly which adds card and user can select the suggestion, just like mention, for this we need to delegate the move events to mirrored div.

These are screenshots of the issue:

I guess the root of this issue is related to the other issue I opened here: #11 Because this is again happening towards the end of the textarea. I.e., if I start from top and go towards the bottom, line numbers remain aligned for most of the path, however, as soon as it gets to the last lines, the line numbers don't move up with the scrolled lines anymore (which is in my opinion, very similar to what happened in the last issue I opened.)