medium-editor-rails 2.0.7 → 2.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d8fb5c49e21f1b03042ba8ad59518b87b3cf192d
-  data.tar.gz: 7ab4220ad510d1fb71fbbb4701a8cc9f0bdad1e7
+  metadata.gz: f7001b46bce6793197c44e01b68a684b5e9cae6d
+  data.tar.gz: e3a755b3437e0d9fbdce90b8302446a68703b7f8
 SHA512:
-  metadata.gz: 2a23c6ac2a76c3d10ca7618f1a9c5497c46e824c0b2f2a267ae615402aeeb135ed9faeac8e46fcb272e1dbdac84060a734e04ca73bf4c21166e52debf385e14c
-  data.tar.gz: ff5df8ce9a1824510b46b8598960b8088c82d1c180f16859e17a12509039c68492d985267cd3d0937f0abbc5c10b677a4b47badee2ced3a97d5724e71f19f864
+  metadata.gz: 08250fccdf9ee1504c27583e385378ae7ad69ce9409b7a06a7ca7400040a24740401621126b23ddd5853444304627d7290b3b4a006dffbd24e148231622059bc
+  data.tar.gz: c26a53eb8a399c26dcaf772cedb9af2b3391155c450100e592a9905f3a0730faf99be895c57e329fc2dfb104da3a4bc219aeee0aeee967e262206ab32c8b8e6d

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 
 #### [Current]
+ * [df257c8](../../commit/df257c8) - __(Ahmet Sezgin Duran)__ Update Medium Editor files
+ * [3a3a5c1](../../commit/3a3a5c1) - __(Ahmet Sezgin Duran)__ Merge tag '2.0.7' into develop
+
+2.0.7
+
+#### 2.0.7
+ * [a7b71c7](../../commit/a7b71c7) - __(Ahmet Sezgin Duran)__ Bump versions 2.0.7 and 3.0.7
  * [8efdb52](../../commit/8efdb52) - __(Ahmet Sezgin Duran)__ Update Medium Editor files
  * [b838798](../../commit/b838798) - __(Ahmet Sezgin Duran)__ Merge tag '2.0.0' into develop
 

data/README.md

