Retain caret position while dynamically changing the rendered html

[tnrich]

Hey there,

I'm wondering if anyone has a good solution for retaining the correct caret position when the html being rendered is being changed dynamically (such as adding classes to certain elements or bolding/italicizing certain letters as the user types).

Here is the example codesandbox showing how the current library fails to retain the correct caret position as the incoming html changes:

https://codesandbox.io/s/simple-rich-text-editor-in-react-forked-q83ue?file=/src/index.js

In this example I'm modifying the class="yay" to add a 1 in front of it each time something changes. This causes the caret to jump to the end of the text.

Thanks for the help!

[GodAlmighty990]

Did you find a solution for this?

[khangt1k25]

I am facing exactly this problem: the caret jump to the end when typing. Did you find some ways to fix this?