1

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?

my code

I'll sanitize the div data after solving the issue.

Karim
  • 103
  • 4
  • I think you want to create an editor? Don't think it's possible, you can check out on https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable. Even if it's dangerously set html, the text displayed in DIV are still sanitized, which may not be what you do expect. You need to run document.execCommand well implemented in all browsers. Hopefully you are able to dig deeper. – Han May 31 '22 at 09:38

0 Answers0