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

[Puspendert]

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.

[Puspendert]

I made it working through my code. Moving the caret to the last.

[Sashagi]

I made it working through my code. Moving the caret to the last.

can you share how you do that? I have the same issue here, thank you!

[im-amir]

@Puspendert Can you please share how did you do that? Having the same issue.

[Puspendert]

@im-amir Not sure what I wanted to do and what solution did I put 😅. But doesn't the codesandbox link above provide a solution?

[im-amir]

Nope, I tried to add the useEffect code in my change handler, but the issue is still same. The continuing text comes inside the last added html tag. :(

[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>`)