Contenteditable - Editing <code> element is inconsistent in Chrome
<p>I have a WYSIWYG Editor using contenteditable that allows users to insert "code snippets" using a <code>&lt;code&gt;</code> element.  For instance:</p>

<pre><code>&lt;div contenteditable="true"&gt;
    &lt;p&gt;
        This is a paragraph with an &lt;code&gt;inline snippet&lt;/code&gt;!
    &lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p><a href="https://jsfiddle.net/wyeack/pyta77zd/2/" rel="nofollow noreferrer">https://jsfiddle.net/wyeack/pyta77zd/2/</a></p>

<p>In firefox, if you place the caret directly before the first character of <code>&lt;code&gt;</code>, it will prepend the element:</p>

<p><a href="https://i.stack.imgur.com/lOAFG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lOAFG.png" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/Qf8Ry.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qf8Ry.png" alt="enter image description here"></a></p>

<p>However, if you try to do the same thing in Chrome, it appends it to the previous element:
<a href="https://i.stack.imgur.com/oLZ8C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oLZ8C.png" alt="enter image description here"></a></p>

<p>This means that if you use chrome, there is no way of adding content to the beginning of this element.</p>

<p>What's going on here?  Is there a way for me to make the behavior more consistent?</p>