I’ve recently become fascinated with how tools like LanguageTool and Grammarly show red underlines on mispelled words on the screen. I’d like to do something similar but to show rich popovers with things like synonyms on hover of a word after first showing an underline on said word.
I know Grammarly is using the Shadow DOM with slots to wrap the textarea, but I still can’t tell how they’re able to (efficiently) determine the position of a specific word in the textarea. LanguageTool doesn’t use the Shadow DOM.
Neither duplicate show cloned HTML when I inspect it, which I thought they might in order to some how break the text into tokens that they could get bounding rects for — but that doesn’t appear to be it.
The result of using <grammarly-editor-plugin><textarea></textarea></grammarly-editor-plugin>
I tried using the Canvas API to get the dimensions of a specific word, but that isn’t enough to determine its position in the textarea because the word could be on a line greater than the first.
In order to make this approach work, they have to be getting all the words in the textarea, computing their dimensions, and using the dimensions of the textarea to determine which line a target word is in the textarea; together with the dimensions, specifically the width, of the word, they would then have the x & y positions within the textarea. However, this seems too expensive and slow to pull off as fast as their underlines appear to show.
I could go with contenteditable by just wrapping each word in its own span, but that seems less than ideal.
Does anyone else know how else they could be able to determine the X & Y position of a word in a textarea.