dante-editor 0.1.6 → 0.1.7

data/app/assets/javascripts/dante/tooltip_widgets/uploader.js.coffee

@@ -20,7 +20,7 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
         <img src='' data-height='' data-width='' data-image-id='' class='graf-image' data-delayed-src=''>
       </div>
       <figcaption contenteditable='true' data-default-value='Type caption for image (optional)' class='imageCaption'>
-        <span class='defaultValue'>Type caption for image (optional)</span>
+        <span class='defaultValue'>#{@current_editor.image_caption_placeholder}</span>
         <br>
       </figcaption>
     </figure>"

data/bower.json

@@ -2,7 +2,7 @@
   "name" : "dante",
   "description": "Just another Medium editor clone.",
   "homepage": "michelson.github.io/Dante/",
-  "version" : "0.1.6",
+  "version" : "0.1.7",
   "keywords": [
     "css",
     "sass",

data/dist/js/dante-editor.js

@@ -5,10 +5,11 @@
       PopOver: {},
       Menu: {}
     },
+    Article: {},
     defaults: {
       image_placeholder: '../images/dante/media-loading-placeholder.png'
     },
-    version: "0.1.6"
+    version: "0.1.7"
   };
 
 }).call(this);
@@ -483,7 +484,7 @@
     };
 
     Editor.prototype.initialize = function(opts) {
-      var bodyplaceholder, embedplaceholder, extractplaceholder, title, titleplaceholder;
+      var bodyplaceholder, embedplaceholder, extractplaceholder, titleplaceholder;
       if (opts == null) {
         opts = {};
       }
@@ -495,9 +496,11 @@
       this.upload_url = opts.upload_url || "/uploads.json";
       this.upload_callback = opts.upload_callback;
       this.image_delete_callback = opts.image_delete_callback;
+      this.image_caption_placeholder = opts.image_caption_placeholder || "Type caption for image (optional)";
       this.oembed_url = opts.oembed_url || ("http://api.embed.ly/1/oembed?key=" + opts.api_key + "&url=");
       this.extract_url = opts.extract_url || ("http://api.embed.ly/1/extract?key=" + opts.api_key + "&url=");
       this.default_loading_placeholder = opts.default_loading_placeholder || Dante.defaults.image_placeholder;
+      this.embed_caption_placeholder = opts.embed_caption_placeholder || "Type caption for embed (optional)";
       this.store_url = opts.store_url;
       this.store_method = opts.store_method || "POST";
       this.store_success_handler = opts.store_success_handler;
@@ -513,16 +516,17 @@
       this.suggest_resource_handler = opts.suggest_resource_handler || null;
       opts.base_widgets || (opts.base_widgets = ["uploader", "embed", "embed_extract"]);
       opts.base_behaviors || (opts.base_behaviors = ["save", "image", "paste", "list", "suggest"]);
+      opts.base_popovers || (opts.base_popovers = ["anchor", "typeahead", "card", "align"]);
       this.widgets = [];
       this.behaviors = [];
+      this.popovers = [];
       window.debugMode = opts.debug || false;
       if (window.debugMode) {
         $(this.el).addClass("debug");
       }
       titleplaceholder = opts.title_placeholder || 'Title';
       this.title_placeholder = "<span class='defaultValue defaultValue--root'>" + titleplaceholder + "</span><br>";
-      title = opts.title || '';
-      this.title = title;
+      this.title = opts.title || '';
       bodyplaceholder = opts.body_placeholder || 'Tell your story…';
       this.body_placeholder = "<span class='defaultValue defaultValue--root'>" + bodyplaceholder + "</span><br>";
       embedplaceholder = opts.embed_placeholder || 'Paste a YouTube, Vine, Vimeo, or other video link, and press Enter';
@@ -617,6 +621,49 @@
       }
     };
 
+    Editor.prototype.intializePopOvers = function(opts) {
+      var base_popovers, self;
+      base_popovers = opts.base_popovers;
+      self = this;
+      if (base_popovers.indexOf("anchor") >= 0) {
+        this.pop_over = new Dante.Editor.PopOver({
+          editor: this
+        });
+        this.pop_over.render().hide();
+      }
+      if (base_popovers.indexOf("typeahead") >= 0) {
+        this.pop_over_typeahead = new Dante.Editor.PopOverTypeAhead({
+          editor: this
+        });
+        this.popovers.push(this.pop_over_typeahead);
+      }
+      if (base_popovers.indexOf("card") >= 0) {
+        this.pop_over_card = new Dante.Editor.PopOverCard({
+          editor: this
+        });
+        this.popovers.push(this.pop_over_card);
+      }
+      if (base_popovers.indexOf("align") >= 0) {
+        this.pop_over_align = new Dante.Editor.ImageTooltip({
+          editor: this
+        });
+        this.popovers.push(this.pop_over_align);
+      }
+      if (opts.extra_popovers) {
+        _.each(opts.extra_popovers, (function(_this) {
+          return function(w) {
+            if (!w.current_editor) {
+              w.current_editor = self;
+            }
+            return _this.popovers.push(w);
+          };
+        })(this));
+      }
+      return this.popovers.forEach(function(p) {
+        return p.render().hide();
+      });
+    };
+
     Editor.prototype.getContent = function() {
       return $(this.el).find(".section-inner").html();
     };
@@ -643,22 +690,7 @@
         editor: this,
         widgets: this.widgets
       });
-      this.pop_over = new Dante.Editor.PopOver({
-        editor: this
-      });
-      this.pop_over.render().hide();
-      this.pop_over_typeahead = new Dante.Editor.PopOverTypeAhead({
-        editor: this
-      });
-      this.pop_over_typeahead.render().hide();
-      this.pop_over_card = new Dante.Editor.PopOverCard({
-        editor: this
-      });
-      this.pop_over_card.render().hide();
-      this.pop_over_align = new Dante.Editor.ImageTooltip({
-        editor: this
-      });
-      this.pop_over_align.render().hide();
+      this.intializePopOvers(this.editor_options);
       return this.tooltip_view.render().hide();
     };
 
@@ -1051,7 +1083,7 @@
         } else if (!prev) {
           this.setRangeAt(this.$el.find(".section-inner p")[0]);
         }
-        return this.displayTooltipAt($(this.el).find(".is-selected"));
+        return this.displayTooltipAt(this.findSelected());
       }
     };
 
@@ -1101,22 +1133,12 @@
         this.markAsSelected(anchor_node);
       }
       utils.log("HANDLING Behavior KEYDOWN");
