If I were implementing this, I would ignore the middle one. There's virtually nothing visible to the user that there is a middle one OR that <b> is actually placed before <i>. I feel handling this edgecase causes more UX problems than not.
The approach I took with my own hacky editor component was to highlight the styles that currently apply at the caret position via toggle buttons for B, I, etc. This is something word processors have been doing for decades, although I recognise it's far from a perfect solution.
