π΅ F**KING FINALLY. The DIY @mention autocomplete feature is complete. Managed to find a way to track xy coords of caret in textarea, so that the dropdown tooltip will pop up just under the text when user types "@"
That was some crazy Javascript gymnastics. As imperative programming as it can get. Some dev notes on how I did it so that I can remember:
* Create a separate (invisible) element and fill it with textarea content from start to the cursor position. This 'clone' is for making measurements, using Element.getClientRects(). What's important is that it's an inline element, because each line has it's own boundary within a multiline paragraph.
* Textarea and the clone should have matching CSS (font properties, padding/margin/border and width).
* Then stack these elements on top of each other. Make sure the textarea isn't obscured by clone.
* The "xy" div is meant to mirror the cursor, just an indicator for testing. Also where the tooltip is anchored to.
Find code here:
https://codepen.io/jasonleow/pen/jOVaeXd
* Create a separate (invisible) element and fill it with textarea content from start to the cursor position. This 'clone' is for making measurements, using Element.getClientRects(). What's important is that it's an inline element, because each line has it's own boundary within a multiline paragraph.
* Textarea and the clone should have matching CSS (font properties, padding/margin/border and width).
* Then stack these elements on top of each other. Make sure the textarea isn't obscured by clone.
* The "xy" div is meant to mirror the cursor, just an indicator for testing. Also where the tooltip is anchored to.
Find code here:
https://codepen.io/jasonleow/pen/jOVaeXd
Jason Leow
Author
@FaizMetronome thank you! Perseverance indeed⦠never took this long with a feature (~2wks)
There's certainly something to be proud of when it comes to perseverance. Good job @jasonleow!
Jason Leow
Author
@jasontxf thanks! It's the longest I ever took to make a feature, and likely hardest too. And yes, I didn't expect it to be this complicated either - if i had known, maybe i might not have tried in the first place lol
Please sign in to leave a comment.