-      _.each(this.behaviors, (function(_this) {
-        return function(b) {
-          if (b.handleKeyDown) {
-            return b.handleKeyDown(e, parent);
-          }
-        };
-      })(this));
-      if (!this["continue"]) {
-        return false;
-      }
       if (e.which === TAB) {
         this.handleTab(anchor_node);
         return false;
       }
       if (e.which === ENTER) {
-        $(this.el).find(".is-selected").removeClass("is-selected");
+        this.findSelected().removeClass("is-selected");
         utils.log(this.isLastChar());
         utils.log("HANDLING WIDGET ENTER");
         _.each(this.widgets, (function(_this) {
@@ -1135,8 +1157,8 @@
         if (parent.hasClass("graf--iframe") || parent.hasClass("graf--figure")) {
           if (this.isLastChar()) {
             this.handleLineBreakWith("p", parent);
-            this.setRangeAtText($(".is-selected")[0]);
-            $(".is-selected").trigger("mouseup");
+            this.setRangeAtText(this.findSelected()[0]);
+            this.findSelected().trigger("mouseup");
             return false;
           } else {
             return false;
@@ -1169,7 +1191,7 @@
               });
               $(node).append("<br>");
             }
-            return _this.displayTooltipAt($(_this.el).find(".is-selected"));
+            return _this.displayTooltipAt(_this.findSelected());
           };
         })(this), 2);
       }
@@ -1215,9 +1237,19 @@
       if (anchor_node) {
         if (!_.isEmpty($(anchor_node).text())) {
           this.tooltip_view.hide();
-          return $(anchor_node).removeClass("graf--empty");
+          $(anchor_node).removeClass("graf--empty");
         }
       }
+      _.each(this.behaviors, (function(_this) {
+        return function(b) {
+          if (b.handleKeyDown) {
+            return b.handleKeyDown(e, parent);
+          }
+        };
+      })(this));
+      if (!this["continue"]) {
+        return false;
+      }
     };
 
     Editor.prototype.handleKeyUp = function(e, node) {
@@ -1234,17 +1266,6 @@
       anchor_node = this.getNode();
       utils_anchor_node = utils.getNode();
       this.handleTextSelection(anchor_node);
-      utils.log("HANDLING Behavior KEYUPS");
-      _.each(this.behaviors, (function(_this) {
-        return function(b) {
-          if (b.handleKeyUp) {
-            return b.handleKeyUp(e);
-          }
-        };
-      })(this));
-      if (!this["continue"]) {
-        return false;
-      }
       if (e.which === BACKSPACE) {
         if ($(utils_anchor_node).hasClass("postField--body")) {
           utils.log("ALL GONE from UP");
@@ -1282,7 +1303,18 @@
         }
       }
       if (_.contains([LEFTARROW, UPARROW, RIGHTARROW, DOWNARROW], e.which)) {
-        return this.handleArrowForKeyUp(e);
+        this.handleArrowForKeyUp(e);
+      }
+      utils.log("HANDLING Behavior KEYUPS");
+      _.each(this.behaviors, (function(_this) {
+        return function(b) {
+          if (b.handleKeyUp) {
+            return b.handleKeyUp(e);
+          }
+        };
+      })(this));
+      if (!this["continue"]) {
+        return false;
       }
     };
 
@@ -1290,6 +1322,7 @@
       var anchor_node, parent;
       anchor_node = this.getNode();
       parent = $(anchor_node);
