How to stop contentEditable = "true" by inserting <div> instead of <p> when hit return?

Question

I have a div

<div contentEditable="true"> <h1> My headline</h1> </div> 

If I edit the text inside the <h1> and press return, it adds a new div under, instead of the usual paragraph tag that usually inserts when entering return

Creature:

 <div contentEditable="true"> <h1> My headline edited</h1> <div> i tapped return</div> </div> 

I really want

 <div contentEditable="true"> <h1> My headline edited</h1> <p> i tapped return</p> <p> return again</p> </div> 

It is strange that usually when you write somewhere and press return, it adds a new <p> , but just not when editing <h1> . Is it possible to fix this with Javascript / Jquery / Html5?

I am using Safari on an iOS device

Answer 1

Adding a formatting block inside onkeyup with p will force the contenteditable (div) to add the <p> on return.

 editable.onkeyup = (e)=> { e = e || window.event if (e.keyCode === 13) document.execCommand('formatBlock', false, 'p'); }