How to wrap with <p> in first line of contenteditable div
<p>I used below code to wrap <code>&lt;p&gt;</code> instead of <code>&lt;div&gt;</code>.</p>

<pre><code>document.execCommand('defaultParagraphSeparator', false, 'p')
</code></pre>

<p>But I still can't wrap first line, like this "aaa".</p>

<pre><code>&lt;div id=“body-text” class=“body-text” contenteditable=“true” data-placeholder=“Body Contents"&gt;
    aaa
    &lt;p&gt;bbb&lt;/p&gt;
    &lt;p&gt;ccc&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>Does anyone know how to wrap first line "aaa" with <code>&lt;p&gt;</code>?</p>

<p><strong>postscript</strong></p>

<p>I changed my cord using one of the answer for reference.
But now I cant type any letter. Only if I press enter first, it works. But after I press enter and make <code>&lt;p&gt;</code>, I cant type any letter again.</p>

<p>Where is the problem?</p>

<pre><code>&lt;div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents' onkeydown={firstLine}&gt;&lt;/div&gt;
&lt;script&gt;
firstLine(e) {
    if(e.keyCode == '13') {
        var div = document.getElementById('body-text')
        var text = div.firstChild.textContents
        div.removeChild(div.firstChild)
        var p = document.createElement('p')
        p.textContent = text
        div.insertBefore(p, div.firstChild)
    }
}
&lt;/script&gt;
</code></pre>