title: reset cursor position in content editable after dom change
body: <p>I augment text while it is written, like e.g. syntax highlighting via spans around kewords, in a contentediatable field. </p>
  
  <p>I have the common problem of the cursor jumping towards the begin of the contenteditable. I tried the solution by Nico Burns on <a href="https://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div">Set cursor position on contentEditable &lt;div&gt;</a> it worked in the example but not for my code, possibly because I change the DOM inside the contenteditable itself.</p>
  
  <p>full code at:  <a href="http://pastie.org/2060277" rel="nofollow noreferrer">http://pastie.org/2060277</a></p>
  
  <pre><code>output.addEventListener('keyup',augmentInput,false);
          output.addEventListener('keydown',saveCursorPos,false);
          output.addEventListener('mousedown',saveCursorPos,false);
          output.addEventListener('keyup',restoreCursorPos,false);
  
          function saveCursorPos(e){
              //var selection = window.getSelection();
              savedRange = window.getSelection().getRangeAt(0);
              console.log("save "+e.type,savedRange);
          }
  
          function restoreCursorPos(e){
          document.getElementById("output").focus();
  
              if (savedRange != null) {
                  var s = window.getSelection();
  
                  if (s.rangeCount &gt; 0){
                      s.removeAllRanges();
                  }
  
                  s.addRange(savedRange);
                  console.log("range !=0 "+e.type, savedRange);
              }
  
              else {
                  window.getSelection().addRange(savedRange);
                  console.log("range ==0 "+e.type, savedRange);
              }
          }
  </code></pre>
  
  <p>striking:</p>
  
  <ul>
  <li>That the Range is saved like it should on mouse click (in reference to the innermost element the cursor is in, with correct offset) but not if it is saved on keydown (than in   reference to the contenteditable itself, startOffset always 0, not matter where the cursor was)</li>
  <li>If I prevent the cursor to be saved on keydown and just use the mouseup to save the range it is resored like if it was never saved properly or it changed: reference to the contenteditable itself, startOffset always 0. So I wonder if the range object is changing e.g. reflecting changes in the DOM?</li>
  </ul>