adds support for tab, enter, and click complete on dropdown, closes #15

Author: jessepollak

src/content/components/Container.jsx

@@ -37,8 +37,14 @@ class Container extends React.Component {
     this.unmount = this.unmount.bind(this)
   }
 
-  componentWillMount() {
-    $('html').on('click', this.unmountOnClickOutside)
+  componentDidMount() {
+    // we add this event listener in a callback because
+    // without the jump to the back of the event loop, this
+    // listener picks up the "click" event when a user clicks
+    // the at.js dropdown to select a command
+    setTimeout(() => {
+      $('html').on('click', this.unmountOnClickOutside)
+    }, 0)
   }
 
   componentWillUnmount() {

src/content/fields/ContentEditable.js

@@ -3,27 +3,33 @@ import Field from './Field'
 
 class ContentEditable extends Field {
   getText() {
-    return this.$element[0].innerHTML
+    return this.$element[0].textContent
   }
 
   persistSelection() {
-    this.range = rangy.getSelection().getRangeAt(0)
+    let selection = rangy.getSelection()
+    if (selection.rangeCount > 0) {
+      this.range = rangy.getSelection().getRangeAt(0)
+    } else {
+      let range = rangy.createRange()
+      range.selectNodeContents(this.$element.get(0))
+      range.collapse(false)
+      this.range = range
+    }
   }
 
   removeCommand(match) {
     super.removeCommand()
+
     let range = this.range
-    let container = range.startContainer
-    if (container && container.classList && container.classList.contains("atwho-query")) {
-      range.selectNode(container)
-    } else {
-      range.setStart(range.startContainer, range.startOffset - match.length)
-    }
-    range.deleteContents()
+    let container = range.startContainer.closest ? range.startContainer : range.startContainer.parentElement
+    let query = container.closest('.atwho-query') ||
+              container.querySelector('.atwho-query') ||
+              container.querySelector('.atwho-inserted') ||
+              container.querySelector('.atwho-inserted')
 
-    if (range.startContainer.innerHTML == "") {
-      range.selectNodeContents(range.startContainer.parentNode)
-    }
+    range.selectNode(query)
+    range.deleteContents()
   }
 
   insertText(text) {

src/content/fields/Field.js

@@ -20,10 +20,10 @@ class Field {
 
   observe() {
     this.setupQuickSelect()
-    this.$element.on('keyup', this.listen)
+    this.$element.on('keyup inserted.atwho', this.listen)
   }
 
-  listen() {
+  listen(e) {
     let { command, match } = Commands.match(this.getText())
     if (command) {
       this.mount(command, match)
@@ -64,7 +64,9 @@ class Field {
     this.focus()
   }
 
-  removeCommand() {}
+  removeCommand() {
+    this.$element.atwho('hide')
+  }
 
   mount(Component, match) {
     this.persistSelection()

src/content/lib/at.js

@@ -8,6 +8,8 @@ export function setup($element) {
     at: "/",
     data: Commands.getAtData(),
     displayTpl: "<li>${name}<img src='${icon}' /></li>",
-    displayTimeout: 0
+    insertTpl: "/${name}",
+    displayTimeout: 300,
+    suffix: ""
   })
 }

src/content/vendor/jquery.atwho.js

@@ -805,6 +805,10 @@ EditableController = (function(superClass) {
   };
 
   EditableController.prototype.rect = function() {
+    if (this.query.el.length == 0) {
+      return
+    }
+
     var $iframe, iframeOffset, rect;
     rect = this.query.el.offset();
     if (this.app.iframe && !this.app.iframeAsRoot) {
@@ -824,7 +828,7 @@ EditableController = (function(superClass) {
     if (range = this._getRange()) {
       range.setEndAfter(this.query.el[0]);
       range.collapse(false);
-      range.insertNode(suffixNode = this.app.document.createTextNode("\u200D" + suffix));
+      range.insertNode(suffixNode = this.app.document.createTextNode(suffix));
       this._setRange('after', suffixNode, range);
     }
     if (!this.$inputor.is(':focus')) {