I've created an editable div in a React app. I'm applying the two-way binding concept to keep React in control of the data in the div. When an input change event on the div occurs, a function will be executed. The function will be responsible to set the div content state. After rendering, The state will be injected to the div dom via dangerouslySetInnerHTML.
I have a problem with the caret position. When you type a text inside the div, the text is displaying backward since the caret is not moving with the text. How do I make my caret behaves like a normal caret in a text editor?
I'll sanitize the div data after solving the issue.