code: function shard() {
          var treeNode = new RangeTreeNode();
  
          treeNode.setStart(range.startContainer, range.startOffset);
          var current = range.startContainer;
          var distance = 0;
  
          while (current != range.endContainer && distance < 50) {
            var last = current;
  
            if (current.firstChild) {
              current = current.firstChild;
  
              treeNode.setEnd(last, last.length - 1);
              treeNode = treeNode.createNewChild();
            } else if (current.nextSibling) {
              current = current.nextSibling;
  
              if (current.nodeType != 3) {
                treeNode.setEnd(last, last.length - 1);
                treeNode = treeNode.getNextSibling();
              }
            } else if (current.parentNode.nextSibling) {
  
              current = current.parentNode.nextSibling;
              treeNode.setEnd(last, last.length - 1);
              treeNode = treeNode.getParent().getNextSibling();
            }
  
            if (current.nodeType == 3 && !treeNode.start) {
              treeNode.setStart(current, 0);
            }
  
            distance++;
          }
  
          treeNode.setEnd(range.endContainer, range.endOffset );
  
          return treeNode.toRanges();
        }
docs: Split the current range into ranges that can actually be highlighted. This is required for doing complex
  DOM highlights where the highlight HTML node would need to only partially include a non-text node.
  
  @memberOf onselect.Selection
  @name shard
  
  @return {[Range]} the array of ranges