How to remove or bypass automatic closing of tags by the browser, any ideas?

Question

React

There is a text
"I`m vasya [], and you?"
In the process of working with it in the editor, it receives tags - " " (there may be font, etc.) Further, [] is replaced by and we get a type code:<b>I`m vasya [], and you?</b>
<span contentEditable />

<b>I`m vasya <span contentEditable />, and you?</b>"

But the browser on the output "rules" all this and we get

<b>I`m vasya</b><span contentEditable />, and you?"

What are the options to fix this? Provided that the text can be long and the tags can be different...

Answer 1

Make I'm vasja part of the component, in which to pass the necessary values ​​as props.