After a lot of thought I came to realize the solution lies in the data structure.
I had positions of already highlighted parts.
I broke the paragraph in an array of objects using the positions provided.
This made it simple to just render specific component for
given type of the content from the object.
Second part of highlighting by user followed same break a
sub-paragraph again into parts with different type of objects.
One issue it had that was easy to fix by the user was when
a selected part had same instance earlier in the same object.
But after making selection, the system would highlight an
earlier version breaking the part again into sub-parts
after this user can simply cancel it and select again
resulting in desired state.
To make this experience’s chances less, I broke long
parts (more than 100 letters). This signinficantly
reduced the chances of this issue’s occurence.
