title: Rangy: word under caret (again)
body: <p>I'm trying to create a typeahead code to add to a wysihtml5 rich text editor.
  Basically, I need to be able to insert People/hashtag references like Twitter/Github/Facebook... do.</p>
  
  <p>I found some code of people trying to achieve the same kind of thing.</p>
  
  <p><a href="http://jsfiddle.net/A9z3D/" rel="nofollow">http://jsfiddle.net/A9z3D/</a></p>
  
  <p>This works pretty fine except it only do suggestions for the last word and has some bugs. And I want a select box like Twitter, not a simple "selection switching" using the tab key.</p>
  
  <p>For that I tried to detect the currently typed word.</p>
  
  <pre><code>        getCurrentlyTypedWord: function(e) {
              var iframe = this.$("iframe.wysihtml5-sandbox").get(0);
              var sel = rangy.getSelection(iframe);
              var word;
              if (sel.rangeCount &gt; 0 &amp;&amp; sel.isCollapsed) {
                  console.debug("Rangy: ",sel);
                  var initialCaretPositionRange = sel.getRangeAt(0);
                  var rangeToExpand = initialCaretPositionRange.cloneRange();
                  var newStartOffset = rangeToExpand.startOffset &gt; 0 ? rangeToExpand.startOffset - 1 : 0;
                  rangeToExpand.setStart(rangeToExpand.startContainer,newStartOffset);
                  sel.setSingleRange(rangeToExpand);
                  sel.expand("word", {
                      trim: true,
                      wordOptions: {
                           includeTrailingSpace: true,
                           //wordRegex: /([a-z0-9]+)*/gi
                           wordRegex: /[a-z0-9]+('[a-z0-9]+)*/gi
                          // wordRegex: /([a-z0-9]+)*/gi
                      }
                  });
                  word = sel.text();
                  sel.removeAllRanges();
                  sel.setSingleRange(initialCaretPositionRange);
              } else {
                  word = "noRange";
              }
              console.debug("WORD=",word);
              return word;
  </code></pre>
  
  <p>This is only triggered when the selection is collapsed.
  Notice I had to handle a backward move of the start offset because if the caret is at the end of the word (like it is the case most of the time when an user is typing), then the expand function doesn't expand around the currently typed word.</p>
  
  <p>This works pretty nicely until now, the problem is that it uses the alpha release of Rangy 1.3 which has the <a href="http://code.google.com/p/rangy/wiki/TextRangeModule" rel="nofollow">TextRangeModule</a>. The matter is that I noticed wysihtml5 is also using Rangy in a different and incompatible version (1.2.2) (problem with <code>rangy.dom</code> that probably has been removed).</p>
  
  <p>As Rangy uses a global window.rangy variable, I think I'll have to use version 1.2.2 anyway.</p>
  
  <p>How can I do an equivalent of the <code>expand</code> function, using only rangy 1.2.2?</p>
  
  <p><strong>Edit</strong>: by the way, is there any other solution than using the <code>expand</code> function? I think it is a bit strange and hakish to modify the current selection and revert it back just to know which word is currently typed. Isn't there a solution that doesn't involve selecting the currently typed word? I mean just based on ranges once we know the initial caret collapsed range?</p>