@@ -8,7 +8,7 @@ This gem integrates [Medium Editor](https://github.com/daviferreira/medium-edito
 
 ## Version
 
-The latest version of Medium Editor bundled by this gem is [3.0.7](https://github.com/daviferreira/medium-editor/releases)
+The latest version of Medium Editor bundled by this gem is [3.0.9](https://github.com/daviferreira/medium-editor/releases)
 
 ## Installation
 

data/lib/medium-editor-rails/version.rb

@@ -1,6 +1,6 @@
 module MediumEditorRails
   module Rails
-    VERSION = '2.0.7'
-    MEDIUM_EDITOR_VERSION = '3.0.7'
+    VERSION = '2.0.9'
+    MEDIUM_EDITOR_VERSION = '3.0.9'
   end
 end

data/vendor/assets/javascripts/medium-editor.js

@@ -171,6 +171,218 @@ if (!("classList" in document.createElement("_"))) {
   }(self));
 }
 
+/* Blob.js
+ * A Blob implementation.
+ * 2014-07-24
+ *
+ * By Eli Grey, http://eligrey.com
+ * By Devin Samarin, https://github.com/dsamarin
+ * License: X11/MIT
+ *   See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
+ */
+
+/*global self, unescape */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+  plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
+
+(function (view) {
+  "use strict";
+
+  view.URL = view.URL || view.webkitURL;
+
+  if (view.Blob && view.URL) {
+    try {
+      new Blob;
+      return;
+    } catch (e) {}
+  }
+
+  // Internally we use a BlobBuilder implementation to base Blob off of
+  // in order to support older browsers that only have BlobBuilder
+  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
+    var
+        get_class = function(object) {
+        return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
+      }
+      , FakeBlobBuilder = function BlobBuilder() {
+        this.data = [];
+      }
+      , FakeBlob = function Blob(data, type, encoding) {
+        this.data = data;
+        this.size = data.length;
+        this.type = type;
+        this.encoding = encoding;
+      }
+      , FBB_proto = FakeBlobBuilder.prototype
+      , FB_proto = FakeBlob.prototype
+      , FileReaderSync = view.FileReaderSync
+      , FileException = function(type) {
+        this.code = this[this.name = type];
+      }
+      , file_ex_codes = (
+          "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+        + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
+      ).split(" ")
+      , file_ex_code = file_ex_codes.length
+      , real_URL = view.URL || view.webkitURL || view
+      , real_create_object_URL = real_URL.createObjectURL
+      , real_revoke_object_URL = real_URL.revokeObjectURL
+      , URL = real_URL
+      , btoa = view.btoa
+      , atob = view.atob
+
+      , ArrayBuffer = view.ArrayBuffer
+      , Uint8Array = view.Uint8Array
+
+      , origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/
+    ;
+    FakeBlob.fake = FB_proto.fake = true;
+    while (file_ex_code--) {
+      FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
+    }
+    // Polyfill URL
+    if (!real_URL.createObjectURL) {
+      URL = view.URL = function(uri) {
+        var
+            uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
+          , uri_origin
+        ;
+        uri_info.href = uri;
+        if (!("origin" in uri_info)) {
+          if (uri_info.protocol.toLowerCase() === "data:") {
+            uri_info.origin = null;
+          } else {
+            uri_origin = uri.match(origin);
+            uri_info.origin = uri_origin && uri_origin[1];
+          }
+        }
+        return uri_info;
+      };
+    }
+    URL.createObjectURL = function(blob) {
+      var
+          type = blob.type
+        , data_URI_header
+      ;
+      if (type === null) {
+        type = "application/octet-stream";
+      }
+      if (blob instanceof FakeBlob) {
+        data_URI_header = "data:" + type;
+        if (blob.encoding === "base64") {
+          return data_URI_header + ";base64," + blob.data;
+        } else if (blob.encoding === "URI") {
+          return data_URI_header + "," + decodeURIComponent(blob.data);
+        } if (btoa) {
+          return data_URI_header + ";base64," + btoa(blob.data);
+        } else {
+          return data_URI_header + "," + encodeURIComponent(blob.data);
+        }
+      } else if (real_create_object_URL) {
+        return real_create_object_URL.call(real_URL, blob);
+      }
+    };
+    URL.revokeObjectURL = function(object_URL) {
+      if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
+        real_revoke_object_URL.call(real_URL, object_URL);
+      }
+    };
+    FBB_proto.append = function(data/*, endings*/) {
+      var bb = this.data;
+      // decode data to a binary string
+      if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
+        var
+            str = ""
+          , buf = new Uint8Array(data)
+          , i = 0
+          , buf_len = buf.length
+        ;
+        for (; i < buf_len; i++) {
+          str += String.fromCharCode(buf[i]);
+        }
+        bb.push(str);
+      } else if (get_class(data) === "Blob" || get_class(data) === "File") {
+        if (FileReaderSync) {
+          var fr = new FileReaderSync;
+          bb.push(fr.readAsBinaryString(data));
+        } else {
+          // async FileReader won't work as BlobBuilder is sync
+          throw new FileException("NOT_READABLE_ERR");
+        }
+      } else if (data instanceof FakeBlob) {
+        if (data.encoding === "base64" && atob) {
+          bb.push(atob(data.data));
+        } else if (data.encoding === "URI") {
+          bb.push(decodeURIComponent(data.data));
+        } else if (data.encoding === "raw") {
+          bb.push(data.data);
+        }
+      } else {
+        if (typeof data !== "string") {
+          data += ""; // convert unsupported types to strings
+        }
+        // decode UTF-16 to binary string
+        bb.push(unescape(encodeURIComponent(data)));
+      }
+    };
+    FBB_proto.getBlob = function(type) {
+      if (!arguments.length) {
+        type = null;
+      }
+      return new FakeBlob(this.data.join(""), type, "raw");
+    };
+    FBB_proto.toString = function() {
+      return "[object BlobBuilder]";
+    };
+    FB_proto.slice = function(start, end, type) {
+      var args = arguments.length;
+      if (args < 3) {
+        type = null;
+      }
+      return new FakeBlob(
+          this.data.slice(start, args > 1 ? end : this.data.length)
+        , type
+        , this.encoding
+      );
+    };
+    FB_proto.toString = function() {
+      return "[object Blob]";
+    };
+    FB_proto.close = function() {
+      this.size = 0;
+      delete this.data;
+    };
+    return FakeBlobBuilder;
+  }(view));
+
+  view.Blob = function(blobParts, options) {
+    var type = options ? (options.type || "") : "";
+    var builder = new BlobBuilder();
+    if (blobParts) {
+      for (var i = 0, len = blobParts.length; i < len; i++) {
+        if (Uint8Array && blobParts[i] instanceof Uint8Array) {
+          builder.append(blobParts[i].buffer);
+        }
+        else {
+          builder.append(blobParts[i]);
+        }
+      }
+    }
+    var blob = builder.getBlob(type);
+    if (!blob.slice && blob.webkitSlice) {
+      blob.slice = blob.webkitSlice;
+    }
+    return blob;
+  };
+
+  var getPrototypeOf = Object.getPrototypeOf || function(object) {
+    return object.__proto__;
+  };
+  view.Blob.prototype = getPrototypeOf(new view.Blob());
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
+
 (function (root, factory) {
     'use strict';
     if (typeof module === 'object') {
@@ -224,10 +436,6 @@ var Util;
             return copyInto(dest, source);
         },
 
-        extend: function extend(dest, source) {
-            return copyInto(dest, source, true);
-        },
-
         derives: function derives(base, derived) {
             var origPrototype = derived.prototype;
             function Proto() { }
@@ -361,7 +569,7 @@ var Util;
 
         // http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div
         insertHTMLCommand: function (doc, html) {
-            var selection, range, el, fragment, node, lastNode;
+            var selection, range, el, fragment, node, lastNode, toReplace;
 
             if (doc.queryCommandSupported('insertHTML')) {
                 try {
@@ -369,9 +577,21 @@ var Util;
                 } catch (ignore) {}
             }
 
-            selection = window.getSelection();
+            selection = doc.defaultView.getSelection();
             if (selection.getRangeAt && selection.rangeCount) {
                 range = selection.getRangeAt(0);
+                toReplace = range.commonAncestorContainer;
+                // Ensure range covers maximum amount of nodes as possible
+                // By moving up the DOM and selecting ancestors whose only child is the range
+                if ((toReplace.nodeType === 3 && toReplace.nodeValue === range.toString()) ||
+                        (toReplace.nodeType !== 3 && toReplace.innerHTML === range.toString())) {
+                    while (toReplace.parentNode &&
+                            toReplace.parentNode.childNodes.length === 1 &&
+                            !toReplace.parentNode.getAttribute('data-medium-element')) {
+                        toReplace = toReplace.parentNode;
+                    }
+                    range.selectNode(toReplace);
+                }
                 range.deleteContents();
 
                 el = doc.createElement("div");
@@ -471,22 +691,15 @@ var Selection;
         getSelectionHtml: function getSelectionHtml() {
             var i,
                 html = '',
-                sel,
+                sel = this.options.contentWindow.getSelection(),
                 len,
                 container;
-            if (this.options.contentWindow.getSelection !== undefined) {
-                sel = this.options.contentWindow.getSelection();
-                if (sel.rangeCount) {
-                    container = this.options.ownerDocument.createElement('div');
-                    for (i = 0, len = sel.rangeCount; i < len; i += 1) {
-                        container.appendChild(sel.getRangeAt(i).cloneContents());
-                    }
-                    html = container.innerHTML;
-                }
-            } else if (this.options.ownerDocument.selection !== undefined) {
-                if (this.options.ownerDocument.selection.type === 'Text') {
-                    html = this.options.ownerDocument.selection.createRange().htmlText;
+            if (sel.rangeCount) {
+                container = this.options.ownerDocument.createElement('div');
+                for (i = 0, len = sel.rangeCount; i < len; i += 1) {
+                    container.appendChild(sel.getRangeAt(i).cloneContents());
                 }
+                html = container.innerHTML;
             }
             return html;
         },
@@ -873,7 +1086,13 @@ var DefaultButton,
                 computedStyle = this.base.options.contentWindow.getComputedStyle(node, null).getPropertyValue(this.options.style.prop);
                 styleVals.forEach(function (val) {
                     if (!this.knownState) {
-                        this.knownState = isMatch = (computedStyle.indexOf(val) !== -1);
+                        isMatch = (computedStyle.indexOf(val) !== -1);
+                        // text-decoration is not inherited by default
+                        // so if the computed style for text-decoration doesn't match
+                        // don't write to knownState so we can fallback to other checks
+                        if (isMatch || this.options.style.prop !== 'text-decoration') {
+                            this.knownState = isMatch;
+                        }
                     }
                 }.bind(this));
             }
@@ -1050,15 +1269,14 @@ var pasteHandler;
         filterLineBreak: function (el) {
             if (this.isCommonBlock(el.previousElementSibling)) {
                 // remove stray br's following common block elements
-                el.parentNode.removeChild(el);
+                this.removeWithParent(el);
             } else if (this.isCommonBlock(el.parentNode) && (el.parentNode.firstChild === el || el.parentNode.lastChild === el)) {
                 // remove br's just inside open or close tags of a div/p
-                el.parentNode.removeChild(el);
+                this.removeWithParent(el);
             } else if (el.parentNode.childElementCount === 1 && el.parentNode.textContent === '') {
-                // and br's that are the only child of a div/p
+                // and br's that are the only child of elements other than div/p
                 this.removeWithParent(el);
             }
-
         },
 
         // remove an element, including its parent, if it is the only element within its parent
@@ -1067,7 +1285,7 @@ var pasteHandler;
                 if (el.parentNode.parentNode && el.parentNode.childElementCount === 1) {
                     el.parentNode.parentNode.removeChild(el.parentNode);
                 } else {
-                    el.parentNode.removeChild(el.parentNode);
+                    el.parentNode.removeChild(el);
                 }
             }
         },
@@ -1162,10 +1380,10 @@ var AnchorExtension;
 
         // Called by medium-editor to append form to the toolbar
         getForm: function () {
-            if (!this.anchorForm) {
-                this.anchorForm = this.createForm();
+            if (!this.form) {
+                this.form = this.createForm();
             }
-            return this.anchorForm;
+            return this.form;
         },
 
         // Used by medium-editor when the default toolbar is to be displayed
@@ -1185,7 +1403,6 @@ var AnchorExtension;
             this.base.hideToolbarDefaultActions();
             this.getForm().style.display = 'block';
             this.base.setToolbarPosition();
-            this.base.keepToolbarAlive = true;
 
             input.value = link_value || '';
             input.focus();
@@ -1193,20 +1410,20 @@ var AnchorExtension;
 
         // Called by core when tearing down medium-editor (deactivate)
         deactivate: function () {
-            if (!this.anchorForm) {
+            if (!this.form) {
                 return false;
             }
 
-            if (this.anchorForm.parentNode) {
-                this.anchorForm.parentNode.removeChild(this.anchorForm);
+            if (this.form.parentNode) {
+                this.form.parentNode.removeChild(this.form);
             }
 
-            delete this.anchorForm;
+            delete this.form;
         },
 
         // core methods
 
-        doLinkCreation: function () {
+        doFormSave: function () {
             var targetCheckbox = this.getForm().querySelector('.medium-editor-toolbar-anchor-target'),
                 buttonCheckbox = this.getForm().querySelector('.medium-editor-toolbar-anchor-button'),
                 opts = {
@@ -1230,7 +1447,6 @@ var AnchorExtension;
             }
 
             this.base.createLink(opts);
-            this.base.keepToolbarAlive = false;
             this.base.checkSelection();
         },
 
@@ -1241,7 +1457,6 @@ var AnchorExtension;
 
         doFormCancel: function () {
             this.base.restoreSelection();
-            this.base.keepToolbarAlive = false;
             this.base.checkSelection();
         },
 
@@ -1274,9 +1489,6 @@ var AnchorExtension;
             // Handle typing in the textbox
             this.base.on(input, 'keyup', this.handleTextboxKeyup.bind(this));
 
-            // Handle clicks into the textbox
-            this.base.on(input, 'click', this.handleFormClick.bind(this));
-
             // Add save buton
             save.setAttribute('href', '#');
             save.className = 'medium-editor-toobar-save';
@@ -1325,10 +1537,6 @@ var AnchorExtension;
                 form.appendChild(button_label);
             }
 
-            // Handle click (capture) & focus (capture) outside of the form
-            this.base.on(doc.body, 'click', this.handleOutsideInteraction.bind(this), true);
-            this.base.on(doc.body, 'focus', this.handleOutsideInteraction.bind(this), true);
-
             return form;
         },
 
@@ -1336,20 +1544,11 @@ var AnchorExtension;
             return this.getForm().querySelector('input.medium-editor-toolbar-input');
         },
 
-        handleOutsideInteraction: function (event) {
-            if (event.target !== this.getForm() &&
-                    !Util.isDescendant(this.getForm(), event.target) &&
-                    !Util.isDescendant(this.base.toolbarActions, event.target)) {
-                this.base.keepToolbarAlive = false;
-                this.base.checkSelection();
-            }
-        },
-
         handleTextboxKeyup: function (event) {
             // For ENTER -> create the anchor
             if (event.keyCode === Util.keyCode.ENTER) {
                 event.preventDefault();
-                this.doLinkCreation();
+                this.doFormSave();
                 return;
             }
 
@@ -1363,13 +1562,12 @@ var AnchorExtension;
         handleFormClick: function (event) {
             // make sure not to hide form when clicking inside the form
             event.stopPropagation();
-            this.base.keepToolbarAlive = true;
         },
 
         handleSaveClick: function (event) {
             // Clicking Save -> create the anchor
             event.preventDefault();
-            this.doLinkCreation();
+            this.doFormSave();
         },
 
         handleCloseClick: function (event) {
@@ -1382,164 +1580,925 @@ var AnchorExtension;
     AnchorExtension = Util.derives(DefaultButton, AnchorDerived);
 }(window, document));
 
-function MediumEditor(elements, options) {
-    'use strict';
-    return this.init(elements, options);
-}
+var AnchorPreview;
 
-(function () {
+(function (window, document) {
     'use strict';
 
-    MediumEditor.statics = {
-        ButtonsData: ButtonsData,
-        DefaultButton: DefaultButton,
-        AnchorExtension: AnchorExtension
+    AnchorPreview = function () {
+        this.parent = true;
+        this.name = 'anchor-preview';
     };
 
-    MediumEditor.prototype = {
-        defaults: {
-            allowMultiParagraphSelection: true,
-            anchorInputPlaceholder: 'Paste or type a link',
-            anchorInputCheckboxLabel: 'Open in new window',
-            anchorPreviewHideDelay: 500,
-            buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote'],
-            buttonLabels: false,
-            checkLinkFormat: false,
-            cleanPastedHTML: false,
-            delay: 0,
-            diffLeft: 0,
-            diffTop: -10,
-            disableReturn: false,
-            disableDoubleReturn: false,
-            disableToolbar: false,
-            disableEditing: false,
-            disablePlaceholders: false,
-            toolbarAlign: 'center',
-            elementsContainer: false,
-            imageDragging: true,
-            standardizeSelectionStart: false,
-            contentWindow: window,
-            ownerDocument: document,
-            firstHeader: 'h3',
-            forcePlainText: true,
-            placeholder: 'Type your text',
-            secondHeader: 'h4',
-            targetBlank: false,
-            anchorTarget: false,
-            anchorButton: false,
-            anchorButtonClass: 'btn',
-            extensions: {},
-            activeButtonClass: 'medium-editor-button-active',
-            firstButtonClass: 'medium-editor-button-first',
-            lastButtonClass: 'medium-editor-button-last'
+    AnchorPreview.prototype = {
+
+        init: function (instance) {
+            this.base = instance;
+            this.anchorPreview = this.createPreview();
+            this.base.options.elementsContainer.appendChild(this.anchorPreview);
+
+            this.attachToEditables();
         },
 
-        init: function (elements, options) {
-            var uniqueId = 1;
+        getPreviewElement: function () {
+            return this.anchorPreview;
+        },
 
-            this.options = Util.defaults(options, this.defaults);
-            this.setElementSelection(elements);
-            if (this.elements.length === 0) {
-                return;
+        createPreview: function () {
+            var el = this.base.options.ownerDocument.createElement('div');
+
+            el.id = 'medium-editor-anchor-preview-' + this.base.id;
+            el.className = 'medium-editor-anchor-preview';
+            el.innerHTML = this.getTemplate();
+
+            this.base.on(el, 'click', this.handleClick.bind(this));
+
+            return el;
+        },
+
+        getTemplate: function () {
+            return '<div class="medium-editor-toolbar-anchor-preview" id="medium-editor-toolbar-anchor-preview">' +
+                '    <i class="medium-editor-toolbar-anchor-preview-inner"></i>' +
+                '</div>';
+        },
+
+        deactivate: function () {
+            if (this.anchorPreview) {
+                if (this.anchorPreview.parentNode) {
+                    this.anchorPreview.parentNode.removeChild(this.anchorPreview);
+                }
+                delete this.anchorPreview;
             }
+        },
 
-            if (!this.options.elementsContainer) {
-                this.options.elementsContainer = this.options.ownerDocument.body;
+        hidePreview: function () {
+            this.anchorPreview.classList.remove('medium-editor-anchor-preview-active');
+            this.activeAnchor = null;
+        },
+
+        showPreview: function (anchorEl) {
+            if (this.anchorPreview.classList.contains('medium-editor-anchor-preview-active')
+                    || anchorEl.getAttribute('data-disable-preview')) {
+                return true;
             }
 
-            while (this.options.elementsContainer.querySelector('#medium-editor-toolbar-' + uniqueId)) {
-                uniqueId = uniqueId + 1;
+            this.anchorPreview.querySelector('i').textContent = anchorEl.attributes.href.value;
+
+            this.anchorPreview.classList.add('medium-toolbar-arrow-over');
+            this.anchorPreview.classList.remove('medium-toolbar-arrow-under');
+
+            if (!this.anchorPreview.classList.contains('medium-editor-anchor-preview-active')) {
+                this.anchorPreview.classList.add('medium-editor-anchor-preview-active');
             }
 
-            this.id = uniqueId;
+            this.activeAnchor = anchorEl;
 
-            return this.setup();
+            this.positionPreview();
+            this.attachPreviewHandlers();
+
+            return this;
         },
 
-        setup: function () {
-            this.events = [];
-            this.isActive = true;
-            this.initThrottledMethods()
-                .initCommands()
-                .initElements()
-                .bindSelect()
-                .bindDragDrop()
-                .bindPaste()
-                .setPlaceholders()
-                .bindElementActions()
-                .bindWindowActions();
+        positionPreview: function () {
+            var buttonHeight = 40,
+                boundary = this.activeAnchor.getBoundingClientRect(),
+                middleBoundary = (boundary.left + boundary.right) / 2,
+                halfOffsetWidth,
+                defaultLeft;
+
+            halfOffsetWidth = this.anchorPreview.offsetWidth / 2;
+            defaultLeft = this.base.options.diffLeft - halfOffsetWidth;
+
+            this.anchorPreview.style.top = Math.round(buttonHeight + boundary.bottom - this.base.options.diffTop + this.base.options.contentWindow.pageYOffset - this.anchorPreview.offsetHeight) + 'px';
+            if (middleBoundary < halfOffsetWidth) {
+                this.anchorPreview.style.left = defaultLeft + halfOffsetWidth + 'px';
+            } else if ((this.base.options.contentWindow.innerWidth - middleBoundary) < halfOffsetWidth) {
+                this.anchorPreview.style.left = this.base.options.contentWindow.innerWidth + defaultLeft - halfOffsetWidth + 'px';
+            } else {
+                this.anchorPreview.style.left = defaultLeft + middleBoundary + 'px';
+            }
         },
 
-        on: function (target, event, listener, useCapture) {
-            target.addEventListener(event, listener, useCapture);
-            this.events.push([target, event, listener, useCapture]);
+        attachToEditables: function () {
+            this.base.elements.forEach(function (element) {
+                this.base.on(element, 'mouseover', this.handleEditableMouseover.bind(this));
+            }.bind(this));
         },
 
-        off: function (target, event, listener, useCapture) {
-            var index = this.indexOfListener(target, event, listener, useCapture),
-                e;
-            if (index !== -1) {
-                e = this.events.splice(index, 1)[0];
-                e[0].removeEventListener(e[1], e[2], e[3]);
+        handleClick: function (event) {
+            var range,
+                sel,
+                anchorExtension = this.base.getExtensionByName('anchor'),
+                activeAnchor = this.activeAnchor;
+
+            if (anchorExtension && activeAnchor) {
+                range = this.base.options.ownerDocument.createRange();
+                range.selectNodeContents(this.activeAnchor);
+
+                sel = this.base.options.contentWindow.getSelection();
+                sel.removeAllRanges();
+                sel.addRange(range);
+                // Using setTimeout + options.delay because:
+                // We may actually be displaying the anchor form, which should be controlled by options.delay
+                this.base.delay(function () {
+                    if (activeAnchor) {
+                        anchorExtension.showForm(activeAnchor.attributes.href.value);
+                        activeAnchor = null;
+                    }
+                }.bind(this));
             }
+
+            this.hidePreview();
         },
 
-        indexOfListener: function (target, event, listener, useCapture) {
-            var i, n, item;
-            for (i = 0, n = this.events.length; i < n; i = i + 1) {
-                item = this.events[i];
-                if (item[0] === target && item[1] === event && item[2] === listener && item[3] === useCapture) {
-                    return i;
+        handleAnchorMouseout: function (event) {
+            this.anchorToPreview = null;
+            this.base.off(this.activeAnchor, 'mouseout', this.instance_handleAnchorMouseout);
+            this.instance_handleAnchorMouseout = null;
+        },
+
+        handleEditableMouseover: function (event) {
+            /*var overAnchor = true,
+                leaveAnchor = function () {
+                    // mark the anchor as no longer hovered, and stop listening
+                    overAnchor = false;
+                    this.base.off(this.activeAnchor, 'mouseout', leaveAnchor);
+                }.bind(this);*/
+
+            if (event.target && event.target.tagName.toLowerCase() === 'a') {
+
+                // Detect empty href attributes
+                // The browser will make href="" or href="#top"
+                // into absolute urls when accessed as event.targed.href, so check the html
+                if (!/href=["']\S+["']/.test(event.target.outerHTML) || /href=["']#\S+["']/.test(event.target.outerHTML)) {
+                    return true;
+                }
+
+                // only show when hovering on anchors
+                if (this.base.toolbar && this.base.toolbar.isDisplayed()) {
+                    // only show when toolbar is not present
+                    return true;
+                }
+
+                // detach handler for other anchor in case we hovered multiple anchors quickly
+                if (this.activeAnchor && this.activeAnchor !== event.target) {
+                    this.detachPreviewHandlers();
                 }
+
+                this.anchorToPreview = event.target;
+
+                this.instance_handleAnchorMouseout = this.handleAnchorMouseout.bind(this);
+                this.base.on(this.anchorToPreview, 'mouseout', this.instance_handleAnchorMouseout);
+                // Using setTimeout + options.delay because:
+                // - We're going to show the anchor preview according to the configured delay
+                //   if the mouse has not left the anchor tag in that time
+                this.base.delay(function () {
+                    if (this.anchorToPreview) {
+                        //this.activeAnchor = this.anchorToPreview;
+                        this.showPreview(this.anchorToPreview);
+                    }
+                }.bind(this));
             }
-            return -1;
         },
 
-        delay: function (fn) {
-            var self = this;
-            setTimeout(function () {
-                if (self.isActive) {
-                    fn();
-                }
-            }, this.options.delay);
+        handlePreviewMouseover: function (event) {
+            this.lastOver = (new Date()).getTime();
+            this.hovering = true;
         },
 
-        removeAllEvents: function () {
-            var e = this.events.pop();
-            while (e) {
-                e[0].removeEventListener(e[1], e[2], e[3]);
-                e = this.events.pop();
+        handlePreviewMouseout: function (event) {
+            if (!event.relatedTarget || !/anchor-preview/.test(event.relatedTarget.className)) {
+                this.hovering = false;
             }
         },
 
-        initThrottledMethods: function () {
-            var self = this;
+        updatePreview: function () {
+            if (this.hovering) {
+                return true;
+            }
+            var durr = (new Date()).getTime() - this.lastOver;
+            if (durr > this.base.options.anchorPreviewHideDelay) {
+                // hide the preview 1/2 second after mouse leaves the link
+                this.detachPreviewHandlers();
+            }
+        },
 
-            // handleResize is throttled because:
-            // - It will be called when the browser is resizing, which can fire many times very quickly
-            // - For some event (like resize) a slight lag in UI responsiveness is OK and provides performance benefits
-            this.handleResize = Util.throttle(function () {
-                if (self.isActive) {
-                    self.positionToolbarIfShown();
+        detachPreviewHandlers: function () {
+            // cleanup
+            clearInterval(this.interval_timer);
+            if (this.instance_handlePreviewMouseover) {
+                this.base.off(this.anchorPreview, 'mouseover', this.instance_handlePreviewMouseover);
+                this.base.off(this.anchorPreview, 'mouseout', this.instance_handlePreviewMouseout);
+                if (this.activeAnchor) {
+                    this.base.off(this.activeAnchor, 'mouseover', this.instance_handlePreviewMouseover);
+                    this.base.off(this.activeAnchor, 'mouseout', this.instance_handlePreviewMouseout);
                 }
-            });
+            }
 
-            // handleBlur is throttled because:
-            // - This method could be called many times due to the type of event handlers that are calling it
-            // - We want a slight delay so that other events in the stack can run, some of which may
-            //   prevent the toolbar from being hidden (via this.keepToolbarAlive).
-            this.handleBlur = Util.throttle(function () {
-                if (self.isActive && !self.keepToolbarAlive) {
-                    self.hideToolbarActions();
-                }
-            });
+            this.hidePreview();
 
-            return this;
+            this.hovering = this.instance_handlePreviewMouseover = this.instance_handlePreviewMouseout = null;
         },
 
-        initElements: function () {
-            var i,
-                addToolbar = false;
+        // TODO: break up method and extract out handlers
+        attachPreviewHandlers: function () {
+            this.lastOver = (new Date()).getTime();
+            this.hovering = true;
+
+            this.instance_handlePreviewMouseover = this.handlePreviewMouseover.bind(this);
+            this.instance_handlePreviewMouseout = this.handlePreviewMouseout.bind(this);
+
+            this.interval_timer = setInterval(this.updatePreview.bind(this), 200);
+
+            this.base.on(this.anchorPreview, 'mouseover', this.instance_handlePreviewMouseover);
+            this.base.on(this.anchorPreview, 'mouseout', this.instance_handlePreviewMouseout);
+            this.base.on(this.activeAnchor, 'mouseover', this.instance_handlePreviewMouseover);
+            this.base.on(this.activeAnchor, 'mouseout', this.instance_handlePreviewMouseout);
+        }
+    };
+}(window, document));
+
+var Toolbar;
+
+(function (window, document) {
+    'use strict';
+
+    Toolbar = function Toolbar(instance) {
+        this.base = instance;
+        this.options = instance.options;
+        this.initThrottledMethods();
+    };
+
+    Toolbar.prototype = {
+
+        // Toolbar creation/deletion
+
+        createToolbar: function () {
+            var toolbar = this.base.options.ownerDocument.createElement('div');
+
+            toolbar.id = 'medium-editor-toolbar-' + this.base.id;
+            toolbar.className = 'medium-editor-toolbar';
+
+            if (this.options.staticToolbar) {
+                toolbar.className += " static-toolbar";
+            } else {
+                toolbar.className += " stalker-toolbar";
+            }
+
+            toolbar.appendChild(this.createToolbarButtons());
+
+            // Add any forms that extensions may have
+            this.base.commands.forEach(function (extension) {
+                if (extension.hasForm) {
+                    toolbar.appendChild(extension.getForm());
+                }
+            });
+
+            this.attachEventHandlers();
+
+            return toolbar;
+        },
+
+        createToolbarButtons: function () {
+            var ul = this.base.options.ownerDocument.createElement('ul'),
+                li,
+                btn,
+                buttons;
+
+            ul.id = 'medium-editor-toolbar-actions' + this.base.id;
+            ul.className = 'medium-editor-toolbar-actions clearfix';
+            ul.style.display = 'block';
+
+            this.base.commands.forEach(function (extension) {
+                if (typeof extension.getButton === 'function') {
+                    btn = extension.getButton(this.base);
+                    li = this.base.options.ownerDocument.createElement('li');
+                    if (Util.isElement(btn)) {
+                        li.appendChild(btn);
+                    } else {
+                        li.innerHTML = btn;
+                    }
+                    ul.appendChild(li);
+                }
+            }.bind(this));
+
+            buttons = ul.querySelectorAll('button');
+            if (buttons.length > 0) {
+                buttons[0].classList.add(this.options.firstButtonClass);
+                buttons[buttons.length - 1].classList.add(this.options.lastButtonClass);
+            }
+
+            return ul;
+        },
+
+        deactivate: function () {
+            if (this.toolbar) {
+                if (this.toolbar.parentNode) {
+                    this.toolbar.parentNode.removeChild(this.toolbar);
+                }
+                delete this.toolbar;
+            }
+        },
+
+        // Toolbar accessors
+
+        getToolbarElement: function () {
+            if (!this.toolbar) {
+                this.toolbar = this.createToolbar();
+            }
+
+            return this.toolbar;
+        },
+
+        getToolbarActionsElement: function () {
+            return this.getToolbarElement().querySelector('.medium-editor-toolbar-actions');
+        },
+
+        // Toolbar event handlers
+
+        initThrottledMethods: function () {
+            // throttledPositionToolbar is throttled because:
+            // - It will be called when the browser is resizing, which can fire many times very quickly
+            // - For some event (like resize) a slight lag in UI responsiveness is OK and provides performance benefits
+            this.throttledPositionToolbar = Util.throttle(function (event) {
+                if (this.base.isActive) {
+                    this.positionToolbarIfShown();
+                }
+            }.bind(this));
+
+            // throttledHideToolbarActions is throttled because:
+            // - This method could be called many times due to the type of event handlers that are calling it
+            // - We want a slight delay so that other events in the stack can run, some of which may
+            //   prevent the toolbar from being hidden
+            this.throttledHideToolbarActions = Util.throttle(function (event) {
+                if (this.base.isActive) {
+                    this.hideToolbarActions();
+                }
+            }.bind(this));
+        },
+
+        attachEventHandlers: function () {
+            // Handle mouseup on document for updating the selection in the toolbar
+            this.base.on(this.options.ownerDocument.documentElement, 'mouseup', this.handleDocumentMouseup.bind(this));
+
+            // Add a scroll event for sticky toolbar
+            if (this.options.staticToolbar && this.options.stickyToolbar) {
+                // On scroll (capture), re-position the toolbar
+                this.base.on(this.options.contentWindow, 'scroll', this.handleWindowScroll.bind(this), true);
+            }
+
+            // On resize, re-position the toolbar
+            this.base.on(this.options.contentWindow, 'resize', this.handleWindowResize.bind(this));
+
+            // Handlers for each contentedtiable element
+            this.base.elements.forEach(function (element) {
+                // Attach click handler to each contenteditable element
+                this.base.on(element, 'click', this.handleEditableClick.bind(this));
+
+                // Attach keyup handler to each contenteditable element
+                this.base.on(element, 'keyup', this.handleEditableKeyup.bind(this));
+
+                // Attach blur handler to each contenteditable element
+                this.base.on(element, 'blur', this.handleEditableBlur.bind(this));
+            }.bind(this));
+        },
+
+        handleWindowScroll: function (event) {
+            this.positionToolbarIfShown();
+        },
+
+        handleWindowResize: function (event) {
+            this.throttledPositionToolbar();
+        },
+
+        handleDocumentMouseup: function (event) {
+            // Do not trigger checkState when mouseup fires over the toolbar
+            if (event &&
+                    event.target &&
+                    Util.isDescendant(this.getToolbarElement(), event.target)) {
+                return false;
+            }
+            this.checkState();
+        },
+
+        handleEditableClick: function (event) {
+            // Delay the call to checkState to handle bug where selection is empty
+            // immediately after clicking inside a pre-existing selection
+            setTimeout(function () {
+                this.checkState();
+            }.bind(this), 0);
+        },
+
+        handleEditableKeyup: function (event) {
+            this.checkState();
+        },
+
+        handleEditableBlur: function (event) {
+            // Do not trigger checkState when bluring the editable area and clicking into the toolbar
+            if (event &&
+                    event.relatedTarget &&
+                    Util.isDescendant(this.getToolbarElement(), event.relatedTarget)) {
+                return false;
+            }
+            this.checkState();
+        },
+
+        handleBlur: function (event) {
+            // Hide the toolbar after a small delay so we can prevent this on toolbar click
+            this.throttledHideToolbarActions();
+        },
+
+        // Hiding/showing toolbar
+
+        isDisplayed: function () {
+            return this.getToolbarElement().classList.contains('medium-editor-toolbar-active');
+        },
+
+        showToolbar: function () {
+            if (!this.isDisplayed()) {
+                this.getToolbarElement().classList.add('medium-editor-toolbar-active');
+                if (typeof this.options.onShowToolbar === 'function') {
+                    this.options.onShowToolbar();
+                }
+            }
+        },
+
+        hideToolbar: function () {
+            if (this.isDisplayed()) {
+                this.getToolbarElement().classList.remove('medium-editor-toolbar-active');
+                if (typeof this.options.onHideToolbar === 'function') {
+                    this.options.onHideToolbar();
+                }
+            }
+        },
+
+        hideToolbarActions: function () {
+            this.base.commands.forEach(function (extension) {
+                if (extension.onHide && typeof extension.onHide === 'function') {
+                    extension.onHide();
+                }
+            });
+            this.hideToolbar();
+        },
+
+        isToolbarDefaultActionsDisplayed: function () {
+            return this.getToolbarActionsElement().style.display === 'block';
+        },
+
+        hideToolbarDefaultActions: function () {
+            if (this.isToolbarDefaultActionsDisplayed()) {
+                this.getToolbarActionsElement().style.display = 'none';
+            }
+        },
+
+        showToolbarDefaultActions: function () {
+            this.hideExtensionForms();
+
+            if (!this.isToolbarDefaultActionsDisplayed()) {
+                this.getToolbarActionsElement().style.display = 'block';
+            }
+
+            // Using setTimeout + options.delay because:
+            // We will actually be displaying the toolbar, which should be controlled by options.delay
+            this.base.delay(function () {
+                this.showToolbar();
+            }.bind(this));
+        },
+
+        hideExtensionForms: function () {
+            // Hide all extension forms
+            this.base.commands.forEach(function (extension) {
+                if (extension.hasForm && extension.isDisplayed()) {
+                    extension.hideForm();
+                }
+            });
+        },
+
+        // Responding to changes in user selection
+
+        // Checks for existance of multiple block elements in the current selection
+        multipleBlockElementsSelected: function () {
+            /*jslint regexp: true*/
+            var selectionHtml = Selection.getSelectionHtml.call(this).replace(/<[\S]+><\/[\S]+>/gim, ''),
+                hasMultiParagraphs = selectionHtml.match(/<(p|h[1-6]|blockquote)[^>]*>/g);
+            /*jslint regexp: false*/
+
+            return !!hasMultiParagraphs && hasMultiParagraphs.length > 1;
+        },
+
+        // TODO: selection and selectionRange should be properties of the
+        //       Selection object
+        checkSelectionElement: function (newSelection, selectionElement) {
+            var i,
+                adjacentNode,
+                offset = 0,
+                newRange;
+            this.base.selection = newSelection;
+            this.base.selectionRange = this.base.selection.getRangeAt(0);
+
+            /*
+            * In firefox, there are cases (ie doubleclick of a word) where the selectionRange start
+            * will be at the very end of an element.  In other browsers, the selectionRange start
+            * would instead be at the very beginning of an element that actually has content.
+            * example:
+            *   <span>foo</span><span>bar</span>
+            *
+            * If the text 'bar' is selected, most browsers will have the selectionRange start at the beginning
+            * of the 'bar' span.  However, there are cases where firefox will have the selectionRange start
+            * at the end of the 'foo' span.  The contenteditable behavior will be ok, but if there are any
+            * properties on the 'bar' span, they won't be reflected accurately in the toolbar
+            * (ie 'Bold' button wouldn't be active)
+            *
+            * So, for cases where the selectionRange start is at the end of an element/node, find the next
+            * adjacent text node that actually has content in it, and move the selectionRange start there.
+            */
+            if (this.options.standardizeSelectionStart &&
+                    this.base.selectionRange.startContainer.nodeValue &&
+                    (this.base.selectionRange.startOffset === this.base.selectionRange.startContainer.nodeValue.length)) {
+                adjacentNode = Util.findAdjacentTextNodeWithContent(Selection.getSelectionElement(this.options.contentWindow), this.base.selectionRange.startContainer, this.options.ownerDocument);
+                if (adjacentNode) {
+                    offset = 0;
+                    while (adjacentNode.nodeValue.substr(offset, 1).trim().length === 0) {
+                        offset = offset + 1;
+                    }
+                    newRange = this.options.ownerDocument.createRange();
+                    newRange.setStart(adjacentNode, offset);
+                    newRange.setEnd(this.base.selectionRange.endContainer, this.base.selectionRange.endOffset);
+                    this.base.selection.removeAllRanges();
+                    this.base.selection.addRange(newRange);
+                    this.base.selectionRange = newRange;
+                }
+            }
+
+            for (i = 0; i < this.base.elements.length; i += 1) {
+                if (this.base.elements[i] === selectionElement) {
+                    this.showAndUpdateToolbar();
+                    return;
+                }
+            }
+
+            if (!this.options.staticToolbar) {
+                this.hideToolbarActions();
+            }
+        },
+
+        checkState: function () {
+            var newSelection,
+                selectionElement;
+
+            if (!this.base.preventSelectionUpdates) {
+                newSelection = this.options.contentWindow.getSelection();
+                if ((!this.options.updateOnEmptySelection && newSelection.toString().trim() === '') ||
+                        (this.options.allowMultiParagraphSelection === false && this.multipleBlockElementsSelected()) ||
+                        Selection.selectionInContentEditableFalse(this.options.contentWindow)) {
+                    if (!this.options.staticToolbar) {
+                        this.hideToolbarActions();
+                    } else {
+                        this.showAndUpdateToolbar();
+                    }
+
+                } else {
+                    selectionElement = Selection.getSelectionElement(this.options.contentWindow);
+                    if (!selectionElement || selectionElement.getAttribute('data-disable-toolbar')) {
+                        if (!this.options.staticToolbar) {
+                            this.hideToolbarActions();
+                        }
+                    } else {
+                        this.checkSelectionElement(newSelection, selectionElement);
+                    }
+                }
+            }
+        },
+
+        // Updating the toolbar
+
+        showAndUpdateToolbar: function () {
+            this.setToolbarButtonStates();
+            this.showToolbarDefaultActions();
+            this.setToolbarPosition();
+        },
+
+        setToolbarButtonStates: function () {
+            this.base.commands.forEach(function (extension) {
+                if (typeof extension.isActive === 'function') {
+                    extension.setInactive();
+                }
+            }.bind(this));
+            this.checkActiveButtons();
+        },
+
+        checkActiveButtons: function () {
+            var manualStateChecks = [],
+                queryState = null,
+                parentNode,
+                updateExtensionState = function (extension) {
+                    if (typeof extension.checkState === 'function') {
+                        extension.checkState(parentNode);
+                    } else if (typeof extension.isActive === 'function' &&
+                               typeof extension.isAlreadyApplied === 'function') {
+                        if (!extension.isActive() && extension.isAlreadyApplied(parentNode)) {
+                            extension.setActive();
+                        }
+                    }
+                };
+
+            if (!this.base.selectionRange) {
+                return;
+            }
+
+            parentNode = Selection.getSelectedParentElement(this.base.selectionRange);
+
+            // Loop through all commands
+            this.base.commands.forEach(function (command) {
+                // For those commands where we can use document.queryCommandState(), do so
+                if (typeof command.queryCommandState === 'function') {
+                    queryState = command.queryCommandState();
+                    // If queryCommandState returns a valid value, we can trust the browser
+                    // and don't need to do our manual checks
+                    if (queryState !== null) {
+                        if (queryState) {
+                            command.setActive();
+                        }
+                        return;
+                    }
+                }
+                // We can't use queryCommandState for this command, so add to manualStateChecks
+                manualStateChecks.push(command);
+            });
+
+            // Climb up the DOM and do manual checks for whether a certain command is currently enabled for this node
+            while (parentNode.tagName !== undefined && Util.parentElements.indexOf(parentNode.tagName.toLowerCase) === -1) {
+                manualStateChecks.forEach(updateExtensionState);
+
+                // we can abort the search upwards if we leave the contentEditable element
+                if (this.base.elements.indexOf(parentNode) !== -1) {
+                    break;
+                }
+                parentNode = parentNode.parentNode;
+            }
+        },
+
+        // Positioning toolbar
+
+        positionToolbarIfShown: function () {
+            if (this.isDisplayed()) {
+                this.setToolbarPosition();
+            }
+        },
+
+        setToolbarPosition: function () {
+            var container = Selection.getSelectionElement(this.options.contentWindow),
+                selection = this.options.contentWindow.getSelection(),
+                anchorPreview;
+
+            // If there isn't a valid selection, bail
+            if (!container || !this.options.contentWindow.getSelection().focusNode) {
+                return this;
+            }
+
+            // If the container isn't part of this medium-editor instance, bail
+            if (this.base.elements.indexOf(container) === -1) {
+                return this;
+            }
+
+            if (this.options.staticToolbar) {
+                this.showToolbar();
+                this.positionStaticToolbar(container);
+
+            } else if (!selection.isCollapsed) {
+                this.showToolbar();
+                this.positionToolbar(selection);
+            }
+
+            anchorPreview = this.base.getExtensionByName('anchor-preview');
+
+            if (anchorPreview && typeof anchorPreview.hidePreview === 'function') {
+                anchorPreview.hidePreview();
+            }
+        },
+
+        positionStaticToolbar: function (container) {
+            // position the toolbar at left 0, so we can get the real width of the toolbar
+            this.getToolbarElement().style.left = '0';
+
+            // document.documentElement for IE 9
+            var scrollTop = (this.options.ownerDocument.documentElement && this.options.ownerDocument.documentElement.scrollTop) || this.options.ownerDocument.body.scrollTop,
+                windowWidth = this.options.contentWindow.innerWidth,
+                toolbarElement = this.getToolbarElement(),
+                containerRect = container.getBoundingClientRect(),
+                containerTop = containerRect.top + scrollTop,
+                containerCenter = (containerRect.left + (containerRect.width / 2)),
+                toolbarHeight = toolbarElement.offsetHeight,
+                toolbarWidth = toolbarElement.offsetWidth,
+                halfOffsetWidth = toolbarWidth / 2,
+                targetLeft;
+
+            if (this.options.stickyToolbar) {
+                // If it's beyond the height of the editor, position it at the bottom of the editor
+                if (scrollTop > (containerTop + container.offsetHeight - toolbarHeight)) {
+                    toolbarElement.style.top = (containerTop + container.offsetHeight - toolbarHeight) + 'px';
+                    toolbarElement.classList.remove('sticky-toolbar');
+
+                // Stick the toolbar to the top of the window
+                } else if (scrollTop > (containerTop - toolbarHeight)) {
+                    toolbarElement.classList.add('sticky-toolbar');
+                    toolbarElement.style.top = "0px";
+
+                // Normal static toolbar position
+                } else {
+                    toolbarElement.classList.remove('sticky-toolbar');
+                    toolbarElement.style.top = containerTop - toolbarHeight + "px";
+                }
+            } else {
+                toolbarElement.style.top = containerTop - toolbarHeight + "px";
+            }
+
+            if (this.options.toolbarAlign === 'left') {
+                targetLeft = containerRect.left;
+            } else if (this.options.toolbarAlign === 'center') {
+                targetLeft = containerCenter - halfOffsetWidth;
+            } else if (this.options.toolbarAlign === 'right') {
+                targetLeft = containerRect.right - toolbarWidth;
+            }
+
+            if (targetLeft < 0) {
+                targetLeft = 0;
+            } else if ((targetLeft + toolbarWidth) > windowWidth) {
+                targetLeft = windowWidth - toolbarWidth;
+            }
+
+            toolbarElement.style.left = targetLeft + 'px';
+        },
+
+        positionToolbar: function (selection) {
+            // position the toolbar at left 0, so we can get the real width of the toolbar
+            this.getToolbarElement().style.left = '0';
+
+            var windowWidth = this.options.contentWindow.innerWidth,
+                range = selection.getRangeAt(0),
+                boundary = range.getBoundingClientRect(),
+                middleBoundary = (boundary.left + boundary.right) / 2,
+                toolbarElement = this.getToolbarElement(),
+                toolbarHeight = toolbarElement.offsetHeight,
+                toolbarWidth = toolbarElement.offsetWidth,
+                halfOffsetWidth = toolbarWidth / 2,
+                buttonHeight = 50,
+                defaultLeft = this.options.diffLeft - halfOffsetWidth;
+
+            if (boundary.top < buttonHeight) {
+                toolbarElement.classList.add('medium-toolbar-arrow-over');
+                toolbarElement.classList.remove('medium-toolbar-arrow-under');
+                toolbarElement.style.top = buttonHeight + boundary.bottom - this.options.diffTop + this.options.contentWindow.pageYOffset - toolbarHeight + 'px';
+            } else {
+                toolbarElement.classList.add('medium-toolbar-arrow-under');
+                toolbarElement.classList.remove('medium-toolbar-arrow-over');
+                toolbarElement.style.top = boundary.top + this.options.diffTop + this.options.contentWindow.pageYOffset - toolbarHeight + 'px';
+            }
+            if (middleBoundary < halfOffsetWidth) {
+                toolbarElement.style.left = defaultLeft + halfOffsetWidth + 'px';
+            } else if ((windowWidth - middleBoundary) < halfOffsetWidth) {
+                toolbarElement.style.left = windowWidth + defaultLeft - halfOffsetWidth + 'px';
+            } else {
+                toolbarElement.style.left = defaultLeft + middleBoundary + 'px';
+            }
+        }
+    };
+}(window, document));
+
+function MediumEditor(elements, options) {
+    'use strict';
+    return this.init(elements, options);
+}
+
+(function () {
+    'use strict';
+
+    MediumEditor.statics = {
+        ButtonsData: ButtonsData,
+        DefaultButton: DefaultButton,
+        AnchorExtension: AnchorExtension,
+        Toolbar: Toolbar,
+        AnchorPreview: AnchorPreview
+    };
+
+    MediumEditor.prototype = {
+        defaults: {
+            allowMultiParagraphSelection: true,
+            anchorInputPlaceholder: 'Paste or type a link',
+            anchorInputCheckboxLabel: 'Open in new window',
+            anchorPreviewHideDelay: 500,
+            buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote'],
+            buttonLabels: false,
+            checkLinkFormat: false,
+            cleanPastedHTML: false,
+            delay: 0,
+            diffLeft: 0,
+            diffTop: -10,
+            disableReturn: false,
+            disableDoubleReturn: false,
+            disableToolbar: false,
+            disableAnchorPreview: false,
+            disableEditing: false,
+            disablePlaceholders: false,
+            toolbarAlign: 'center',
+            elementsContainer: false,
+            imageDragging: true,
+            standardizeSelectionStart: false,
+            contentWindow: window,
+            ownerDocument: document,
+            firstHeader: 'h3',
+            forcePlainText: true,
+            placeholder: 'Type your text',
+            secondHeader: 'h4',
+            targetBlank: false,
+            anchorTarget: false,
+            anchorButton: false,
+            anchorButtonClass: 'btn',
+            extensions: {},
+            activeButtonClass: 'medium-editor-button-active',
+            firstButtonClass: 'medium-editor-button-first',
+            lastButtonClass: 'medium-editor-button-last'
+        },
+
+        init: function (elements, options) {
+            var uniqueId = 1;
+
+            this.options = Util.defaults(options, this.defaults);
+            this.setElementSelection(elements);
+            if (this.elements.length === 0) {
+                return;
+            }
+
+            if (!this.options.elementsContainer) {
+                this.options.elementsContainer = this.options.ownerDocument.body;
+            }
+
+            while (this.options.elementsContainer.querySelector('#medium-editor-toolbar-' + uniqueId)) {
+                uniqueId = uniqueId + 1;
+            }
+
+            this.id = uniqueId;
+
+            return this.setup();
+        },
+
+        setup: function () {
+            this.events = [];
+            this.isActive = true;
+            this.initCommands()
+                .initElements()
+                .bindDragDrop()
+                .bindPaste()
+                .setPlaceholders()
+                .bindElementActions()
+                .bindBlur();
+        },
+
+        on: function (target, event, listener, useCapture) {
+            target.addEventListener(event, listener, useCapture);
+            this.events.push([target, event, listener, useCapture]);
+        },
+
+        off: function (target, event, listener, useCapture) {
+            var index = this.indexOfListener(target, event, listener, useCapture),
+                e;
+            if (index !== -1) {
+                e = this.events.splice(index, 1)[0];
+                e[0].removeEventListener(e[1], e[2], e[3]);
+            }
+        },
+
+        indexOfListener: function (target, event, listener, useCapture) {
+            var i, n, item;
+            for (i = 0, n = this.events.length; i < n; i = i + 1) {
+                item = this.events[i];
+                if (item[0] === target && item[1] === event && item[2] === listener && item[3] === useCapture) {
+                    return i;
+                }
+            }
+            return -1;
+        },
+
+        delay: function (fn) {
+            var self = this;
+            setTimeout(function () {
+                if (self.isActive) {
+                    fn();
+                }
+            }, this.options.delay);
+        },
+
+        removeAllEvents: function () {
+            var e = this.events.pop();
+            while (e) {
+                e[0].removeEventListener(e[1], e[2], e[3]);
+                e = this.events.pop();
+            }
+        },
+
+        initElements: function () {
+            var i,
+                addToolbar = false;
             for (i = 0; i < this.elements.length; i += 1) {
                 if (!this.options.disableEditing && !this.elements[i].getAttribute('data-disable-editing')) {
                     this.elements[i].setAttribute('contentEditable', true);
@@ -1557,9 +2516,7 @@ function MediumEditor(elements, options) {
             }
             // Init toolbar
             if (addToolbar) {
-                this.initToolbar()
-                    .setFirstAndLastButtons()
-                    .bindAnchorPreview();
+                this.initToolbar();
             }
             return this;
         },
@@ -1585,6 +2542,9 @@ function MediumEditor(elements, options) {
                 blurFunction = function (e) {
                     var isDescendantOfEditorElements = false,
                         selection = self.options.contentWindow.getSelection(),
+                        toolbarEl = (self.toolbar) ? self.toolbar.getToolbarElement() : null,
+                        anchorPreview = self.getExtensionByName('anchor-preview'),
+                        previewEl = (anchorPreview && anchorPreview.getPreviewElement) ? anchorPreview.getPreviewElement() : null,
                         selRange = selection.isCollapsed ?
                                    null :
                                    Selection.getSelectedParentElement(selection.getRangeAt(0)),
@@ -1594,26 +2554,27 @@ function MediumEditor(elements, options) {
                     // to disapper when selecting from right to left and
                     // the selection ends at the beginning of the text.
                     for (i = 0; i < self.elements.length; i += 1) {
-                        if (Util.isDescendant(self.elements[i], e.target)
+                        if (self.elements[i] === e.target
+                                || Util.isDescendant(self.elements[i], e.target)
                                 || Util.isDescendant(self.elements[i], selRange)) {
                             isDescendantOfEditorElements = true;
                             break;
                         }
                     }
-                    // If it's not part of the editor, or the toolbar
-                    if (e.target !== self.toolbar
-                            && self.elements.indexOf(e.target) === -1
-                            && !isDescendantOfEditorElements
-                            && !Util.isDescendant(self.toolbar, e.target)
-                            && !Util.isDescendant(self.anchorPreview, e.target)) {
+                    // If it's not part of the editor, toolbar, or anchor preview
+                    if (!isDescendantOfEditorElements
+                            && (!toolbarEl || (toolbarEl !== e.target && !Util.isDescendant(toolbarEl, e.target)))
+                            && (!previewEl || (previewEl !== e.target && !Util.isDescendant(previewEl, e.target)))) {
 
                         // Activate the placeholder
                         if (!self.options.disablePlaceholders) {
                             self.placeholderWrapper(e, self.elements[0]);
                         }
 
-                        // Hide the toolbar after a small delay so we can prevent this on toolbar click
-                        self.handleBlur();
+                        // Let the toolbar know that we've detected a blur
+                        if (self.toolbar) {
+                            self.toolbar.handleBlur(e);
+                        }
                     }
                 };
 
@@ -1625,18 +2586,12 @@ function MediumEditor(elements, options) {
         },
 
         bindClick: function (i) {
-            var self = this;
-
-            this.on(this.elements[i], 'click', function () {
-                if (!self.options.disablePlaceholders) {
+            if (!this.options.disablePlaceholders) {
+                this.on(this.elements[i], 'click', function () {
                     // Remove placeholder
                     this.classList.remove('medium-editor-placeholder');
-                }
-
-                if (self.options.staticToolbar) {
-                    self.setToolbarPosition();
-                }
-            });
+                });
+            }
 
             return this;
         },
@@ -1707,6 +2662,32 @@ function MediumEditor(elements, options) {
             return extension;
         },
 
+        shouldAddDefaultAnchorPreview: function () {
+            var i,
+                shouldAdd = false;
+
+            // If anchor-preview is disabled, don't add
+            if (this.options.disableAnchorPreview) {
+                return false;
+            }
+            // If anchor-preview extension has been overriden, don't add
+            if (this.options.extensions['anchor-preview']) {
+                return false;
+            }
+            // If toolbar is disabled, don't add
+            if (this.options.disableToolbar) {
+                return false;
+            }
+            // If all elements have 'data-disable-toolbar' attribute, don't add
+            for (i = 0; i < this.elements.length; i += 1) {
+                if (!this.elements[i].getAttribute('data-disable-toolbar')) {
+                    shouldAdd = true;
+                }
+            }
+
+            return shouldAdd;
+        },
+
         initCommands: function () {
             var buttons = this.options.buttons,
                 extensions = this.options.extensions,
@@ -1733,6 +2714,11 @@ function MediumEditor(elements, options) {
                 }
             }
 
+            // Add AnchorPreview as extension if needed
+            if (this.shouldAddDefaultAnchorPreview()) {
+                this.commands.push(this.initExtension(new AnchorPreview(), 'anchor-preview'));
+            }
+
             return this;
         },
 
@@ -1794,7 +2780,10 @@ function MediumEditor(elements, options) {
                     tagName,
                     editorElement;
 
-                if (node && node.getAttribute('data-medium-element') && node.children.length === 0 && !(self.options.disableReturn || node.getAttribute('data-disable-return'))) {
+                if (node
+                        && node.getAttribute('data-medium-element')
+                        && node.children.length === 0
+                        && !(self.options.disableReturn || node.getAttribute('data-disable-return'))) {
                     self.options.ownerDocument.execCommand('formatBlock', false, 'p');
                 }
                 if (e.which === Util.keyCode.ENTER) {
@@ -1804,16 +2793,15 @@ function MediumEditor(elements, options) {
 
                     if (!(self.options.disableReturn || editorElement.getAttribute('data-disable-return')) &&
                             tagName !== 'li' && !Util.isListItemChild(node)) {
-                        if (!e.shiftKey) {
-
-                            // paragraph creation should not be forced within a header tag
+                        // For anchor tags, unlink
+                        if (tagName === 'a') {
+                            self.options.ownerDocument.execCommand('unlink', false, null);
+                        } else if (!e.shiftKey) {
+                            // only format block if this is not a header tag
                             if (!/h\d/.test(tagName)) {
                                 self.options.ownerDocument.execCommand('formatBlock', false, 'p');
                             }
                         }
-                        if (tagName === 'a') {
-                            self.options.ownerDocument.execCommand('unlink', false, null);
-                        }
                     }
                 }
             });
@@ -1849,7 +2837,7 @@ function MediumEditor(elements, options) {
 
                     if (tag === 'pre') {
                         e.preventDefault();
-                        self.options.ownerDocument.execCommand('insertHtml', null, '    ');
+                        Util.insertHTMLCommand(self.options.ownerDocument, '    ');
                     }
 
                     // Tab to indent list structures!
@@ -1858,9 +2846,9 @@ function MediumEditor(elements, options) {
 
                         // If Shift is down, outdent, otherwise indent
                         if (e.shiftKey) {
-                            self.options.ownerDocument.execCommand('outdent', e);
+                            self.options.ownerDocument.execCommand('outdent', false, null);
                         } else {
-                            self.options.ownerDocument.execCommand('indent', e);
+                            self.options.ownerDocument.execCommand('indent', false, null);
                         }
                     }
                 } else if (e.which === Util.keyCode.BACKSPACE || e.which === Util.keyCode.DELETE || e.which === Util.keyCode.ENTER) {
@@ -1871,7 +2859,7 @@ function MediumEditor(elements, options) {
                 } else if (e.ctrlKey || e.metaKey) {
                     key = String.fromCharCode(e.which || e.keyCode).toLowerCase();
                     self.commands.forEach(function (extension) {
-                        if (extension.options.key && extension.options.key === key) {
+                        if (extension.options && extension.options.key && extension.options.key === key) {
                             extension.handleClick(e);
                         }
                     });
@@ -1922,455 +2910,102 @@ function MediumEditor(elements, options) {
 
                 // remove node and move cursor to start of header
                 range = document.createRange();
-                sel = window.getSelection();
+                sel = this.options.contentWindow.getSelection();
 
                 range.setStart(node.nextElementSibling, 0);
                 range.collapse(true);
 
-                sel.removeAllRanges();
-                sel.addRange(range);
-
-                node.previousElementSibling.parentNode.removeChild(node);
-
-                e.preventDefault();
-            }
-        },
-
-        initToolbar: function () {
-            if (this.toolbar) {
-                return this;
-            }
-            this.toolbar = this.createToolbar();
-            this.keepToolbarAlive = false;
-            this.toolbarActions = this.toolbar.querySelector('.medium-editor-toolbar-actions');
-            this.anchorPreview = this.createAnchorPreview();
-
-            return this;
-        },
-
-        createToolbar: function () {
-            var toolbar = this.options.ownerDocument.createElement('div');
-            toolbar.id = 'medium-editor-toolbar-' + this.id;
-            toolbar.className = 'medium-editor-toolbar';
-
-            if (this.options.staticToolbar) {
-                toolbar.className += " static-toolbar";
-            } else {
-                toolbar.className += " stalker-toolbar";
-            }
-
-            toolbar.appendChild(this.toolbarButtons());
-
-            // Add any forms that extensions may have
-            this.commands.forEach(function (extension) {
-                if (extension.hasForm) {
-                    toolbar.appendChild(extension.getForm());
-                }
-            });
-
-            this.options.elementsContainer.appendChild(toolbar);
-            return toolbar;
-        },
-
-        //TODO: actionTemplate
-        toolbarButtons: function () {
-            var ul = this.options.ownerDocument.createElement('ul'),
-                li,
-                btn;
-
-            ul.id = 'medium-editor-toolbar-actions' + this.id;
-            ul.className = 'medium-editor-toolbar-actions clearfix';
-
-            this.commands.forEach(function (extension) {
-                if (typeof extension.getButton === 'function') {
-                    btn = extension.getButton(this);
-                    li = this.options.ownerDocument.createElement('li');
-                    if (Util.isElement(btn)) {
-                        li.appendChild(btn);
-                    } else {
-                        li.innerHTML = btn;
-                    }
-                    ul.appendChild(li);
-                }
-            }.bind(this));
-
-            return ul;
-        },
-
-        bindSelect: function () {
-            var i,
-                blurHelper = function (event) {
-                    // Do not close the toolbar when bluring the editable area and clicking into the anchor form
-                    if (event &&
-                            event.type &&
-                            event.type.toLowerCase() === 'blur' &&
-                            event.relatedTarget &&
-                            Util.isDescendant(this.toolbar, event.relatedTarget)) {
-                        return false;
-                    }
-                    this.checkSelection();
-                }.bind(this),
-                timeoutHelper = function () {
-                    setTimeout(function () {
-                        this.checkSelection();
-                    }.bind(this), 0);
-                }.bind(this);
-
-            this.on(this.options.ownerDocument.documentElement, 'mouseup', this.checkSelection.bind(this));
-
-            for (i = 0; i < this.elements.length; i += 1) {
-                this.on(this.elements[i], 'keyup', this.checkSelection.bind(this));
-                this.on(this.elements[i], 'blur', blurHelper);
-                this.on(this.elements[i], 'click', timeoutHelper);
-            }
-
-            return this;
-        },
-
-        bindDragDrop: function () {
-            var self = this, i, className, onDrag, onDrop, element;
-
-            if (!self.options.imageDragging) {
-                return this;
-            }
-
-            className = 'medium-editor-dragover';
-
-            onDrag = function (e) {
-                e.preventDefault();
-                e.dataTransfer.dropEffect = "copy";
-
-                if (e.type === "dragover") {
-                    this.classList.add(className);
-                } else {
-                    this.classList.remove(className);
-                }
-            };
-
-            onDrop = function (e) {
-                var files;
-                e.preventDefault();
-                e.stopPropagation();
-                files = Array.prototype.slice.call(e.dataTransfer.files, 0);
-                files.some(function (file) {
-                    if (file.type.match("image")) {
-                        var fileReader, id;
-                        fileReader = new FileReader();
-                        fileReader.readAsDataURL(file);
-
-                        id = 'medium-img-' + (+new Date());
-                        Util.insertHTMLCommand(self.options.ownerDocument, '<img class="medium-image-loading" id="' + id + '" />');
-
-                        fileReader.onload = function () {
-                            var img = document.getElementById(id);
-                            if (img) {
-                                img.removeAttribute('id');
-                                img.removeAttribute('class');
-                                img.src = fileReader.result;
-                            }
-                        };
-                    }
-                });
-                this.classList.remove(className);
-            };
-
-            for (i = 0; i < this.elements.length; i += 1) {
-                element = this.elements[i];
-
-
-                this.on(element, 'dragover', onDrag);
-                this.on(element, 'dragleave', onDrag);
-                this.on(element, 'drop', onDrop);
-            }
-            return this;
-        },
-
-        stopSelectionUpdates: function () {
-            this.preventSelectionUpdates = true;
-        },
-
-        startSelectionUpdates: function () {
-            this.preventSelectionUpdates = false;
-        },
-
-        checkSelection: function () {
-            var newSelection,
-                selectionElement;
-
-            if (!this.preventSelectionUpdates &&
-                    this.keepToolbarAlive !== true &&
-                    !this.options.disableToolbar) {
-
-                newSelection = this.options.contentWindow.getSelection();
-                if ((!this.options.updateOnEmptySelection && newSelection.toString().trim() === '') ||
-                        (this.options.allowMultiParagraphSelection === false && this.multipleBlockElementsSelected()) ||
-                        Selection.selectionInContentEditableFalse(this.options.contentWindow)) {
-                    if (!this.options.staticToolbar) {
-                        this.hideToolbarActions();
-                    } else {
-                        this.showAndUpdateToolbar();
-                    }
-
-                } else {
-                    selectionElement = Selection.getSelectionElement(this.options.contentWindow);
-                    if (!selectionElement || selectionElement.getAttribute('data-disable-toolbar')) {
-                        if (!this.options.staticToolbar) {
-                            this.hideToolbarActions();
-                        }
-                    } else {
-                        this.checkSelectionElement(newSelection, selectionElement);
-                    }
-                }
-            }
-            return this;
-        },
-
-        // Checks for existance of multiple block elements in the current selection
-        multipleBlockElementsSelected: function () {
-            /*jslint regexp: true*/
-            var selectionHtml = Selection.getSelectionHtml.call(this).replace(/<[\S]+><\/[\S]+>/gim, ''),
-                hasMultiParagraphs = selectionHtml.match(/<(p|h[1-6]|blockquote)[^>]*>/g);
-            /*jslint regexp: false*/
-
-            return !!hasMultiParagraphs && hasMultiParagraphs.length > 1;
-        },
-
-        checkSelectionElement: function (newSelection, selectionElement) {
-            var i,
-                adjacentNode,
-                offset = 0,
-                newRange;
-            this.selection = newSelection;
-            this.selectionRange = this.selection.getRangeAt(0);
-
-            /*
-            * In firefox, there are cases (ie doubleclick of a word) where the selectionRange start
-            * will be at the very end of an element.  In other browsers, the selectionRange start
-            * would instead be at the very beginning of an element that actually has content.
-            * example:
-            *   <span>foo</span><span>bar</span>
-            *
-            * If the text 'bar' is selected, most browsers will have the selectionRange start at the beginning
-            * of the 'bar' span.  However, there are cases where firefox will have the selectionRange start
-            * at the end of the 'foo' span.  The contenteditable behavior will be ok, but if there are any
-            * properties on the 'bar' span, they won't be reflected accurately in the toolbar
-            * (ie 'Bold' button wouldn't be active)
-            *
-            * So, for cases where the selectionRange start is at the end of an element/node, find the next
-            * adjacent text node that actually has content in it, and move the selectionRange start there.
-            */
-            if (this.options.standardizeSelectionStart &&
-                    this.selectionRange.startContainer.nodeValue &&
-                    (this.selectionRange.startOffset === this.selectionRange.startContainer.nodeValue.length)) {
-                adjacentNode = Util.findAdjacentTextNodeWithContent(Selection.getSelectionElement(this.options.contentWindow), this.selectionRange.startContainer, this.options.ownerDocument);
-                if (adjacentNode) {
-                    offset = 0;
-                    while (adjacentNode.nodeValue.substr(offset, 1).trim().length === 0) {
-                        offset = offset + 1;
-                    }
-                    newRange = this.options.ownerDocument.createRange();
-                    newRange.setStart(adjacentNode, offset);
-                    newRange.setEnd(this.selectionRange.endContainer, this.selectionRange.endOffset);
-                    this.selection.removeAllRanges();
-                    this.selection.addRange(newRange);
-                    this.selectionRange = newRange;
-                }
-            }
-
-            for (i = 0; i < this.elements.length; i += 1) {
-                if (this.elements[i] === selectionElement) {
-                    this.showAndUpdateToolbar();
-                    return;
-                }
-            }
-
-            if (!this.options.staticToolbar) {
-                this.hideToolbarActions();
-            }
-        },
-
-        showAndUpdateToolbar: function () {
-            this.setToolbarButtonStates()
-                .setToolbarPosition()
-                .showToolbarDefaultActions();
-        },
-
-        setToolbarPosition: function () {
-            // document.documentElement for IE 9
-            var scrollTop = (this.options.ownerDocument.documentElement && this.options.ownerDocument.documentElement.scrollTop) || this.options.ownerDocument.body.scrollTop,
-                selection = this.options.contentWindow.getSelection(),
-                windowWidth = this.options.contentWindow.innerWidth,
-                container = Selection.getSelectionElement(this.options.contentWindow),
-                buttonHeight = 50,
-                toolbarWidth,
-                toolbarHeight,
-                halfOffsetWidth,
-                defaultLeft,
-                containerRect,
-                containerTop,
-                containerCenter,
-                range,
-                boundary,
-                middleBoundary,
-                targetLeft;
-
-            // If there isn't a valid selection, bail
-            if (!container || !this.options.contentWindow.getSelection().focusNode) {
-                return this;
-            }
-
-            // If the container isn't part of this medium-editor instance, bail
-            if (this.elements.indexOf(container) === -1) {
-                return this;
-            }
-
-            // Calculate container dimensions
-            containerRect = container.getBoundingClientRect();
-            containerTop = containerRect.top + scrollTop;
-            containerCenter = (containerRect.left + (containerRect.width / 2));
-
-            // position the toolbar at left 0, so we can get the real width of the toolbar
-            this.toolbar.style.left = '0';
-            toolbarWidth = this.toolbar.offsetWidth;
-            toolbarHeight = this.toolbar.offsetHeight;
-            halfOffsetWidth = toolbarWidth / 2;
-            defaultLeft = this.options.diffLeft - halfOffsetWidth;
-
-            if (this.options.staticToolbar) {
-                this.showToolbar();
-
-                if (this.options.stickyToolbar) {
-                    // If it's beyond the height of the editor, position it at the bottom of the editor
-                    if (scrollTop > (containerTop + container.offsetHeight - toolbarHeight)) {
-                        this.toolbar.style.top = (containerTop + container.offsetHeight - toolbarHeight) + 'px';
-                        this.toolbar.classList.remove('sticky-toolbar');
-
-                    // Stick the toolbar to the top of the window
-                    } else if (scrollTop > (containerTop - toolbarHeight)) {
-                        this.toolbar.classList.add('sticky-toolbar');
-                        this.toolbar.style.top = "0px";
-
-                    // Normal static toolbar position
-                    } else {
-                        this.toolbar.classList.remove('sticky-toolbar');
-                        this.toolbar.style.top = containerTop - toolbarHeight + "px";
-                    }
-                } else {
-                    this.toolbar.style.top = containerTop - toolbarHeight + "px";
-                }
-
-                if (this.options.toolbarAlign === 'left') {
-                    targetLeft = containerRect.left;
-                } else if (this.options.toolbarAlign === 'center') {
-                    targetLeft = containerCenter - halfOffsetWidth;
-                } else if (this.options.toolbarAlign === 'right') {
-                    targetLeft = containerRect.right - toolbarWidth;
-                }
-
-                if (targetLeft < 0) {
-                    targetLeft = 0;
-                } else if ((targetLeft + toolbarWidth) > windowWidth) {
-                    targetLeft = windowWidth - toolbarWidth;
-                }
-
-                this.toolbar.style.left = targetLeft + 'px';
-
-            } else if (!selection.isCollapsed) {
-                this.showToolbar();
-
-                range = selection.getRangeAt(0);
-                boundary = range.getBoundingClientRect();
-                middleBoundary = (boundary.left + boundary.right) / 2;
-
-                if (boundary.top < buttonHeight) {
-                    this.toolbar.classList.add('medium-toolbar-arrow-over');
-                    this.toolbar.classList.remove('medium-toolbar-arrow-under');
-                    this.toolbar.style.top = buttonHeight + boundary.bottom - this.options.diffTop + this.options.contentWindow.pageYOffset - toolbarHeight + 'px';
-                } else {
-                    this.toolbar.classList.add('medium-toolbar-arrow-under');
-                    this.toolbar.classList.remove('medium-toolbar-arrow-over');
-                    this.toolbar.style.top = boundary.top + this.options.diffTop + this.options.contentWindow.pageYOffset - toolbarHeight + 'px';
-                }
-                if (middleBoundary < halfOffsetWidth) {
-                    this.toolbar.style.left = defaultLeft + halfOffsetWidth + 'px';
-                } else if ((windowWidth - middleBoundary) < halfOffsetWidth) {
-                    this.toolbar.style.left = windowWidth + defaultLeft - halfOffsetWidth + 'px';
-                } else {
-                    this.toolbar.style.left = defaultLeft + middleBoundary + 'px';
-                }
-            }
+                sel.removeAllRanges();
+                sel.addRange(range);
 
-            this.hideAnchorPreview();
+                node.previousElementSibling.parentNode.removeChild(node);
 
-            return this;
+                e.preventDefault();
+            }
         },
 
-        setToolbarButtonStates: function () {
-            this.commands.forEach(function (extension) {
-                if (typeof extension.isActive === 'function') {
-                    extension.setInactive();
-                }
-            }.bind(this));
-            this.checkActiveButtons();
+        initToolbar: function () {
+            if (this.toolbar) {
+                return this;
+            }
+            this.toolbar = new Toolbar(this);
+            this.options.elementsContainer.appendChild(this.toolbar.getToolbarElement());
+
             return this;
         },
 
-        checkActiveButtons: function () {
-            var elements = Array.prototype.slice.call(this.elements),
-                manualStateChecks = [],
-                queryState = null,
-                parentNode,
-                checkExtension = function (extension) {
-                    if (typeof extension.checkState === 'function') {
-                        extension.checkState(parentNode);
-                    } else if (typeof extension.isActive === 'function' &&
-                               typeof extension.isAlreadyApplied === 'function') {
-                        if (!extension.isActive() && extension.isAlreadyApplied(parentNode)) {
-                            extension.setActive();
-                        }
-                    }
-                };
+        bindDragDrop: function () {
+            var self = this, i, className, onDrag, onDrop, element;
 
-            if (!this.selectionRange) {
-                return;
+            if (!self.options.imageDragging) {
+                return this;
             }
-            parentNode = Selection.getSelectedParentElement(this.selectionRange);
 
-            // Loop through all commands
-            this.commands.forEach(function (command) {
-                // For those commands where we can use document.queryCommandState(), do so
-                if (typeof command.queryCommandState === 'function') {
-                    queryState = command.queryCommandState();
-                    // If queryCommandState returns a valid value, we can trust the browser
-                    // and don't need to do our manual checks
-                    if (queryState !== null) {
-                        if (queryState) {
-                            command.setActive();
+            className = 'medium-editor-dragover';
+
+            onDrag = function (e) {
+                e.preventDefault();
+                e.dataTransfer.dropEffect = "copy";
+
+                if (e.type === "dragover") {
+                    this.classList.add(className);
+                } else {
+                    this.classList.remove(className);
+                }
+            };
+
+            onDrop = function (e) {
+                var files;
+                e.preventDefault();
+                e.stopPropagation();
+                // IE9 does not support the File API, so prevent file from opening in a new window
+                // but also don't try to actually get the file
+                if (e.dataTransfer.files) {
+                    files = Array.prototype.slice.call(e.dataTransfer.files, 0);
+                    files.some(function (file) {
+                        if (file.type.match("image")) {
+                            var fileReader, id;
+                            fileReader = new FileReader();
+                            fileReader.readAsDataURL(file);
+
+                            id = 'medium-img-' + (+new Date());
+                            Util.insertHTMLCommand(self.options.ownerDocument, '<img class="medium-image-loading" id="' + id + '" />');
+
+                            fileReader.onload = function () {
+                                var img = document.getElementById(id);
+                                if (img) {
+                                    img.removeAttribute('id');
+                                    img.removeAttribute('class');
+                                    img.src = fileReader.result;
+                                }
+                            };
                         }
-                        return;
-                    }
+                    });
                 }
-                // We can't use queryCommandState for this command, so add to manualStateChecks
-                manualStateChecks.push(command);
-            });
+                this.classList.remove(className);
+            };
 
-            // Climb up the DOM and do manual checks for whether a certain command is currently enabled for this node
-            while (parentNode.tagName !== undefined && Util.parentElements.indexOf(parentNode.tagName.toLowerCase) === -1) {
-                manualStateChecks.forEach(checkExtension.bind(this));
+            for (i = 0; i < this.elements.length; i += 1) {
+                element = this.elements[i];
 
-                // we can abort the search upwards if we leave the contentEditable element
-                if (elements.indexOf(parentNode) !== -1) {
-                    break;
-                }
-                parentNode = parentNode.parentNode;
+                this.on(element, 'dragover', onDrag);
+                this.on(element, 'dragleave', onDrag);
+                this.on(element, 'drop', onDrop);
             }
+            return this;
         },
 
-        setFirstAndLastButtons: function () {
-            var buttons = this.toolbar.querySelectorAll('button');
-            if (buttons.length > 0) {
-                buttons[0].className += ' ' + this.options.firstButtonClass;
-                buttons[buttons.length - 1].className += ' ' + this.options.lastButtonClass;
+        stopSelectionUpdates: function () {
+            this.preventSelectionUpdates = true;
+        },
+
+        startSelectionUpdates: function () {
+            this.preventSelectionUpdates = false;
+        },
+
+        checkSelection: function () {
+            if (this.toolbar) {
+                this.toolbar.checkState();
             }
             return this;
         },
@@ -2447,8 +3082,11 @@ function MediumEditor(elements, options) {
             return this.options.ownerDocument.execCommand(action, false, null);
         },
 
-        getSelectedParentElement: function () {
-            return Selection.getSelectedParentElement();
+        getSelectedParentElement: function (range) {
+            if (range === undefined) {
+                range = this.options.contentWindow.getSelection().getRangeAt(0);
+            }
+            return Selection.getSelectedParentElement(range);
         },
 
         execFormatBlock: function (el) {
@@ -2476,79 +3114,19 @@ function MediumEditor(elements, options) {
             return this.options.ownerDocument.execCommand('formatBlock', false, el);
         },
 
-        isToolbarDefaultActionsShown: function () {
-            return !!this.toolbarActions && this.toolbarActions.style.display === 'block';
-        },
-
         hideToolbarDefaultActions: function () {
-            if (this.toolbarActions && this.isToolbarDefaultActionsShown()) {
-                this.commands.forEach(function (extension) {
-                    if (extension.onHide && typeof extension.onHide === 'function') {
-                        extension.onHide();
-                    }
-                });
-                this.toolbarActions.style.display = 'none';
-            }
-        },
-
-        showToolbarDefaultActions: function () {
-            this.hideExtensionForms();
-
-            if (this.toolbarActions && !this.isToolbarDefaultActionsShown()) {
-                this.toolbarActions.style.display = 'block';
+            if (this.toolbar) {
+                this.toolbar.hideToolbarDefaultActions();
             }
-
-            this.keepToolbarAlive = false;
-            // Using setTimeout + options.delay because:
-            // We will actually be displaying the toolbar, which should be controlled by options.delay
-            this.delay(function () {
-                this.showToolbar();
-            }.bind(this));
-
             return this;
         },
 
-        hideExtensionForms: function () {
-            // Hide all extension forms
-            this.commands.forEach(function (extension) {
-                if (extension.hasForm && extension.isDisplayed()) {
-                    extension.hideForm();
-                }
-            });
-        },
-
-        isToolbarShown: function () {
-            return this.toolbar && this.toolbar.classList.contains('medium-editor-toolbar-active');
-        },
-
-        showToolbar: function () {
-            if (this.toolbar && !this.isToolbarShown()) {
-                this.toolbar.classList.add('medium-editor-toolbar-active');
-                if (typeof this.options.onShowToolbar === 'function') {
-                    this.options.onShowToolbar();
-                }
-            }
-        },
-
-        hideToolbar: function () {
-            if (this.isToolbarShown()) {
-                this.toolbar.classList.remove('medium-editor-toolbar-active');
-                if (typeof this.options.onHideToolbar === 'function') {
-                    this.options.onHideToolbar();
-                }
+        setToolbarPosition: function () {
+            if (this.toolbar) {
+                this.toolbar.setToolbarPosition();
             }
         },
 
-        hideToolbarActions: function () {
-            this.commands.forEach(function (extension) {
-                if (extension.onHide && typeof extension.onHide === 'function') {
-                    extension.onHide();
-                }
-            });
-            this.keepToolbarAlive = false;
-            this.hideToolbar();
-        },
-
         selectAllContents: function () {
             var range = this.options.ownerDocument.createRange(),
                 sel = this.options.contentWindow.getSelection(),
@@ -2656,181 +3234,6 @@ function MediumEditor(elements, options) {
             sel.addRange(range);
         },
 
-        hideAnchorPreview: function () {
-            this.anchorPreview.classList.remove('medium-editor-anchor-preview-active');
-        },
-
-        // TODO: break method
-        showAnchorPreview: function (anchorEl) {
-            if (this.anchorPreview.classList.contains('medium-editor-anchor-preview-active')
-                    || anchorEl.getAttribute('data-disable-preview')) {
-                return true;
-            }
-
-            var self = this,
-                buttonHeight = 40,
-                boundary = anchorEl.getBoundingClientRect(),
-                middleBoundary = (boundary.left + boundary.right) / 2,
-                halfOffsetWidth,
-                defaultLeft;
-
-            self.anchorPreview.querySelector('i').textContent = anchorEl.attributes.href.value;
-            halfOffsetWidth = self.anchorPreview.offsetWidth / 2;
-            defaultLeft = self.options.diffLeft - halfOffsetWidth;
-
-            self.observeAnchorPreview(anchorEl);
-
-            self.anchorPreview.classList.add('medium-toolbar-arrow-over');
-            self.anchorPreview.classList.remove('medium-toolbar-arrow-under');
-            self.anchorPreview.style.top = Math.round(buttonHeight + boundary.bottom - self.options.diffTop + this.options.contentWindow.pageYOffset - self.anchorPreview.offsetHeight) + 'px';
-            if (middleBoundary < halfOffsetWidth) {
-                self.anchorPreview.style.left = defaultLeft + halfOffsetWidth + 'px';
-            } else if ((this.options.contentWindow.innerWidth - middleBoundary) < halfOffsetWidth) {
-                self.anchorPreview.style.left = this.options.contentWindow.innerWidth + defaultLeft - halfOffsetWidth + 'px';
-            } else {
-                self.anchorPreview.style.left = defaultLeft + middleBoundary + 'px';
-            }
-
-            if (this.anchorPreview && !this.anchorPreview.classList.contains('medium-editor-anchor-preview-active')) {
-                this.anchorPreview.classList.add('medium-editor-anchor-preview-active');
-            }
-
-            return this;
-        },
-
-        // TODO: break method
-        observeAnchorPreview: function (anchorEl) {
-            var self = this,
-                lastOver = (new Date()).getTime(),
-                over = true,
-                stamp = function () {
-                    lastOver = (new Date()).getTime();
-                    over = true;
-                },
-                unstamp = function (e) {
-                    if (!e.relatedTarget || !/anchor-preview/.test(e.relatedTarget.className)) {
-                        over = false;
-                    }
-                },
-                interval_timer = setInterval(function () {
-                    if (over) {
-                        return true;
-                    }
-                    var durr = (new Date()).getTime() - lastOver;
-                    if (durr > self.options.anchorPreviewHideDelay) {
-                        // hide the preview 1/2 second after mouse leaves the link
-                        self.hideAnchorPreview();
-
-                        // cleanup
-                        clearInterval(interval_timer);
-                        self.off(self.anchorPreview, 'mouseover', stamp);
-                        self.off(self.anchorPreview, 'mouseout', unstamp);
-                        self.off(anchorEl, 'mouseover', stamp);
-                        self.off(anchorEl, 'mouseout', unstamp);
-
-                    }
-                }, 200);
-
-            this.on(self.anchorPreview, 'mouseover', stamp);
-            this.on(self.anchorPreview, 'mouseout', unstamp);
-            this.on(anchorEl, 'mouseover', stamp);
-            this.on(anchorEl, 'mouseout', unstamp);
-        },
-
-        createAnchorPreview: function () {
-            var self = this,
-                anchorPreview = this.options.ownerDocument.createElement('div');
-
-            anchorPreview.id = 'medium-editor-anchor-preview-' + this.id;
-            anchorPreview.className = 'medium-editor-anchor-preview';
-            anchorPreview.innerHTML = this.anchorPreviewTemplate();
-            this.options.elementsContainer.appendChild(anchorPreview);
-
-            this.on(anchorPreview, 'click', function () {
-                self.anchorPreviewClickHandler();
-            });
-
-            return anchorPreview;
-        },
-
-        anchorPreviewTemplate: function () {
-            return '<div class="medium-editor-toolbar-anchor-preview" id="medium-editor-toolbar-anchor-preview">' +
-                '    <i class="medium-editor-toolbar-anchor-preview-inner"></i>' +
-                '</div>';
-        },
-
-        anchorPreviewClickHandler: function (event) {
-            var range,
-                sel,
-                anchorExtension = this.getExtensionByName('anchor');
-
-            if (anchorExtension && this.activeAnchor) {
-                range = this.options.ownerDocument.createRange();
-                range.selectNodeContents(this.activeAnchor);
-
-                sel = this.options.contentWindow.getSelection();
-                sel.removeAllRanges();
-                sel.addRange(range);
-                // Using setTimeout + options.delay because:
-                // We may actually be displaying the anchor form, which should be controlled by options.delay
-                this.delay(function () {
-                    if (this.activeAnchor) {
-                        anchorExtension.showForm(this.activeAnchor.attributes.href.value);
-                    }
-                    this.keepToolbarAlive = false;
-                }.bind(this));
-            }
-
-            this.hideAnchorPreview();
-        },
-
-        editorAnchorObserver: function (e) {
-            var self = this,
-                overAnchor = true,
-                leaveAnchor = function () {
-                    // mark the anchor as no longer hovered, and stop listening
-                    overAnchor = false;
-                    self.off(self.activeAnchor, 'mouseout', leaveAnchor);
-                };
-
-            if (e.target && e.target.tagName.toLowerCase() === 'a') {
-
-                // Detect empty href attributes
-                // The browser will make href="" or href="#top"
-                // into absolute urls when accessed as e.targed.href, so check the html
-                if (!/href=["']\S+["']/.test(e.target.outerHTML) || /href=["']#\S+["']/.test(e.target.outerHTML)) {
-                    return true;
-                }
-
-                // only show when hovering on anchors
-                if (this.isToolbarShown()) {
-                    // only show when toolbar is not present
-                    return true;
-                }
-                this.activeAnchor = e.target;
-                this.on(this.activeAnchor, 'mouseout', leaveAnchor);
-                // Using setTimeout + options.delay because:
-                // - We're going to show the anchor preview according to the configured delay
-                //   if the mouse has not left the anchor tag in that time
-                this.delay(function () {
-                    if (overAnchor) {
-                        self.showAnchorPreview(e.target);
-                    }
-                });
-            }
-        },
-
-        bindAnchorPreview: function (index) {
-            var i, self = this;
-            this.editorAnchorObserverWrapper = function (e) {
-                self.editorAnchorObserver(e);
-            };
-            for (i = 0; i < this.elements.length; i += 1) {
-                this.on(this.elements[i], 'mouseover', this.editorAnchorObserverWrapper);
-            }
-            return this;
-        },
-
         createLink: function (opts) {
             var customEvent,
                 i;
@@ -2875,32 +3278,6 @@ function MediumEditor(elements, options) {
             }
         },
 
-        positionToolbarIfShown: function () {
-            if (this.isToolbarShown()) {
-                this.setToolbarPosition();
-            }
-        },
-
-        bindWindowActions: function () {
-            var self = this;
-
-            // Add a scroll event for sticky toolbar
-            if (this.options.staticToolbar && this.options.stickyToolbar) {
-                // On scroll, re-position the toolbar
-                this.on(this.options.contentWindow, 'scroll', function () {
-                    self.positionToolbarIfShown();
-                }, true);
-            }
-
-            this.on(this.options.contentWindow, 'resize', function () {
-                self.handleResize();
-            });
-
-            this.bindBlur();
-
-            return this;
-        },
-
         activate: function () {
             if (this.isActive) {
                 return;
@@ -2918,10 +3295,8 @@ function MediumEditor(elements, options) {
             this.isActive = false;
 
             if (this.toolbar !== undefined) {
-                this.options.elementsContainer.removeChild(this.anchorPreview);
-                this.options.elementsContainer.removeChild(this.toolbar);
+                this.toolbar.deactivate();
                 delete this.toolbar;
-                delete this.anchorPreview;
             }
 
             for (i = 0; i < this.elements.length; i += 1) {