cross-browser - How can I toggle contenteditable H1 inside of ordered lists in Chrome?

Question

Create ordered list via document.execCommand('insertOrderedList')

Create h1 via document.execCommand('formatBlock', null, 'h1')

Toggle h1 via document.execCommand('formatBlock', null, 'div')

Expected: DOM replaces <h1> with <div>

Actual: chrome puts <div> inside of <h1> and when toggled, changes that <div> into an <h1> etc.

codepen

Tried deleting h1 manually