I am trying to implement a web-based rich text editor that will automatically decorate the user's text while he's typing (think spellcheck).
The issue is that the server only processes raw text, and returns annotations with their index + length in the raw text.
So the complete flow must look like :
For step one I am using Rangy and especially the TextRange module. However for step 3, I can't find a proper way to convert text indices to their corresponding HTML node + offset.
I'm looking for a solution that would be quite robust, that can handle unicode characters, words that are cut in middle by a tag, or any other weird HTML structure.
FYI I am using Pell rich editor but the problem is the same with any contenteditable
-based editor, and if another one solves this poblem I will happily switch.
What's the best way to achieve this goal?
Turns out I totally missed the selectCharacters()
method from Rangy which solves this problem.
const content = document.getElementById("content");
const range = rangy.createRange();
// indexes are in unicode code points, not bytes
range.selectCharacters(content, /* from */ 0, /* to */ 5);