If any of the styled(e.g <b>, <a>) HTML tags are used in default state, the continuing text comes under those tags only.

If the state has <b>hello/<b> and then we type into the ContentEdittable, then all of the new text comes into the <b>hello new text</>. For new text to come out of the <b> the state should have some text written outside the <b>. E.g <b>hello/<b>.

Here is a codesandbox https://codesandbox.io/s/polished-hooks-xxkxj?file=/src/App.js:0-906

[lovasoa]

Hello. I don’t think this is an issue with react-contenteditable. This is just how contenteditable works in the browser. It’s your application’s responsibility to handle that case.

[im-amir]

I think a lucky day for me. 😃 Adding a contenteditable="false" to the custom HTML added will bring the continuing text out of this custom HTML. setMessage(`${message}<span class="variable-text" contenteditable="false">${variable}</span>`)