Selection ranges in webkit (Safari/Chrome)

Question

Hi,

I'm using a content-editable iframe to create a syntax-highlighter in javascript and one of the most important things is to be able to indent code properly.

The following code works just as it should in Firefox:

// Create one indent character
var range = window.getSelection().getRangeAt(0);
var newTextNode = document.createTextNode(Language.tabChar);
range.insertNode(newTextNode);
range.setStartAfter(newTextNode);

It creates a tab char and moves the cursor to the right side of the character. In Chrome and Safari a character is inserted but the cursor won't move to the right of it.

I inspected the range object in both Chrome and Firefox, and then noticed that Firefox's range object is far richer than Chrome's. I have been unable ro find any specs of the range object in webkit.

How can I make this code work for both webkit and Firefox?

Thank you!

Answer 1

Both Firefox and WebKit's Range objects comply fully with the DOM Range spec. If Firefox has more properties then they will be Mozilla's own extensions, but generally the spec provides everything you could need.

Anyway, the problem is that you need to reselect the range after altering it:

// Create one indent character
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var newTextNode = document.createTextNode(Language.tabChar);
range.insertNode(newTextNode);
range.setStartAfter(newTextNode);
sel.removeAllRanges();
sel.addRange(range);

Note that this will not work in early versions of Safari (prior to version 3, I think), because its selection object does not support getRangeAt. There is a workaround for this I can provide if you need it.