+      this.hidePlaceholder(parent);
       utils.log("HANDLING Behavior KEYPRESS");
       return _.each(this.behaviors, (function(_this) {
         return function(b) {
@@ -1341,7 +1374,7 @@
       if (_.isUndefined(element)) {
         return;
       }
-      $(this.el).find(".is-selected").removeClass("is-mediaFocused is-selected");
+      this.findSelected().removeClass("is-mediaFocused is-selected");
       $(element).addClass("is-selected");
       if ($(element).hasClass("graf--first")) {
         this.reachedTop = true;
@@ -1623,182 +1656,118 @@
       return $item;
     };
 
+    Editor.prototype.findSelected = function() {
+      return $(this.el).find(".is-selected");
+    };
+
     return Editor;
 
   })(Dante.View);
 
 }).call(this);
 (function() {
-  var __hasProp = {}.hasOwnProperty,
+  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-  Dante.View.Behavior = (function(_super) {
-    __extends(Behavior, _super);
+  Dante.Article = (function(_super) {
+    __extends(Article, _super);
 
-    function Behavior() {
-      return Behavior.__super__.constructor.apply(this, arguments);
+    function Article() {
+      this.start = __bind(this.start, this);
+      return Article.__super__.constructor.apply(this, arguments);
     }
 
-    return Behavior;
-
-  })(Dante.View);
-
-}).call(this);
-(function() {
-  var utils,
-    __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-
-  utils = Dante.utils;
-
-  Dante.View.Behavior.Suggest = (function(_super) {
-    __extends(Suggest, _super);
+    Article.prototype.el = "body";
 
-    function Suggest() {
-      return Suggest.__super__.constructor.apply(this, arguments);
-    }
+    Article.prototype.events = {
+      "mouseover .markup--anchor": "displayPopOver",
+      "mouseout  .markup--anchor": "hidePopOver"
+    };
 
-    Suggest.prototype.initialize = function(opts) {
+    Article.prototype.initialize = function(opts) {
       if (opts == null) {
         opts = {};
       }
-      this.actionEvent = opts.title;
-      this.editor = opts.current_editor;
-      this._name = null;
-      return this.fetch_results = [];
+      this.options = opts;
+      this.popovers = [];
+      return opts.base_popovers || (opts.base_popovers = ["anchor", "card"]);
     };
 
-    Suggest.prototype.displayPopOver = function(ev) {
-      return this.editor.pop_over_typeahead.displayAt(this.editor.getSelectionStart());
+    Article.prototype.start = function() {
+      this.render();
+      return this.appendMenus();
     };
 
-    Suggest.prototype.hidePopOver = function(ev) {
-      console.log("display popover from typeahead");
-      return this.editor.pop_over_typeahead.displayAt(ev);
+    Article.prototype.appendMenus = function() {
+      this.intializePopOvers(this.options);
+      return this.removeEditables();
     };
 
-    Suggest.prototype.desintegratePopOver = function(e) {
-      $(this.editor.getSelectionStart()).remove();
-      return this.pasteHtmlAtCaret(this.editor.getSelectionStart().textContent, false);
+    Article.prototype.render = function() {};
+
+    Article.prototype.removeEditables = function() {
+      return $(this.el).find("[contenteditable]").removeAttr("contenteditable");
     };
 
-    Suggest.prototype.handleKeyPress = function(e) {
-      if (!this.insideQuery()) {
-        if (e.keyCode === 64) {
-          e.preventDefault();
-          return this.pasteHtmlAtCaret(this.wrapperTemplate("@"), false);
-        }
-      } else {
-        console.log("ok let's search");
-        return this.getResults((function(_this) {
-          return function(e) {
-            return _this.fetchResults(e);
+    Article.prototype.intializePopOvers = function(opts) {
+      var base_popovers, self;
+      base_popovers = opts.base_popovers;
+      self = this;
+      if (base_popovers.indexOf("anchor") >= 0) {
+        this.pop_over = new Dante.Editor.PopOver({
+          editor: this
+        });
+        this.popovers.push(this.pop_over);
+      }
+      if (base_popovers.indexOf("card") >= 0) {
+        this.pop_over_card = new Dante.Editor.PopOverCard({
+          editor: this
+        });
+        this.popovers.push(this.pop_over_card);
+      }
+      if (opts.extra_popovers) {
+        _.each(opts.extra_popovers, (function(_this) {
+          return function(w) {
+            if (!w.current_editor) {
+              w.current_editor = self;
+            }
+            return _this.popovers.push(w);
           };
         })(this));
       }
+      return this.popovers.forEach(function(p) {
+        return p.render().hide();
+      });
     };
 
-    Suggest.prototype.handleKeyUp = function(e) {
-      if (this.insideQuery()) {
-        return this.fetchResults(e);
-      }
+    Article.prototype.displayPopOver = function(ev) {
+      return this.pop_over.displayAt(ev);
     };
 
-    Suggest.prototype.fetchResults = function(e) {
-      if (this.getResults.length < 1) {
-        this.desintegratePopOver(e);
-      }
-      if (this.json_request) {
-        this.json_request.abort();
-      }
-      return this.getResults((function(_this) {
-        return function(e) {
-          _this.displayPopOver(e);
-          return _this.editor.pop_over_typeahead.appendData(_this.fetch_results);
-        };
-      })(this));
+    Article.prototype.hidePopOver = function(ev) {
+      return this.pop_over.hide(ev);
     };
 
-    Suggest.prototype.getResults = function(cb, e) {
-      var q;
-      q = this.editor.getSelectionStart().textContent.replace("@", "");
-      clearTimeout(this.timeout);
-      return this.timeout = setTimeout((function(_this) {
-        return function() {
-          return _this.json_request = $.ajax({
-            url: "" + _this.editor.suggest_url + "?" + _this.editor.suggest_query_param + "=" + q,
-            method: "get",
-            dataType: "json"
-          }).success(function(data) {
-            if (_this.editor.suggest_handler) {
-              _this.fetch_results = _this.editor.suggest_handler(data);
-            } else {
-              _this.fetch_results = data;
-            }
-            if (cb) {
-              return cb(e);
-            }
-          }).error(function(data, err) {
-            return console.log("error fetching results");
-          });
-        };
-      })(this), this.editor.suggest_query_timeout);
-    };
+    return Article;
 
-    Suggest.prototype.insideQuery = function() {
-      return $(this.editor.getSelectionStart()).hasClass("markup--query");
-    };
+  })(Dante.View);
 
-    Suggest.prototype.wrapperTemplate = function(name) {
-      return "<span class='markup--query'>" + name + "</span>";
-    };
+}).call(this);
+(function() {
+  var __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-    Suggest.prototype.pasteHtmlAtCaret = function(html, selectPastedContent) {
-      var el, firstNode, frag, lastNode, node, originalRange, range, sel;
-      sel = void 0;
-      range = void 0;
-      if (window.getSelection) {
-        sel = window.getSelection();
-        if (sel.getRangeAt && sel.rangeCount) {
-          range = sel.getRangeAt(0);
-          range.deleteContents();
-          el = document.createElement('div');
-          el.innerHTML = html;
-          frag = document.createDocumentFragment();
-          node = void 0;
-          lastNode = void 0;
-          while (node = el.firstChild) {
-            lastNode = frag.appendChild(node);
-          }
-          firstNode = frag.firstChild;
-          range.insertNode(frag);
-          if (lastNode) {
-            range = range.cloneRange();
-            range.setStartAfter(lastNode);
-            if (selectPastedContent) {
-              range.setStartBefore(firstNode);
-            } else {
-              range.collapse(true);
-            }
-            sel.removeAllRanges();
-            sel.addRange(range);
-          }
-        }
-      } else if ((sel = document.selection) && sel.type !== 'Control') {
-        originalRange = sel.createRange();
-        originalRange.collapse(true);
-        sel.createRange().pasteHTML(html);
-        if (selectPastedContent) {
-          range = sel.createRange();
-          range.setEndPoint('StartToStart', originalRange);
-          range.select();
-        }
-      }
-    };
+  Dante.View.Behavior = (function(_super) {
+    __extends(Behavior, _super);
 
-    return Suggest;
+    function Behavior() {
+      return Behavior.__super__.constructor.apply(this, arguments);
+    }
 
-  })(Dante.View.Behavior);
+    return Behavior;
+
+  })(Dante.View);
 
 }).call(this);
 (function() {
@@ -1809,94 +1778,15 @@
 
   utils = Dante.utils;
 
-  Dante.View.Behavior.Paste = (function(_super) {
-    __extends(Paste, _super);
+  Dante.View.Behavior.Image = (function(_super) {
+    var BACKSPACE, DOWNARROW, ENTER, LEFTARROW, RIGHTARROW, SPACEBAR, TAB, UPARROW;
 
-    function Paste() {
-      this.handlePaste = __bind(this.handlePaste, this);
-      return Paste.__super__.constructor.apply(this, arguments);
-    }
-
-    Paste.prototype.initialize = function(opts) {
-      if (opts == null) {
-        opts = {};
-      }
-      return this.editor = opts.current_editor;
-    };
-
-    Paste.prototype.handlePaste = function(ev, parent) {
-      var cbd, nodes, paste_el, pastedText;
-      utils.log("pasted!");
-      pastedText = void 0;
-      if (window.clipboardData && window.clipboardData.getData) {
-        pastedText = window.clipboardData.getData('Text');
-      } else if (ev.originalEvent.clipboardData && ev.originalEvent.clipboardData.getData) {
-        cbd = ev.originalEvent.clipboardData;
-        pastedText = _.isEmpty(cbd.getData('text/html')) ? cbd.getData('text/plain') : cbd.getData('text/html');
-      }
-      utils.log("Process and handle text...");
-      utils.log(pastedText);
-      if (pastedText.match(/<\/*[a-z][^>]+?>/gi)) {
-        utils.log("HTML DETECTED ON PASTE");
-        pastedText = pastedText.replace(/<div>([\w\W]*?)<\/div>/gi, '<p>$1</p>');
-        document.body.appendChild($("<div id='" + (this.editor.paste_element_id.replace('#', '')) + "' class='dante-paste'></div>")[0]);
-        paste_el = $(this.editor.paste_element_id);
-        paste_el.html("<span>" + pastedText + "</span>");
-        nodes = $(paste_el.html()).insertBefore($(parent));
-        this.editor.parseInitialMess();
-
-        /*
-        @editor.setupElementsClasses $(@editor.paste_element_id), (e)=>
-           * e is the target object which is cleaned
-          nodes = $(e.html()).insertAfter($(parent))
-           *remove paste div since we wont use it until the next paste
-          e.remove()
-           *set caret on newly created node
-          last_node = nodes.last()[0]
-          num = last_node.childNodes.length
-          @editor.setRangeAt(last_node, num)
-          
-           *select new node
-          new_node = $(@editor.getNode())
-          @editor.markAsSelected(new_node)
-          @editor.displayTooltipAt($(@editor.el).find(".is-selected"))
-          
-           * wrap new images
-          @editor.handleUnwrappedImages(nodes)
-        
-           *scroll to element top
-          top = new_node.offset().top
-          $('html, body').animate
-            scrollTop: top
-          , 20
-         */
-        this.editor["continue"] = false;
-        return false;
-      }
-    };
-
-    return Paste;
-
-  })(Dante.View.Behavior);
-
-}).call(this);
-(function() {
-  var utils,
-    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
-    __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-
-  utils = Dante.utils;
-
-  Dante.View.Behavior.Image = (function(_super) {
-    var BACKSPACE, DOWNARROW, ENTER, LEFTARROW, RIGHTARROW, SPACEBAR, TAB, UPARROW;
-
-    __extends(Image, _super);
-
-    function Image() {
-      this.handleArrowForKeyUp = __bind(this.handleArrowForKeyUp, this);
-      this.handleArrowForKeyDown = __bind(this.handleArrowForKeyDown, this);
-      return Image.__super__.constructor.apply(this, arguments);
+    __extends(Image, _super);
+
+    function Image() {
+      this.handleArrowForKeyUp = __bind(this.handleArrowForKeyUp, this);
+      this.handleArrowForKeyDown = __bind(this.handleArrowForKeyDown, this);
+      return Image.__super__.constructor.apply(this, arguments);
     }
 
     BACKSPACE = 8;
@@ -1997,11 +1887,11 @@
         if ($(e.target).hasClass("graf--figure")) {
           e.preventDefault();
           if (this.editor.image_delete_callback) {
-            this.editor.image_delete_callback($(".is-selected").find("img").data());
+            this.editor.image_delete_callback(this.editor.findSelected().find("img").data());
           }
           utils.log("Replacing selected node");
-          this.editor.replaceWith("p", $(".is-selected"));
-          this.editor.setRangeAt($(".is-selected")[0]);
+          this.editor.replaceWith("p", this.editor.findSelected());
+          this.editor.setRangeAt(this.editor.findSelected()[0]);
           this.editor.pop_over_align.hide();
           utils.log("Focus on the previous graf");
           this.editor["continue"] = false;
@@ -2036,11 +1926,11 @@
           }
         }
       }
-      if (_.isUndefined(parent) || parent.length === 0 && $(".is-selected").hasClass("is-mediaFocused")) {
-        node = $(".is-selected").find("figcaption");
+      if (_.isUndefined(parent) || parent.length === 0 && this.editor.findSelected().hasClass("is-mediaFocused")) {
+        node = this.editor.findSelected().find("figcaption");
         node.find(".defaultValue").remove();
         this.editor.setRangeAt(node[0]);
-        $(".is-selected").removeClass("is-mediaFocused");
+        this.editor.findSelected().removeClass("is-mediaFocused");
         this.editor.pop_over_align.hide();
         return false;
       }
@@ -2057,8 +1947,8 @@
         case "ArrowDown":
         case "Down":
           if (_.isUndefined(current_node) || !current_node.exists()) {
-            if ($(".is-selected").exists()) {
-              current_node = $(".is-selected");
+            if (this.editor.findSelected().exists()) {
+              current_node = this.editor.findSelected();
             }
           }
           next_node = current_node.next();
@@ -2156,7 +2046,6 @@
             n = current_node.prev(".graf");
             num = n[0].childNodes.length;
             utils.log("4 up");
-            this.editor.skip_keyup = true;
             this.editor.markAsSelected(prev_node);
             return false;
           }
@@ -2268,7 +2157,7 @@
       }
       this.editor.addClassesToElement($list[0]);
       this.editor.replaceWith("li", $paragraph);
-      $li = $(".is-selected");
+      $li = this.editor.findSelected();
       this.editor.setElementName($li[0]);
       $li.html(content).wrap($list);
       if ($li.find("br").length === 0) {
@@ -2349,7 +2238,7 @@
         $list.before($li);
         content = $li.html();
         this.editor.replaceWith("p", $li);
-        $paragraph = $(".is-selected");
+        $paragraph = this.editor.findSelected();
         $paragraph.removeClass("graf--empty").html(content).attr("name", utils.generateUniqueName());
         if ($list.children().length === 0) {
           $list.remove();
@@ -2362,6 +2251,86 @@
 
   })(Dante.View.Behavior);
 
+}).call(this);
+(function() {
+  var utils,
+    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  utils = Dante.utils;
+
+  Dante.View.Behavior.Paste = (function(_super) {
+    __extends(Paste, _super);
+
+    function Paste() {
+      this.handlePaste = __bind(this.handlePaste, this);
+      return Paste.__super__.constructor.apply(this, arguments);
+    }
+
+    Paste.prototype.initialize = function(opts) {
+      if (opts == null) {
+        opts = {};
+      }
+      return this.editor = opts.current_editor;
+    };
+
+    Paste.prototype.handlePaste = function(ev, parent) {
+      var cbd, nodes, paste_el, pastedText;
+      utils.log("pasted!");
+      this.editor.hidePlaceholder($(parent));
+      pastedText = void 0;
+      if (window.clipboardData && window.clipboardData.getData) {
+        pastedText = window.clipboardData.getData('Text');
+      } else if (ev.originalEvent.clipboardData && ev.originalEvent.clipboardData.getData) {
+        cbd = ev.originalEvent.clipboardData;
+        pastedText = _.isEmpty(cbd.getData('text/html')) ? cbd.getData('text/plain') : cbd.getData('text/html');
+      }
+      utils.log("Process and handle text...");
+      utils.log(pastedText);
+      if (pastedText.match(/<\/*[a-z][^>]+?>/gi)) {
+        utils.log("HTML DETECTED ON PASTE");
+        pastedText = pastedText.replace(/<div>([\w\W]*?)<\/div>/gi, '<p>$1</p>');
+        document.body.appendChild($("<div id='" + (this.editor.paste_element_id.replace('#', '')) + "' class='dante-paste'></div>")[0]);
+        paste_el = $(this.editor.paste_element_id);
+        paste_el.html("<span>" + pastedText + "</span>");
+        nodes = $(paste_el.html()).insertBefore($(parent));
+        this.editor.parseInitialMess();
+
+        /*
+        @editor.setupElementsClasses $(@editor.paste_element_id), (e)=>
+           * e is the target object which is cleaned
+          nodes = $(e.html()).insertAfter($(parent))
+           *remove paste div since we wont use it until the next paste
+          e.remove()
+           *set caret on newly created node
+          last_node = nodes.last()[0]
+          num = last_node.childNodes.length
+          @editor.setRangeAt(last_node, num)
+          
+           *select new node
+          new_node = $(@editor.getNode())
+          @editor.markAsSelected(new_node)
+          @editor.displayTooltipAt($(@editor.el).find(".is-selected"))
+          
+           * wrap new images
+          @editor.handleUnwrappedImages(nodes)
+        
+           *scroll to element top
+          top = new_node.offset().top
+          $('html, body').animate
+            scrollTop: top
+          , 20
+         */
+        this.editor["continue"] = false;
+        return false;
+      }
+    };
+
+    return Paste;
+
+  })(Dante.View.Behavior);
+
 }).call(this);
 (function() {
   var utils,
@@ -2438,6 +2407,163 @@
 
   })(Dante.View.Behavior);
 
+}).call(this);
+(function() {
+  var utils,
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  utils = Dante.utils;
+
+  Dante.View.Behavior.Suggest = (function(_super) {
+    __extends(Suggest, _super);
+
+    function Suggest() {
+      return Suggest.__super__.constructor.apply(this, arguments);
+    }
+
+    Suggest.prototype.initialize = function(opts) {
+      if (opts == null) {
+        opts = {};
+      }
+      this.actionEvent = opts.title;
+      this.editor = opts.current_editor;
+      this._name = null;
+      return this.fetch_results = [];
+    };
+
+    Suggest.prototype.displayPopOver = function(ev) {
+      return this.editor.pop_over_typeahead.displayAt(this.editor.getSelectionStart());
+    };
+
+    Suggest.prototype.hidePopOver = function(ev) {
+      console.log("display popover from typeahead");
+      return this.editor.pop_over_typeahead.displayAt(ev);
+    };
+
+    Suggest.prototype.desintegratePopOver = function(e) {
+      $(this.editor.getSelectionStart()).remove();
+      return this.pasteHtmlAtCaret(this.editor.getSelectionStart().textContent, false);
+    };
+
+    Suggest.prototype.handleKeyPress = function(e) {
+      if (!this.insideQuery()) {
+        if (e.keyCode === 64) {
+          e.preventDefault();
+          return this.pasteHtmlAtCaret(this.wrapperTemplate("@"), false);
+        }
+      } else {
+        console.log("ok let's search");
+        return this.getResults((function(_this) {
+          return function(e) {
+            return _this.fetchResults(e);
+          };
+        })(this));
+      }
+    };
+
+    Suggest.prototype.handleKeyUp = function(e) {
+      if (this.insideQuery()) {
+        return this.fetchResults(e);
+      }
+    };
+
+    Suggest.prototype.fetchResults = function(e) {
+      if (this.getResults.length < 1) {
+        this.desintegratePopOver(e);
+      }
+      if (this.json_request) {
+        this.json_request.abort();
+      }
+      return this.getResults((function(_this) {
+        return function(e) {
+          _this.displayPopOver(e);
+          return _this.editor.pop_over_typeahead.appendData(_this.fetch_results);
+        };
+      })(this));
+    };
+
+    Suggest.prototype.getResults = function(cb, e) {
+      var q;
+      q = this.editor.getSelectionStart().textContent.replace("@", "");
+      clearTimeout(this.timeout);
+      return this.timeout = setTimeout((function(_this) {
+        return function() {
+          return _this.json_request = $.ajax({
+            url: "" + _this.editor.suggest_url + "?" + _this.editor.suggest_query_param + "=" + q,
+            method: "get",
+            dataType: "json"
+          }).success(function(data) {
+            if (_this.editor.suggest_handler) {
+              _this.fetch_results = _this.editor.suggest_handler(data);
+            } else {
+              _this.fetch_results = data;
+            }
+            if (cb) {
+              return cb(e);
+            }
+          }).error(function(data, err) {
+            return console.log("error fetching results");
+          });
+        };
+      })(this), this.editor.suggest_query_timeout);
+    };
+
+    Suggest.prototype.insideQuery = function() {
+      return $(this.editor.getSelectionStart()).hasClass("markup--query");
+    };
+
+    Suggest.prototype.wrapperTemplate = function(name) {
+      return "<span class='markup--query'>" + name + "</span>";
+    };
+
+    Suggest.prototype.pasteHtmlAtCaret = function(html, selectPastedContent) {
+      var el, firstNode, frag, lastNode, node, originalRange, range, sel;
+      sel = void 0;
+      range = void 0;
+      if (window.getSelection) {
+        sel = window.getSelection();
+        if (sel.getRangeAt && sel.rangeCount) {
+          range = sel.getRangeAt(0);
+          range.deleteContents();
+          el = document.createElement('div');
+          el.innerHTML = html;
+          frag = document.createDocumentFragment();
+          node = void 0;
+          lastNode = void 0;
+          while (node = el.firstChild) {
+            lastNode = frag.appendChild(node);
+          }
+          firstNode = frag.firstChild;
+          range.insertNode(frag);
+          if (lastNode) {
+            range = range.cloneRange();
+            range.setStartAfter(lastNode);
+            if (selectPastedContent) {
+              range.setStartBefore(firstNode);
+            } else {
+              range.collapse(true);
+            }
+            sel.removeAllRanges();
+            sel.addRange(range);
+          }
+        }
+      } else if ((sel = document.selection) && sel.type !== 'Control') {
+        originalRange = sel.createRange();
+        originalRange.collapse(true);
+        sel.createRange().pasteHTML(html);
+        if (selectPastedContent) {
+          range = sel.createRange();
+          range.setEndPoint('StartToStart', originalRange);
+          range.select();
+        }
+      }
+    };
+
+    return Suggest;
+
+  })(Dante.View.Behavior);
+
 }).call(this);
 (function() {
   var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
@@ -2505,7 +2631,7 @@
     };
 
     Uploader.prototype.insertTemplate = function() {
-      return "<figure contenteditable='false' class='graf graf--figure is-defaultValue' name='" + (utils.generateUniqueName()) + "' tabindex='0'> <div style='' class='aspectRatioPlaceholder is-locked'> <div style='padding-bottom: 100%;' class='aspect-ratio-fill'></div> <img src='' data-height='' data-width='' data-image-id='' class='graf-image' data-delayed-src=''> </div> <figcaption contenteditable='true' data-default-value='Type caption for image (optional)' class='imageCaption'> <span class='defaultValue'>Type caption for image (optional)</span> <br> </figcaption> </figure>";
+      return "<figure contenteditable='false' class='graf graf--figure is-defaultValue' name='" + (utils.generateUniqueName()) + "' tabindex='0'> <div style='' class='aspectRatioPlaceholder is-locked'> <div style='padding-bottom: 100%;' class='aspect-ratio-fill'></div> <img src='' data-height='' data-width='' data-image-id='' class='graf-image' data-delayed-src=''> </div> <figcaption contenteditable='true' data-default-value='Type caption for image (optional)' class='imageCaption'> <span class='defaultValue'>" + this.current_editor.image_caption_placeholder + "</span> <br> </figcaption> </figure>";
     };
 
     Uploader.prototype.uploadExistentImage = function(image_element, opts) {
@@ -2814,7 +2940,7 @@
     };
 
     Embed.prototype.embedTemplate = function() {
-      return "<figure contenteditable='false' class='graf--figure graf--iframe graf--first' name='504e' tabindex='0'> <div class='iframeContainer'> <iframe frameborder='0' width='700' height='393' data-media-id='' src='' data-height='480' data-width='854'> </iframe> </div> <figcaption contenteditable='true' data-default-value='Type caption for embed (optional)' class='imageCaption'> <a rel='nofollow' class='markup--anchor markup--figure-anchor' data-href='' href='' target='_blank'> </a> </figcaption> </figure>";
+      return "<figure contenteditable='false' class='graf--figure graf--iframe graf--first' name='504e' tabindex='0'> <div class='iframeContainer'> <iframe frameborder='0' width='700' height='393' data-media-id='' src='' data-height='480' data-width='854'> </iframe> </div> <figcaption contenteditable='true' data-default-value='" + this.current_editor.embed_caption_placeholder + "' class='imageCaption'> <a rel='nofollow' class='markup--anchor markup--figure-anchor' data-href='' href='' target='_blank'> </a> </figcaption> </figure>";
     };
 
     Embed.prototype.displayEmbedPlaceHolder = function() {
@@ -2828,12 +2954,14 @@
     };
 
     Embed.prototype.getEmbedFromNode = function(node) {
+      var url;
       this.node = $(node);
       this.node_name = this.node.attr("name");
       this.node.addClass("spinner");
-      return $.getJSON("" + this.current_editor.oembed_url + ($(this.node).text())).success((function(_this) {
+      url = "" + this.current_editor.oembed_url + ($(this.node).text()) + "&scheme=https";
+      return $.getJSON(url).success((function(_this) {
         return function(data) {
-          var iframe_src, replaced_node, tmpl, url;
+          var iframe_src, replaced_node, tmpl;
           _this.node = $("[name=" + _this.node_name + "]");
           iframe_src = $(data.html).prop("src");
           tmpl = $(_this.embedTemplate());
@@ -2896,7 +3024,7 @@
     };
 
     EmbedExtract.prototype.extractTemplate = function() {
-      return "<div class='graf graf--mixtapeEmbed is-selected' name=''> <a target='_blank' data-media-id='' class='js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock' href=''> </a> <a data-tooltip-type='link' data-tooltip-position='bottom' data-tooltip='' title='' class='markup--anchor markup--mixtapeEmbed-anchor' data-href='' href='' target='_blank'> <strong class='markup--strong markup--mixtapeEmbed-strong'></strong> <em class='markup--em markup--mixtapeEmbed-em'></em> </a> </div>";
+      return "<div class='graf graf--mixtapeEmbed is-selected' name=''> <a target='_blank' data-media-id='' class='js-mixtapeImage mixtapeImage mixtapeImage--empty u-ignoreBlock' href=''> </a> <a data-tooltip-type='link' data-tooltip-position='bottom' data-tooltip='' title='' class='markup--anchor markup--mixtapeEmbed-anchor' data-href='' href='' target='_blank'> <strong class='markup--strong markup--mixtapeEmbed-strong'> </strong> <em class='markup--em markup--mixtapeEmbed-em'> </em> </a> </div>";
     };
 
     EmbedExtract.prototype.displayExtractPlaceHolder = function() {
@@ -3077,165 +3205,44 @@
 (function() {
   var utils,
     __hasProp = {}.hasOwnProperty,
-    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
-
-  utils = Dante.utils;
-
-  Dante.Editor.PopOver = (function(_super) {
-    __extends(PopOver, _super);
-
-    function PopOver() {
-      return PopOver.__super__.constructor.apply(this, arguments);
-    }
-
-    PopOver.prototype.el = "body";
-
-    PopOver.prototype.events = {
-      "mouseover .popover--tooltip": "cancelHide",
-      "mouseout  .popover--tooltip": "hide"
-    };
-
-    PopOver.prototype.initialize = function(opts) {
-      if (opts == null) {
-        opts = {};
-      }
-      utils.log("initialized popover");
-      this.pop_over_element = ".popover--tooltip";
-      this.editor = opts.editor;
-      this.hideTimeout;
-      return this.settings = {
-        timeout: 300
-      };
-    };
-
-    PopOver.prototype.template = function() {
-      return "<div class='dante-popover popover--tooltip popover--Linktooltip popover--bottom is-active'> <div class='popover-inner'> <a href='#' target='_blank'> Link </a> </div> <div class='popover-arrow'> </div> </div>";
-    };
-
-    PopOver.prototype.positionAt = function(ev) {
-      var left_value, popover_width, target, target_height, target_offset, target_positions, target_width, top_value, wrapperOffset;
-      target = $(ev.currentTarget);
-      wrapperOffset = target.closest('article.postArticle').offset();
-      target_positions = this.resolveTargetPosition(target);
-      target_offset = target.offset();
-      target_width = target.outerWidth();
-      target_height = target.outerHeight();
-      popover_width = this.findElement().outerWidth();
-      top_value = target_positions.top + target_height;
-      left_value = target_offset.left + (target_width / 2) - (popover_width / 2) - wrapperOffset.left;
-      this.findElement().css("top", top_value).css("left", left_value).show();
-      return this.handleDirection(target);
-    };
-
-    PopOver.prototype.displayAt = function(ev) {
-      var target;
-      this.cancelHide();
-      target = $(ev.currentTarget);
-      this.findElement().find(".popover-inner a").text(target.attr('href')).attr('href', target.attr("href"));
-      this.positionAt(ev);
-      this.findElement().css("pointer-events", "auto");
-      return $(this.el).show();
-    };
-
-    PopOver.prototype.cancelHide = function() {
-      utils.log("Cancel Hide");
-      return clearTimeout(this.hideTimeout);
-    };
-
-    PopOver.prototype.hide = function(ev) {
-      this.cancelHide();
-      return this.hideTimeout = setTimeout((function(_this) {
-        return function() {
-          return _this.findElement().hide();
-        };
-      })(this), this.settings.timeout);
-    };
-
-    PopOver.prototype.resolveTargetPosition = function(target) {
-      if (target.parents(".graf--mixtapeEmbed").exists()) {
-        return target.parents(".graf--mixtapeEmbed").position();
-      } else {
-        return target.position();
-      }
-    };
-
-    PopOver.prototype.handleDirection = function(target) {
-      if (target.parents(".graf--mixtapeEmbed").exists()) {
-        return this.findElement().removeClass("popover--bottom").addClass("popover--top");
-      } else {
-        return this.findElement().removeClass("popover--top").addClass("popover--bottom");
-      }
-    };
-
-    PopOver.prototype.findElement = function() {
-      return $(this.el).find(this.pop_over_element);
-    };
-
-    PopOver.prototype.render = function() {
-      return $(this.template()).insertAfter(this.editor.$el);
-    };
-
-    return PopOver;
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
-  })(Dante.View);
+  utils = Dante.utils;
 
-  Dante.Editor.PopOverTypeAhead = (function(_super) {
-    __extends(PopOverTypeAhead, _super);
+  Dante.Editor.PopOver = (function(_super) {
+    __extends(PopOver, _super);
 
-    function PopOverTypeAhead() {
-      return PopOverTypeAhead.__super__.constructor.apply(this, arguments);
+    function PopOver() {
+      return PopOver.__super__.constructor.apply(this, arguments);
     }
 
-    PopOverTypeAhead.prototype.el = "body";
+    PopOver.prototype.el = "body";
 
-    PopOverTypeAhead.prototype.events = {
-      "mouseover .popover--typeahead": "cancelHide",
-      "mouseout  .popover--typeahead": "hide",
-      "click .typeahead-item": "handleOptionSelection"
+    PopOver.prototype.events = {
+      "mouseover .popover--tooltip": "cancelHide",
+      "mouseout  .popover--tooltip": "hide"
     };
 
-    PopOverTypeAhead.prototype.initialize = function(opts) {
+    PopOver.prototype.initialize = function(opts) {
       if (opts == null) {
         opts = {};
       }
-      this.pop_over_element = "popover--typeahead";
       utils.log("initialized popover");
+      this.pop_over_element = ".popover--tooltip";
       this.editor = opts.editor;
       this.hideTimeout;
-      this.settings = {
+      return this.settings = {
         timeout: 300
       };
-      return this.typeaheadStyles();
-    };
-
-    PopOverTypeAhead.prototype.template = function() {
-      return "<div class='dante-popover popover--typeahead js-popover typeahead typeahead--mention popover--maxWidth360 popover--bottom is-active'> <div class='popover-inner js-popover-inner'> <ul></ul> </div> <div class='popover-arrow' style='left: 297px;'></div> </div>";
-    };
-
-    PopOverTypeAhead.prototype.popoverItem = function(item) {
-      return "<li class='typeahead-item' data-action-value='" + item.text + "' data-action='typeahead-populate' data-id='" + item.id + "' data-type='" + item.type + "' data-href='" + item.href + "'> <div class='dante-avatar'> <img src='" + item.avatar + "' class='avatar-image avatar-image--icon' alt='" + item.text + "'> <span class='avatar-text'>" + item.text + "</span> <em class='avatar-description'>" + item.description + "</em> </div> </li>";
-    };
-
-    PopOverTypeAhead.prototype.typeaheadStyles = function() {
-      return this.classesForCurrent = "typeahead typeahead--mention popover--maxWidth360";
-    };
-
-    PopOverTypeAhead.prototype.handleOptionSelection = function(ev) {
-      var data;
-      ev.preventDefault;
-      console.log("Select option here!");
-      data = $(ev.currentTarget).data();
-      $(".markup--query").replaceWith(this.linkTemplate(data));
-      return this.hide(0);
     };
 
-    PopOverTypeAhead.prototype.linkTemplate = function(data) {
-      return "<a href='#' data-type='" + data.type + "' data-href='" + data.href + "' data-id='" + data.id + "' class='markup--user markup--p-user'> " + data.actionValue + " </a>";
+    PopOver.prototype.template = function() {
+      return "<div class='dante-popover popover--tooltip popover--Linktooltip popover--bottom is-active'> <div class='popover-inner'> <a href='#' target='_blank'> Link </a> </div> <div class='popover-arrow'> </div> </div>";
     };
 
-    PopOverTypeAhead.prototype.positionAt = function(target) {
-      var left_value, popover_width, target_height, target_offset, target_positions, target_width, top_value, wrapperOffset;
-      target = $(target);
+    PopOver.prototype.positionAt = function(ev) {
+      var left_value, popover_width, target, target_height, target_offset, target_positions, target_width, top_value, wrapperOffset;
+      target = $(ev.currentTarget);
       wrapperOffset = target.closest('article.postArticle').offset();
       target_positions = this.resolveTargetPosition(target);
       target_offset = target.offset();
@@ -3248,42 +3255,31 @@
       return this.handleDirection(target);
     };
 
-    PopOverTypeAhead.prototype.displayAt = function(ev) {
+    PopOver.prototype.displayAt = function(ev) {
+      var target;
       this.cancelHide();
-      return this.positionAt(ev);
+      target = $(ev.currentTarget);
+      this.findElement().find(".popover-inner a").text(target.attr('href')).attr('href', target.attr("href"));
+      this.positionAt(ev);
+      this.findElement().css("pointer-events", "auto");
+      return $(this.el).show();
     };
 
-    PopOverTypeAhead.prototype.cancelHide = function() {
+    PopOver.prototype.cancelHide = function() {
       utils.log("Cancel Hide");
       return clearTimeout(this.hideTimeout);
     };
 
-    PopOverTypeAhead.prototype.findElement = function() {
-      return $(this.el).find("." + this.pop_over_element);
-    };
-
-    PopOverTypeAhead.prototype.hide = function(ev, timeout) {
-      if (timeout == null) {
-        timeout = this.settings.timeout;
-      }
+    PopOver.prototype.hide = function(ev) {
       this.cancelHide();
       return this.hideTimeout = setTimeout((function(_this) {
         return function() {
           return _this.findElement().hide();
         };
-      })(this), timeout);
-    };
-
-    PopOverTypeAhead.prototype.appendData = function(data) {
-      this.findElement().find(".popover-inner ul").html("");
-      return _.each(data, (function(_this) {
-        return function(item) {
-          return _this.findElement().find(".popover-inner ul").append(_this.popoverItem(item));
-        };
-      })(this));
+      })(this), this.settings.timeout);
     };
 
-    PopOverTypeAhead.prototype.resolveTargetPosition = function(target) {
+    PopOver.prototype.resolveTargetPosition = function(target) {
       if (target.parents(".graf--mixtapeEmbed").exists()) {
         return target.parents(".graf--mixtapeEmbed").position();
       } else {
@@ -3291,7 +3287,7 @@
       }
     };
 
-    PopOverTypeAhead.prototype.handleDirection = function(target) {
+    PopOver.prototype.handleDirection = function(target) {
       if (target.parents(".graf--mixtapeEmbed").exists()) {
         return this.findElement().removeClass("popover--bottom").addClass("popover--top");
       } else {
@@ -3299,13 +3295,25 @@
       }
     };
 
-    PopOverTypeAhead.prototype.render = function() {
+    PopOver.prototype.findElement = function() {
+      return $(this.el).find(this.pop_over_element);
+    };
+
+    PopOver.prototype.render = function() {
       return $(this.template()).insertAfter(this.editor.$el);
     };
 
-    return PopOverTypeAhead;
+    return PopOver;
 
-  })(Dante.Editor.PopOver);
+  })(Dante.View);
+
+}).call(this);
+(function() {
+  var utils,
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  utils = Dante.utils;
 
   Dante.Editor.PopOverCard = (function(_super) {
     __extends(PopOverCard, _super);
@@ -3395,6 +3403,14 @@
 
   })(Dante.Editor.PopOver);
 
+}).call(this);
+(function() {
+  var utils,
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  utils = Dante.utils;
+
   Dante.Editor.ImageTooltip = (function(_super) {
     __extends(ImageTooltip, _super);
 
@@ -3502,6 +3518,142 @@
 
   })(Dante.Editor.PopOver);
 
+}).call(this);
+(function() {
+  var utils,
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  utils = Dante.utils;
+
+  Dante.Editor.PopOverTypeAhead = (function(_super) {
+    __extends(PopOverTypeAhead, _super);
+
+    function PopOverTypeAhead() {
+      return PopOverTypeAhead.__super__.constructor.apply(this, arguments);
+    }
+
+    PopOverTypeAhead.prototype.el = "body";
+
+    PopOverTypeAhead.prototype.events = {
+      "mouseover .popover--typeahead": "cancelHide",
+      "mouseout  .popover--typeahead": "hide",
+      "click .typeahead-item": "handleOptionSelection"
+    };
+
+    PopOverTypeAhead.prototype.initialize = function(opts) {
+      if (opts == null) {
+        opts = {};
+      }
+      this.pop_over_element = "popover--typeahead";
+      utils.log("initialized popover");
+      this.editor = opts.editor;
+      this.hideTimeout;
+      this.settings = {
+        timeout: 300
+      };
+      return this.typeaheadStyles();
+    };
+
+    PopOverTypeAhead.prototype.template = function() {
+      return "<div class='dante-popover popover--typeahead js-popover typeahead typeahead--mention popover--maxWidth360 popover--bottom is-active'> <div class='popover-inner js-popover-inner'> <ul></ul> </div> <div class='popover-arrow' style='left: 297px;'></div> </div>";
+    };
+
+    PopOverTypeAhead.prototype.popoverItem = function(item) {
+      return "<li class='typeahead-item' data-action-value='" + item.text + "' data-action='typeahead-populate' data-id='" + item.id + "' data-type='" + item.type + "' data-href='" + item.href + "'> <div class='dante-avatar'> <img src='" + item.avatar + "' class='avatar-image avatar-image--icon' alt='" + item.text + "'> <span class='avatar-text'>" + item.text + "</span> <em class='avatar-description'>" + item.description + "</em> </div> </li>";
+    };
+
+    PopOverTypeAhead.prototype.typeaheadStyles = function() {
+      return this.classesForCurrent = "typeahead typeahead--mention popover--maxWidth360";
+    };
+
+    PopOverTypeAhead.prototype.handleOptionSelection = function(ev) {
+      var data;
+      ev.preventDefault;
+      console.log("Select option here!");
+      data = $(ev.currentTarget).data();
+      $(".markup--query").replaceWith(this.linkTemplate(data));
+      return this.hide(0);
+    };
+
+    PopOverTypeAhead.prototype.linkTemplate = function(data) {
+      return "<a href='#' data-type='" + data.type + "' data-href='" + data.href + "' data-id='" + data.id + "' class='markup--user markup--p-user'> " + data.actionValue + " </a>";
+    };
+
+    PopOverTypeAhead.prototype.positionAt = function(target) {
+      var left_value, popover_width, target_height, target_offset, target_positions, target_width, top_value, wrapperOffset;
+      target = $(target);
+      wrapperOffset = target.closest('article.postArticle').offset();
+      target_positions = this.resolveTargetPosition(target);
+      target_offset = target.offset();
+      target_width = target.outerWidth();
+      target_height = target.outerHeight();
+      popover_width = this.findElement().outerWidth();
+      top_value = target_positions.top + target_height;
+      left_value = target_offset.left + (target_width / 2) - (popover_width / 2) - wrapperOffset.left;
+      this.findElement().css("top", top_value).css("left", left_value).show();
+      return this.handleDirection(target);
+    };
+
+    PopOverTypeAhead.prototype.displayAt = function(ev) {
+      this.cancelHide();
+      return this.positionAt(ev);
+    };
+
+    PopOverTypeAhead.prototype.cancelHide = function() {
+      utils.log("Cancel Hide");
+      return clearTimeout(this.hideTimeout);
+    };
+
+    PopOverTypeAhead.prototype.findElement = function() {
+      return $(this.el).find("." + this.pop_over_element);
+    };
+
+    PopOverTypeAhead.prototype.hide = function(ev, timeout) {
+      if (timeout == null) {
+        timeout = this.settings.timeout;
+      }
+      this.cancelHide();
+      return this.hideTimeout = setTimeout((function(_this) {
+        return function() {
+          return _this.findElement().hide();
+        };
+      })(this), timeout);
+    };
+
+    PopOverTypeAhead.prototype.appendData = function(data) {
+      this.findElement().find(".popover-inner ul").html("");
+      return _.each(data, (function(_this) {
+        return function(item) {
+          return _this.findElement().find(".popover-inner ul").append(_this.popoverItem(item));
+        };
+      })(this));
+    };
+
+    PopOverTypeAhead.prototype.resolveTargetPosition = function(target) {
+      if (target.parents(".graf--mixtapeEmbed").exists()) {
+        return target.parents(".graf--mixtapeEmbed").position();
+      } else {
+        return target.position();
+      }
+    };
+
+    PopOverTypeAhead.prototype.handleDirection = function(target) {
+      if (target.parents(".graf--mixtapeEmbed").exists()) {
+        return this.findElement().removeClass("popover--bottom").addClass("popover--top");
+      } else {
+        return this.findElement().removeClass("popover--top").addClass("popover--bottom");
+      }
+    };
+
+    PopOverTypeAhead.prototype.render = function() {
+      return $(this.template()).insertAfter(this.editor.$el);
+    };
+
+    return PopOverTypeAhead;
+
+  })(Dante.Editor.PopOver);
+
 }).call(this);
 (function() {
   var utils,
@@ -3817,4 +3969,5 @@
 
 
 
+
 ;