title: contenteditable - Selecting 2 child paragraphs and writing text over (Firefox Issue)
body: <p>I have been searching on Google for over a week now, I've been trying to implement different solutions, but with no success, and it's bugging the hell out of me.</p>
  
  <p>So you have a contenteditable div with several paragraphs(or other child elements of the same kind). Obviously this is the kind of layout you wanna keep. If the user selects two or more paragraphs and types text over it, it removes the paragraphs and sets the caret focus inside the parent div:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: georgia;
  }
  .editable {
    color: red;
  }
  .editable p {
    color: #333;
  }
  .editable span {
    color: limegreen !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="editable" contenteditable&gt;&lt;p&gt;paragraph one&lt;/p&gt;&lt;p&gt;paragraph two&lt;/p&gt;&lt;/div&gt;
  
  &lt;hr&gt;
    
  &lt;p&gt;How to reproduce the bug:&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Focus the contenteditable above by placing the cursor somewhere in one of the two paragraphs.&lt;/li&gt;
    &lt;li&gt;press ctrl-a (in windows or linux) or cmd-a (in osx) to select-all&lt;/li&gt;
    &lt;li&gt;type some text&lt;/li&gt;
    &lt;li&gt;red text means that the text went directly inside the contenteditable div, black text means it went inside a paragraph&lt;/li&gt;
  &lt;/ul&gt;
    
  &lt;p&gt;The correct behaviour should be that that select-all and delete (or "type-over") in a contenteditable with only block tags should leave the cursor inside the first block tag.&lt;/p&gt;
    
  &lt;p&gt;Webkit gets this right, Firefox gets it wrong.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I did try something like this in Jquery:</p>
  
  <pre><code>$(document).on('blur keyup','div[contenteditable="true"]',function(event){
      var sel = window.getSelection();
      var activeElement = sel.anchorNode.parentNode;
      var tagName = activeElement.tagName.toLowerCase();
      if (!(tagName == "p" || tagName == "span")) {
          console.log('not on editable area');
          event.preventDefault();
          //remove window selection
          var doselect = window.getSelection();
          doselect.removeAllRanges();
      }
  });
  </code></pre>
  
  <p>So after blur or keyup event on contenteditable, detect where the caret position and if it's outside accepted editable areas stop the event or something? </p>
  
  <p>I've tried changing the selection range, and a bunch of other stuff but maybe I'm just not seeing it. I'm sure a lot of people have had the same problem, but the only answers I found on Google or here is "content editable sucks", "why don't you just use an open source editor" and that kind of stuff. </p>
  
  <p><strong>Firefox weird behaviour: Inserting BR tags on break line</strong>
  I have also tried to remove Firefox'es weird behaviour with a function to remove all the <code>&lt;BR&gt;</code> tags firefox automatically inserts. Like this:</p>
  
  <pre><code>function removeBr(txteditor) {
      var brs = txteditor.getElementsByTagName("br");
      for (var i = 0; i &lt; brs.length; i++) { brs[i].parentNode.removeChild(brs[i]); }
  }
  </code></pre>
  
  <p>So I attached this to a <code>keydown</code> event, and it does exactly what it's expected, however that causes more weird behaviour (like preventing you adding spaces on selected paragraph).</p>
  
  <p><strong>Please vote up the question so we can raise more awareness.</strong></p>
  
  <p>I'm sure a lot of other people have bumped into the same problem, I think it would be good to know if there's a workaround or any "right" way to do it. I think it should really be discussed...</p>