GWT set caret position on content editable div

I'm writing a web based code editor, where every line is a content editable div. I wrote a native method to set caret position on a given index, but it works only in chrome. opera and firefox always sets caret on a beggining of a line.

public native void setCursorPos(int index) /*-{ //console.log(index); var that = [email protected]::getElement()(); var position = index; var el = that; var treeWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, function(el) { return NodeFilter.FILTER_ACCEPT; }, false); while (treeWalker.nextNode()) { if (position - treeWalker.currentNode.length <= 0) { var range = document.createRange(); var sel = window.getSelection(); console.log(position); range.setStart(treeWalker.currentNode, position); range.setEnd(treeWalker.currentNode, position); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); el.focus(); return; } else { position = position - treeWalker.currentNode.length; } } 

while testing a code i was using this http://jsbin.com/EcETajo/5/edit and it works in chrome, ff and opera.

is the function wrong or something on the gwt generated code changes caret position ?

EDIT: im using treewalker because i want to handle text hightlighting by wrapping text in span nodes in future

EDIT2: ok, ive found a problem by myself.

var range = document.createRange(); var sel = window.getSelection();

those lines were wrong. js code in gwt is in iframe, so to access my html elements i had to use something like this var range = $doc.createRange(); var sel = $doc.getSelection(); wher $doc is a variable set by gwt