How can I make one object be created on the textarea next to the caret?

Question

JavaScript

In general, I want to know how to know the location of the caret in a textarea and then create another div object on top of it

Answer 1

Replace textarea with div contenteditable=true
Get cursor position by selection.getRange
Insert span with zero-width space into this position
Get span coordinates
Sorry, no links, I'm writing from my phone. But each of these things is easy to google.
(there is a glitch, the spaces disappear somewhere, but I'm too lazy to figure it out)