ExecCommand works incorrectly in Chrome 60 after removing node from selection range

Question

We've found out a pretty tricky case when debugging a very old version of the Redactor editor. In two words, removal of a span node from selection range leads to incorrect behavior of execCommand in Chrome v60, though in Firefox and Chrome v58 it was working correctly.

Here is the fiddle reproducing the issue: https://jsfiddle.net/47wqpv1f/4/.

Select a single word and press the button. You may see here that in Firefox and Chrome 58 text will get striked through while in Chrome 60 it remains untouched.

On formatting action, e.g. Bold, editor surrounds selection range with two different "marker" elements.

  var range2 = range.cloneRange();
  var marker = document.createElement('span');
  marker.id="selection-marker-1";
  marker.className="redactor-selection-marker";
  marker.innerHTML = markerHTML;  

  range2.collapse(true);
  range2.insertNode(marker);

Then editor does some manipulations with selection, and after that resets selection to match marker boundaries.

  range.setStart(document.getElementById('selection-marker-1'), 0);
  range.setEnd(document.getElementById('selection-marker-2'), 0);

After that editor removes marker nodes, which by idea should preserve original selection.

  marker.parentNode.removeChild(marker);
  marker2.parentNode.removeChild(marker2);

Next, editor adds markers again for the next step of formatting procedure, and then does execCommand for strike through.

Chrome 60 will only add strike tag to the left marker, while other mentioned browsers will wrap strike around the whole selection (which is an expected behavior for me in this case).

I can think of different workarounds here but what is the actual reason of changing behavior in the new Chrome?

Answer 1

This is likely just a bug in Chrome, but note that per the spec (https://w3c.github.io/editing/execCommand.html) execCommand is in draft and expected to stay there. It's supported, but may not be supported in exactly the same way in every browser. Without a solid specification to follow, implementation is likely to vary, even across browser versions and especially from one browser to another.

Long term, you will likely have more success using implementations that make use of better-defined standards (a challenge, to be sure!) since they're less of a moving target!