title: Range object: differences between Webkit and Mozilla based browsers
body: <p>at the moment I have some troubles writing an abstraction layer for Mozilla and Webkit based browsers for using the DOM-range object (getting and processing user selections).</p>
  
  <p>I have also tried to have a look at frameworks like Rangy but this seems far to complex for my task (I have no idea where exactly in the code to find the information I need. If someone could give me a hint, I would be grateful!).</p>
  
  <p>What I want is simply this:</p>
  
  <ul>
  <li>get back the reference to the text node the selection starts in and its offset</li>
  <li>get back the reference to the text node the selection ends in and its offset</li>
  </ul>
  
  <p>So far my layer looks like this:</p>
  
  <pre><code>var SEL_ABSTR = {
  get_selection: function(window_object) {
      return window_object.getSelection();
  },
  get_range: function(selection) {
      return (selection.getRangeAt) ? selection.getRangeAt(0) : selection.createRange();
  },
  get_range_info: function(range, div_ele) {
      var first_node, start_offset;
      var last_node, end_offset;
  
      if (range.startContainer == div_ele) {
          // selections affects the containing div
          first_node = div_ele.childNodes[0];
          last_node = first_node;
          start_offset = 0;
          end_offset = first_node.nodeValue.length;
      } else if (range.startOffset == range.startContainer.nodeValue.length &amp;&amp; range.endOffset == 0) {
          // known bug in Firefox
          alert('firefox bug');
          first_node = range.startContainer.nextSibling.childNodes[0];
          last_node = first_node;
          start_offset = 0;
          end_offset = first_node.nodeValue.length;
      } else {
          first_node = range.startContainer;
          last_node = range.endContainer;
          start_offset = range.startOffset;
          end_offset = range.endOffset;
      }
  
      return {
          first_node: first_node,
          start_offset: start_offset,
          last_node: last_node,
          end_offset: end_offset,
          orig_diff: end_offset - start_offset
      };
  },
  };
  </code></pre>
  
  <p>I have identified two Mozilla bugs for now: </p>
  
  <ol>
  <li><p>Sometimes when the whole (if its the only one) text node is selected within the containing div I get back a reference to this div instead of a reference to the text node. Now I can handle it and give back a reference to the child of the div which is the text node</p></li>
  <li><p>Sometimes I get back a reference to the previous sibling with offset == prevSibling.length and and a reference to nextSibling with offset == 0. But the correct reference would be in the middle. I can also handle this.</p></li>
  </ol>
  
  <p>So what more is there for Mozilla? Webkit works fine!</p>
  
  <p>One should assume that the DOM-range object is standard (and I am not talking of IE, this is another task ...)</p>
  
  <p>greets!</p>
  
  <hr>
  
  <p>more specific details here:</p>
  
  <p>It was't meant as a critique on Rangy. So I am sorry if it sounded like that. I can imagine that handling these different APIs is not easy per se.</p>
  
  <p>You are right, I wasn't specific regarding the task I am trying to fulfill. My structure is rather simple: I have a div (with attribute contenteditable=true) and text within that div (one text node at the beginning).</p>
  
  <p>Starting from this structure, it is now possible to select text with the mouse and add a property to it; this property is then expressed by a span embracing the selected text and a class assigned to that span representing the selected property. Now it is possible to select again some text and a property. If it is the same text and another property, another class will be assigned to that span or removed if the property already exists. If text is selected which embraces several spans, they will be split in order to express that structure (perhaps you remember my post of July).</p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
  hello I am 
  &lt;span class="red"&gt;text but I am also &lt;span class="underline"&gt;underlined&lt;/span&gt;&lt;/span&gt;
  &lt;span class="underline"&gt; also without color&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The algorithm works fine now for "symmetrical" cases: I can build a complex structure and then undo it backwards. It works fine for Safari and Chrome. Now I have of course to develop the algorithm further.</p>
  
  <p>But for now I have problems with Mozilla because I do not understand the system for DOM range objects: startContainer, endContainer, startOffset, endOffset</p>
  
  <p>In my perception regarding my specific case with a div only containing textnodes and spans I assume:</p>
  
  <ul>
  <li>that startContainer and endContainer always point to a textnode affected by the mouse selection (there are no empty spans, they always contain either other spans or a textnode), marking the beginning and the end of the whole selection</li>
  <li>that startOffset and endOffset indicate the position of the selection within the textnode at the beginning and at the end</li>
  </ul>
  
  <p>In the posted code above I have identified two cases in which Mozilla acts differently from webkit.</p>
  
  <p>So if I knew the rules of Mozilla DOM-range I could inegrate that in my layer so that the behaviour would be the same for webkit and Mozilla.</p>
  
  <p>Thank you very much for your answer.</p>