How can we use React to add a span tag to the last place where the cursor is in a div whose contentEditable property is already set to true(package react-contenteditable)? This div contains only plain text and a span tag. The span tag should be treated as a single character, and nothing else should be created within it. A button should be used to insert a new span at the last point where the cursor was.
Attention : The user should not be able to add anything in the selected text again.
like this :
