It’s not often I say things like this, but oddly today’s problems are Firefox exclusive. It turns out that prior to Firefox 3.5 Range.extractContents is subtly but, for my uses, devastatingly broken. Basically, on any browser except those earlier versions of FireFox the test below should pass:

test('range.extractContents', 2, function() {
  var item1, item2, list, r, fragment, test;
  test = document.createElement('div'); 
  test.id = 'test';
  test.innerHTML = '<ul><li id="item1">Item 1</li><li id="item2">Item 2</li></ul>';
  document.body.appendChild(test);

  item1 = document.getElementById('item1');
  item2 = document.getElementById('item2');
  list = item1.parentNode;

  r = document.createRange();
  r.setStart(list, 0);
  r.setEnd(list, 1);
  fragment = r.extractContents();
  list.appendChild(fragment);

  ok(item1 === document.getElementById('item1'), 'Item 1 must not be cloned');
  ok(item2 === document.getElementById('item2'), 'Item 2 must not be cloned');
}

Basically, extractContents should remove the nodes within the range from the document and give them to you in a DocumentFragment (so you can put them somewhere else usually). The key requirement is that they be the same nodes unless only a part of the node is within the range, at which point the node should be shallow cloned and split.

My tweet is of course rather hyperbole because IE doesn’t implement the W3C range at all (at least prior to IE9), but I don’t notice because TinyMCE includes an emulation layer which gets this behaviour right, thus leaving Firefox as the only browser to exhibit the problem. Thankfully, it appears that I can just use the pure-JavaScript implementation designed for IE to fix the problem in earlier Firefox versions as well.