I am creating an editor that allows you to mark content as Reviewed, this is implemented as a span tag with the reviewed class that shows up with a green background. I would like text typed in the middle of a reviewed span tag to not show up with this background, ideally by breaking the reviewed span tag into two span tags, but wrapping the inserted text in a span tag that has class "unreviewed" might be acceptable.
For example with the document:
<span class="reviewed">This text is reviewed</span>
If the user places the cursor after the word "is" and typed " not" I would like my final output to look like this:
<span class="reviewed">This text is</span> not<span class="reviewed">reviewed</span>
Is there an event I can handle that occurs before the insertion of typed text and what API can I call to break the current span tag, or is there an event that occurs after typing that would allow me to call removeStyle on the just inserted character?