javascript - wrap the line from <div contenteditable=true> with <p> tag in keyup/keypress event

Question

While typing content in <div contenteditable=true id='edited_content>, find whether the line have <p> tag if not wrap it with <p> tag. If header tag presents, should not wrap it with <p> tag.

In google chrome browser, after adding header tag content, instead of wrap content with <p> tag, wrapping it with <div>. How to prevent this?

My code:

var timeoutReference;
$("#edited_content").keyup(function(e) {
  var code;
  code = (e.keyCode ? e.keyCode : e.which);
  if (code === 13) {
    $("#edited_content").contents().filter(function() {
      return this.nodeType === 3 && $.trim(this.nodeValue).length;
    }).wrap("<p />");
  } else {
    if (timeoutReference) {
      clearTimeout(timeoutReference);
    }
    timeoutReference = setTimeout(function() {
      $("#edited_content.publitory").contents().filter(function() {
        return this.nodeType === 3 && $.trim(this.nodeValue).length;
      }).wrap("<p />");
    }, 3000);
  }
});

While start typing, wrap current line with <p> tag and give enter then next line should wrap with <p> tag. In my code, I did setTimeout for 3 seconds, if stop typing for 3 seconds then wrap that line with <p> tag. But my client ask to remove setTimeout, he wants to wrap the current line with <p> immediately. How to achieve this?

typing html content:

test content
<h2>sub content</h2>
content1

Resultant html content after wraping it with <p> tag:

<p>Test content</p>
<h2>sub content</h2>
<p>content1</p>

But in chrome browser:

<p>test content</p>
<h2>sub content</h2>
<div>content1</div>

Answer 1

Waitting for answers