medium-editor-rails 1.2.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2797d94a0b663d77df028d929090e6693d9a0931
-  data.tar.gz: bce123c63f3984235f94f8edec1fabf1ebc53b00
+  metadata.gz: 91d565261c4f78127bd277b71c67000ef8385ac8
+  data.tar.gz: 1780af7bf1a9bda664d0093fb4715dd706dbb4c2
 SHA512:
-  metadata.gz: bff23ff9bc5e9ffd3ad863e6332c078facd03a6e34db99c2566e4177a187467d2655e440f6a15a9a4fbbb7a8e3a0e4deaa8a120aad155a2499af4e2268948600
-  data.tar.gz: a27b421862232708df549a2585eec2f20a22a3ec94e75c4b535ca94366b5e3352c7fa1ce39a60d04e83e96045e994241d8ea7ab5697d624a5f3f8e37f280f0da
+  metadata.gz: 956fc017044e1056bebe177ca2c6006e1d164f93d28b7daa57211cbe7de76f0695a99757794dc8cb32f36ba3fe9f21d06bd3fad4a6b52b8a4deea00ad7a459da
+  data.tar.gz: 5a1c9016bee4ade393655346e42d34335366ddca0fa7fe0817f36ba60f4ebac8791c174145f1c882edd3a117160b6887f56d4a5289f2444bad9fedc46f6f2ae1

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 
 #### [Current]
+ * [0ce611b](../../commit/0ce611b) - __(Ahmet Sezgin Duran)__ Update Medium Editor files
+ * [423eaf7](../../commit/423eaf7) - __(Ahmet Sezgin Duran)__ Merge tag '1.2.0' into develop
+
+1.2.0
+
+#### 1.2.0
+ * [fc6f4d6](../../commit/fc6f4d6) - __(Ahmet Sezgin Duran)__ Bump versions 1.2.0 and 2.2.0
  * [e6d136d](../../commit/e6d136d) - __(Ahmet Sezgin Duran)__ Update Medium Editor files
  * [7ee9c60](../../commit/7ee9c60) - __(Ahmet Sezgin Duran)__ Merge tag '1.1.3' 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 [2.2.0](https://github.com/daviferreira/medium-editor/releases)
+The latest version of Medium Editor bundled by this gem is [2.3.0](https://github.com/daviferreira/medium-editor/releases)
 
 ## Installation
 

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

@@ -1,6 +1,6 @@
 module MediumEditorRails
   module Rails
-    VERSION = '1.2.0'
-    MEDIUM_EDITOR_VERSION = '2.2.0'
+    VERSION = '1.3.0'
+    MEDIUM_EDITOR_VERSION = '2.3.0'
   end
 end

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

@@ -16,6 +16,295 @@ if (typeof module === 'object') {
 (function (window, document) {
     'use strict';
 
+    var now,
+        keyCode,
+        DefaultButton,
+        ButtonsData = {
+            'bold': {
+                name: 'bold',
+                action: 'bold',
+                aria: 'bold',
+                tagNames: ['b', 'strong'],
+                contentDefault: '<b>B</b>',
+                contentFA: '<i class="fa fa-bold"></i>'
+            },
+            'italic': {
+                name: 'italic',
+                action: 'italic',
+                aria: 'italic',
+                tagNames: ['i', 'em'],
+                style: {
+                    prop: 'font-style',
+                    value: 'italic'
+                },
+                contentDefault: '<b><i>I</i></b>',
+                contentFA: '<i class="fa fa-italic"></i>'
+            },
+            'underline': {
+                name: 'underline',
+                action: 'underline',
+                aria: 'underline',
+                tagNames: ['u'],
+                contentDefault: '<b><u>U</u></b>',
+                contentFA: '<i class="fa fa-underline"></i>'
+            },
+            'strikethrough': {
+                name: 'strikethrough',
+                action: 'strikethrough',
+                aria: 'strike through',
+                tagNames: ['strike'],
+                contentDefault: '<s>A</s>',
+                contentFA: '<i class="fa fa-strikethrough"></i>'
+            },
+            'superscript': {
+                name: 'superscript',
+                action: 'superscript',
+                aria: 'superscript',
+                tagNames: ['sup'],
+                contentDefault: '<b>x<sup>1</sup></b>',
+                contentFA: '<i class="fa fa-superscript"></i>'
+            },
+            'subscript': {
+                name: 'subscript',
+                action: 'subscript',
+                aria: 'subscript',
+                tagNames: ['sub'],
+                contentDefault: '<b>x<sub>1</sub></b>',
+                contentFA: '<i class="fa fa-subscript"></i>'
+            },
+            'anchor': {
+                name: 'anchor',
+                action: 'anchor',
+                aria: 'link',
+                tagNames: ['a'],
+                contentDefault: '<b>#</b>',
+                contentFA: '<i class="fa fa-link"></i>'
+            },
+            'image': {
+                name: 'image',
+                action: 'image',
+                aria: 'image',
+                tagNames: ['img'],
+                contentDefault: '<b>image</b>',
+                contentFA: '<i class="fa fa-picture-o"></i>'
+            },
+            'quote': {
+                name: 'quote',
+                action: 'append-blockquote',
+                aria: 'blockquote',
+                tagNames: ['blockquote'],
+                contentDefault: '<b>&ldquo;</b>',
+                contentFA: '<i class="fa fa-quote-right"></i>'
+            },
+            'orderedlist': {
+                name: 'orderedlist',
+                action: 'insertorderedlist',
+                aria: 'ordered list',
+                tagNames: ['ol'],
+                contentDefault: '<b>1.</b>',
+                contentFA: '<i class="fa fa-list-ol"></i>'
+            },
+            'unorderedlist': {
+                name: 'unorderedlist',
+                action: 'insertunorderedlist',
+                aria: 'unordered list',
+                tagNames: ['ul'],
+                contentDefault: '<b>&bull;</b>',
+                contentFA: '<i class="fa fa-list-ul"></i>'
+            },
+            'pre': {
+                name: 'pre',
+                action: 'append-pre',
+                aria: 'preformatted text',
+                tagNames: ['pre'],
+                contentDefault: '<b>0101</b>',
+                contentFA: '<i class="fa fa-code fa-lg"></i>'
+            },
+            'indent': {
+                name: 'indent',
+                action: 'indent',
+                aria: 'indent',
+                tagNames: [],
+                contentDefault: '<b>&rarr;</b>',
+                contentFA: '<i class="fa fa-indent"></i>'
+            },
+            'outdent': {
+                name: 'outdent',
+                action: 'outdent',
+                aria: 'outdent',
+                tagNames: [],
+                contentDefault: '<b>&larr;</b>',
+                contentFA: '<i class="fa fa-outdent"></i>'
+            },
+            'justifyCenter': {
+                name: 'justifyCenter',
+                action: 'justifyCenter',
+                aria: 'center justify',
+                tagNames: [],
+                style: {
+                    prop: 'text-align',
+                    value: 'center'
+                },
+                contentDefault: '<b>C</b>',
+                contentFA: '<i class="fa fa-align-center"></i>'
+            },
+            'justifyFull': {
+                name: 'justifyFull',
+                action: 'justifyFull',
+                aria: 'full justify',
+                tagNames: [],
+                style: {
+                    prop: 'text-align',
+                    value: 'justify'
+                },
+                contentDefault: '<b>J</b>',
+                contentFA: '<i class="fa fa-align-justify"></i>'
+            },
+            'justifyLeft': {
+                name: 'justifyLeft',
+                action: 'justifyLeft',
+                aria: 'left justify',
+                tagNames: [],
+                style: {
+                    prop: 'text-align',
+                    value: 'left'
+                },
+                contentDefault: '<b>L</b>',
+                contentFA: '<i class="fa fa-align-left"></i>'
+            },
+            'justifyRight': {
+                name: 'justifyRight',
+                action: 'justifyRight',
+                aria: 'right justify',
+                tagNames: [],
+                style: {
+                    prop: 'text-align',
+                    value: 'right'
+                },
+                contentDefault: '<b>R</b>',
+                contentFA: '<i class="fa fa-align-right"></i>'
+            },
+            'header1': {
+                name: 'header1',
+                action: function (options) {
+                    return 'append-' + options.firstHeader;
+                },
+                aria: function (options) {
+                    return options.firstHeader;
+                },
+                tagNames: function (options) {
+                    return [options.firstHeader];
+                },
+                contentDefault: '<b>H1</b>'
+            },
+            'header2': {
+                name: 'header2',
+                action: function (options) {
+                    return 'append-' + options.secondHeader;
+                },
+                aria: function (options) {
+                    return options.secondHeader;
+                },
+                tagNames: function (options) {
+                    return [options.secondHeader];
+                },
+                contentDefault: '<b>H2</b>'
+            }
+        };
+
+    DefaultButton = function (options, instance) {
+        this.options = options;
+        this.name = options.name;
+        this.init(instance);
+    };
+
+    DefaultButton.prototype = {
+        init: function (instance) {
+            this.base = instance;
+
+            this.button = this.createButton();
+            this.base.on(this.button, 'click', this.handleClick.bind(this));
+        },
+        getButton: function () {
+            return this.button;
+        },
+        getAction: function () {
+            return (typeof this.options.action === 'function') ? this.options.action(this.base.options) : this.options.action;
+        },
+        getAria: function () {
+            return (typeof this.options.aria === 'function') ? this.options.aria(this.base.options) : this.options.aria;
+        },
+        getTagNames: function () {
+            return (typeof this.options.tagNames === 'function') ? this.options.tagNames(this.base.options) : this.options.tagNames;
+        },
+        createButton: function () {
+            var button = this.base.options.ownerDocument.createElement('button'),
+                content = this.options.contentDefault;
+            button.classList.add('medium-editor-action');
+            button.classList.add('medium-editor-action-' + this.name);
+            button.setAttribute('data-action', this.getAction());
+            button.setAttribute('aria-label', this.getAria());
+            if (this.base.options.buttonLabels) {
+                if (this.base.options.buttonLabels === 'fontawesome' && this.options.contentFA) {
+                    content = this.options.contentFA;
+                } else if (typeof this.base.options.buttonLabels === 'object' && this.base.options.buttonLabels[this.name]) {
+                    content = this.base.options.buttonLabels[this.options.name];
+                }
+            }
+            button.innerHTML = content;
+            return button;
+        },
+        handleClick: function (evt) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            var action = this.getAction();
+            if (!this.base.selection) {
+                this.base.checkSelection();
+            }
+
+            if (this.isActive()) {
+                this.deactivate();
+            } else {
+                this.activate();
+            }
+
+            if (action) {
+                this.base.execAction(action, evt);
+            }
+            //if (this.options.form) {
+            //    this.base.showForm(this.form, evt);
+            //}
+        },
+        isActive: function () {
+            return this.button.classList.contains(this.base.options.activeButtonClass);
+        },
+        deactivate: function () {
+            this.button.classList.remove(this.base.options.activeButtonClass);
+            delete this.knownState;
+        },
+        activate: function () {
+            this.button.classList.add(this.base.options.activeButtonClass);
+            delete this.knownState;
+        },
+        shouldActivate: function (node) {
+            var isMatch = false,
+                tagNames = this.getTagNames();
+            if (this.knownState === false || this.knownState === true) {
+                return this.knownState;
+            }
+
+            if (tagNames && tagNames.length > 0 && node.tagName) {
+                isMatch = tagNames.indexOf(node.tagName.toLowerCase()) !== -1;
+            }
+
+            if (!isMatch && this.options.style) {
+                this.knownState = isMatch = (this.base.options.contentWindow.getComputedStyle(node, null).getPropertyValue(this.options.style.prop).indexOf(this.options.style.value) !== -1);
+            }
+
+            return isMatch;
+        }
+    };
+
     function extend(b, a) {
         var prop;
         if (b === undefined) {
@@ -30,9 +319,11 @@ if (typeof module === 'object') {
     }
 
     // https://github.com/jashkenas/underscore
-    var now = Date.now || function () {
+    now = Date.now || function () {
         return new Date().getTime();
-    }, keyCode = {
+    };
+
+    keyCode = {
         BACKSPACE: 8,
         TAB: 9,
         ENTER: 13,
@@ -221,40 +512,10 @@ if (typeof module === 'object') {
         return !!(obj && obj.nodeType === 1);
     }
 
-    // http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div
-    function insertHTMLCommand(doc, html) {
-        var selection, range, el, fragment, node, lastNode;
-
-        if (doc.queryCommandSupported('insertHTML')) {
-            try {
-                return doc.execCommand('insertHTML', false, html);
-            } catch (ignore) {}
-        }
-
-        selection = window.getSelection();
-        if (selection.getRangeAt && selection.rangeCount) {
-            range = selection.getRangeAt(0);
-            range.deleteContents();
-
-            el = doc.createElement("div");
-            el.innerHTML = html;
-            fragment = doc.createDocumentFragment();
-            while (el.firstChild) {
-                node = el.firstChild;
-                lastNode = fragment.appendChild(node);
-            }
-            range.insertNode(fragment);
-
-            // Preserve the selection:
-            if (lastNode) {
-                range = range.cloneRange();
-                range.setStartAfter(lastNode);
-                range.collapse(true);
-                selection.removeAllRanges();
-                selection.addRange(range);
-            }
-        }
-    }
+    MediumEditor.statics = {
+        ButtonsData: ButtonsData,
+        DefaultButton: DefaultButton
+    };
 
     MediumEditor.prototype = {
         defaults: {
@@ -324,6 +585,7 @@ if (typeof module === 'object') {
             this.events = [];
             this.isActive = true;
             this.initThrottledMethods()
+                .initCommands()
                 .initElements()
                 .bindSelect()
                 .bindDragDrop()
@@ -331,7 +593,6 @@ if (typeof module === 'object') {
                 .setPlaceholders()
                 .bindElementActions()
                 .bindWindowActions();
-                //.passInstance();
         },
 
         on: function (target, event, listener, useCapture) {
@@ -421,9 +682,7 @@ if (typeof module === 'object') {
             }
             // Init toolbar
             if (addToolbar) {
-                this.passInstance()
-                    .callExtensions('init')
-                    .initToolbar()
+                this.initToolbar()
                     .bindButtons()
                     .bindAnchorForm()
                     .bindAnchorPreview();
@@ -516,7 +775,6 @@ if (typeof module === 'object') {
                 // Bind the return and tab keypress events
                 this.bindReturn(i)
                     .bindKeydown(i)
-                    .bindBlur()
                     .bindClick(i);
             }
 
@@ -553,6 +811,45 @@ if (typeof module === 'object') {
             return content;
         },
 
+        initExtension: function (extension, name) {
+            if (extension.parent) {
+                extension.base = this;
+            }
+            if (typeof extension.init === 'function') {
+                extension.init(this);
+            }
+            if (!extension.name) {
+                extension.name = name;
+            }
+            return extension;
+        },
+
+        initCommands: function () {
+            var buttons = this.options.buttons,
+                extensions = this.options.extensions,
+                ext,
+                name;
+            this.commands = [];
+
+            buttons.forEach(function (buttonName) {
+                if (extensions[buttonName]) {
+                    ext = this.initExtension(extensions[buttonName], buttonName);
+                    this.commands.push(ext);
+                } else if (ButtonsData.hasOwnProperty(buttonName)) {
+                    ext = new DefaultButton(ButtonsData[buttonName], this);
+                    this.commands.push(ext);
+                }
+            }.bind(this));
+
+            for (name in extensions) {
+                if (extensions.hasOwnProperty(name) && buttons.indexOf(name) === -1) {
+                    ext = this.initExtension(extensions[name], name);
+                }
+            }
+
+            return this;
+        },
+
         /**
          * Helper function to call a method with a number of parameters on all registered extensions.
          * The function assures that the function exists before calling.
@@ -580,29 +877,6 @@ if (typeof module === 'object') {
             return this;
         },
 
-        /**
-         * Pass current Medium Editor instance to all extensions
-         * if extension constructor has 'parent' attribute set to 'true'
-         *
-         */
-        passInstance: function () {
-            var self = this,
-                ext,
-                name;
-
-            for (name in self.options.extensions) {
-                if (self.options.extensions.hasOwnProperty(name)) {
-                    ext = self.options.extensions[name];
-
-                    if (ext.parent) {
-                        ext.base = self;
-                    }
-                }
-            }
-
-            return self;
-        },
-
         bindParagraphCreation: function (index) {
             var self = this;
             this.on(this.elements[index], 'keypress', function (e) {
@@ -688,14 +962,16 @@ if (typeof module === 'object') {
 
                 if (e.which === keyCode.TAB) {
                     // Override tab only for pre nodes
-                    var tag = getSelectionStart.call(self).tagName.toLowerCase();
+                    var node = getSelectionStart.call(self) || e.target,
+                        tag = node && node.tagName.toLowerCase();
+
                     if (tag === 'pre') {
                         e.preventDefault();
                         self.options.ownerDocument.execCommand('insertHtml', null, '    ');
                     }
 
                     // Tab to indent list structures!
-                    if (tag === 'li') {
+                    if (tag === 'li' || self.isListItemChild(node)) {
                         e.preventDefault();
 
                         // If Shift is down, outdent, otherwise indent
@@ -771,99 +1047,11 @@ if (typeof module === 'object') {
             }
         },
 
-        buttonTemplate: function (btnType) {
-            var buttonLabels = this.getButtonLabels(this.options.buttonLabels),
-                buttonTemplates = {
-                    'bold': '<button class="medium-editor-action medium-editor-action-bold" data-action="bold" data-element="b" aria-label="bold">' + buttonLabels.bold + '</button>',
-                    'italic': '<button class="medium-editor-action medium-editor-action-italic" data-action="italic" data-element="i" aria-label="italic">' + buttonLabels.italic + '</button>',
-                    'underline': '<button class="medium-editor-action medium-editor-action-underline" data-action="underline" data-element="u" aria-label="underline">' + buttonLabels.underline + '</button>',
-                    'strikethrough': '<button class="medium-editor-action medium-editor-action-strikethrough" data-action="strikethrough" data-element="strike" aria-label="strike through">' + buttonLabels.strikethrough + '</button>',
-                    'superscript': '<button class="medium-editor-action medium-editor-action-superscript" data-action="superscript" data-element="sup" aria-label="superscript">' + buttonLabels.superscript + '</button>',
-                    'subscript': '<button class="medium-editor-action medium-editor-action-subscript" data-action="subscript" data-element="sub" aria-label="subscript">' + buttonLabels.subscript + '</button>',
-                    'anchor': '<button class="medium-editor-action medium-editor-action-anchor" data-action="anchor" data-element="a" aria-label="link">' + buttonLabels.anchor + '</button>',
-                    'image': '<button class="medium-editor-action medium-editor-action-image" data-action="image" data-element="img" aria-label="image">' + buttonLabels.image + '</button>',
-                    'header1': '<button class="medium-editor-action medium-editor-action-header1" data-action="append-' + this.options.firstHeader + '" data-element="' + this.options.firstHeader + '" aria-label="h1">' + buttonLabels.header1 + '</button>',
-                    'header2': '<button class="medium-editor-action medium-editor-action-header2" data-action="append-' + this.options.secondHeader + '" data-element="' + this.options.secondHeader + ' "aria-label="h2">' + buttonLabels.header2 + '</button>',
-                    'quote': '<button class="medium-editor-action medium-editor-action-quote" data-action="append-blockquote" data-element="blockquote" aria-label="blockquote">' + buttonLabels.quote + '</button>',
-                    'orderedlist': '<button class="medium-editor-action medium-editor-action-orderedlist" data-action="insertorderedlist" data-element="ol" aria-label="ordered list">' + buttonLabels.orderedlist + '</button>',
-                    'unorderedlist': '<button class="medium-editor-action medium-editor-action-unorderedlist" data-action="insertunorderedlist" data-element="ul" aria-label="unordered list">' + buttonLabels.unorderedlist + '</button>',
-                    'pre': '<button class="medium-editor-action medium-editor-action-pre" data-action="append-pre" data-element="pre" aria-label="preformatted text">' + buttonLabels.pre + '</button>',
-                    'indent': '<button class="medium-editor-action medium-editor-action-indent" data-action="indent" data-element="ul" aria-label="indent">' + buttonLabels.indent + '</button>',
-                    'outdent': '<button class="medium-editor-action medium-editor-action-outdent" data-action="outdent" data-element="ul" aria-label="outdent">' + buttonLabels.outdent + '</button>',
-                    'justifyCenter': '<button class="medium-editor-action medium-editor-action-justifyCenter" data-action="justifyCenter" data-element="" aria-label="center justify">' + buttonLabels.justifyCenter + '</button>',
-                    'justifyFull': '<button class="medium-editor-action medium-editor-action-justifyFull" data-action="justifyFull" data-element="" aria-label="full justify">' + buttonLabels.justifyFull + '</button>',
-                    'justifyLeft': '<button class="medium-editor-action medium-editor-action-justifyLeft" data-action="justifyLeft" data-element="" aria-label="left justify">' + buttonLabels.justifyLeft + '</button>',
-                    'justifyRight': '<button class="medium-editor-action medium-editor-action-justifyRight" data-action="justifyRight" data-element="" aria-label="right justify">' + buttonLabels.justifyRight + '</button>'
-                };
-            return buttonTemplates[btnType] || false;
-        },
-
-        // TODO: break method
-        getButtonLabels: function (buttonLabelType) {
-            var customButtonLabels,
-                attrname,
-                buttonLabels = {
-                    'bold': '<b>B</b>',
-                    'italic': '<b><i>I</i></b>',
-                    'underline': '<b><u>U</u></b>',
-                    'strikethrough': '<s>A</s>',
-                    'superscript': '<b>x<sup>1</sup></b>',
-                    'subscript': '<b>x<sub>1</sub></b>',
-                    'anchor': '<b>#</b>',
-                    'image': '<b>image</b>',
-                    'header1': '<b>H1</b>',
-                    'header2': '<b>H2</b>',
-                    'quote': '<b>&ldquo;</b>',
-                    'orderedlist': '<b>1.</b>',
-                    'unorderedlist': '<b>&bull;</b>',
-                    'pre': '<b>0101</b>',
-                    'indent': '<b>&rarr;</b>',
-                    'outdent': '<b>&larr;</b>',
-                    'justifyCenter': '<b>C</b>',
-                    'justifyFull': '<b>J</b>',
-                    'justifyLeft': '<b>L</b>',
-                    'justifyRight': '<b>R</b>'
-                };
-            if (buttonLabelType === 'fontawesome') {
-                customButtonLabels = {
-                    'bold': '<i class="fa fa-bold"></i>',
-                    'italic': '<i class="fa fa-italic"></i>',
-                    'underline': '<i class="fa fa-underline"></i>',
-                    'strikethrough': '<i class="fa fa-strikethrough"></i>',
-                    'superscript': '<i class="fa fa-superscript"></i>',
-                    'subscript': '<i class="fa fa-subscript"></i>',
-                    'anchor': '<i class="fa fa-link"></i>',
-                    'image': '<i class="fa fa-picture-o"></i>',
-                    'quote': '<i class="fa fa-quote-right"></i>',
-                    'orderedlist': '<i class="fa fa-list-ol"></i>',
-                    'unorderedlist': '<i class="fa fa-list-ul"></i>',
-                    'pre': '<i class="fa fa-code fa-lg"></i>',
-                    'indent': '<i class="fa fa-indent"></i>',
-                    'outdent': '<i class="fa fa-outdent"></i>',
-                    'justifyCenter': '<i class="fa fa-align-center"></i>',
-                    'justifyFull': '<i class="fa fa-align-justify"></i>',
-                    'justifyLeft': '<i class="fa fa-align-left"></i>',
-                    'justifyRight': '<i class="fa fa-align-right"></i>'
-                };
-            } else if (typeof buttonLabelType === 'object') {
-                customButtonLabels = buttonLabelType;
-            }
-            if (typeof customButtonLabels === 'object') {
-                for (attrname in customButtonLabels) {
-                    if (customButtonLabels.hasOwnProperty(attrname)) {
-                        buttonLabels[attrname] = customButtonLabels[attrname];
-                    }
-                }
-            }
-            return buttonLabels;
-        },
-
         initToolbar: function () {
             if (this.toolbar) {
                 return this;
             }
             this.toolbar = this.createToolbar();
-            this.addExtensionForms();
             this.keepToolbarAlive = false;
             this.toolbarActions = this.toolbar.querySelector('.medium-editor-toolbar-actions');
             this.anchorPreview = this.createAnchorPreview();
@@ -874,6 +1062,9 @@ if (typeof module === 'object') {
                 this.anchorTarget = this.anchorForm.querySelector('input.medium-editor-toolbar-anchor-target');
                 this.anchorButton = this.anchorForm.querySelector('input.medium-editor-toolbar-anchor-button');
             }
+
+            this.addExtensionForms();
+
             return this;
         },
 
@@ -898,28 +1089,16 @@ if (typeof module === 'object') {
 
         //TODO: actionTemplate
         toolbarButtons: function () {
-            var btns = this.options.buttons,
-                ul = this.options.ownerDocument.createElement('ul'),
+            var ul = this.options.ownerDocument.createElement('ul'),
                 li,
-                i,
-                btn,
-                ext;
+                btn;
 
             ul.id = 'medium-editor-toolbar-actions' + this.id;
             ul.className = 'medium-editor-toolbar-actions clearfix';
 
-            for (i = 0; i < btns.length; i += 1) {
-                if (this.options.extensions.hasOwnProperty(btns[i])) {
-                    ext = this.options.extensions[btns[i]];
-                    btn = ext.getButton !== undefined ? ext.getButton(this) : null;
-                    if (ext.hasForm) {
-                        btn.setAttribute('data-form', 'medium-editor-toolbar-form-' + btns[i] + '-' + this.id);
-                    }
-                } else {
-                    btn = this.buttonTemplate(btns[i]);
-                }
-
-                if (btn) {
+            this.commands.forEach(function (extension) {
+                if (typeof extension.getButton === 'function') {
+                    btn = extension.getButton(this);
                     li = this.options.ownerDocument.createElement('li');
                     if (isElement(btn)) {
                         li.appendChild(btn);
@@ -928,33 +1107,26 @@ if (typeof module === 'object') {
                     }
                     ul.appendChild(li);
                 }
-            }
+            }.bind(this));
 
             return ul;
         },
 
         addExtensionForms: function () {
-            var extensions = this.options.extensions,
-                ext,
-                name,
-                form,
+            var form,
                 id;
 
-            for (name in extensions) {
-                if (extensions.hasOwnProperty(name)) {
-                    ext = extensions[name];
-                    if (ext.hasForm) {
-                        form = ext.getForm !== undefined ? ext.getForm() : null;
-                    }
-                    if (form) {
-                        id = 'medium-editor-toolbar-form-' + name + '-' + this.id;
-                        form.className = 'medium-editor-toolbar-form';
-                        form.id = id;
-                        ext.getForm().id = id;
-                        this.toolbar.appendChild(form);
-                    }
+            this.commands.forEach(function (extension) {
+                if (extension.hasForm) {
+                    form = (typeof extension.getForm === 'function') ? extension.getForm() : null;
                 }
-            }
+                if (form) {
+                    id = 'medium-editor-toolbar-form-' + extension.name + '-' + this.id;
+                    form.className += ' medium-editor-toolbar-form';
+                    form.id = id;
+                    this.toolbar.appendChild(form);
+                }
+            }.bind(this));
         },
 
         toolbarFormAnchor: function () {
@@ -1011,15 +1183,22 @@ if (typeof module === 'object') {
 
         bindSelect: function () {
             var self = this,
-                i;
+                i,
+                timer;
 
             this.checkSelectionWrapper = function (e) {
+                e.stopPropagation();
+
+                clearTimeout(timer);
+
                 // Do not close the toolbar when bluring the editable area and clicking into the anchor form
                 if (!self.options.disableAnchorForm && e && self.clickingIntoArchorForm(e)) {
                     return false;
                 }
 
-                self.checkSelection();
+                timer = setTimeout(function () {
+                    self.checkSelection();
+                }, 10);
             };
 
             this.on(this.options.ownerDocument.documentElement, 'mouseup', this.checkSelectionWrapper);
@@ -1027,17 +1206,52 @@ if (typeof module === 'object') {
             for (i = 0; i < this.elements.length; i += 1) {
                 this.on(this.elements[i], 'keyup', this.checkSelectionWrapper);
                 this.on(this.elements[i], 'blur', this.checkSelectionWrapper);
-                this.on(this.elements[i], 'click', this.checkSelectionWrapper);
+                this.on(this.elements[i], 'mouseup', this.checkSelectionWrapper);
             }
+
             return this;
         },
 
+        // http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div
+        insertHTML: function insertHTML(html) {
+            var selection, range, el, fragment, node, lastNode;
+
+            if (this.options.ownerDocument.queryCommandSupported('insertHTML')) {
+                try {
+                    return this.options.ownerDocument.execCommand('insertHTML', false, html);
+                } catch (ignore) {}
+            }
+
+            selection = window.getSelection();
+            if (selection.getRangeAt && selection.rangeCount) {
+                range = selection.getRangeAt(0);
+                range.deleteContents();
+
+                el = this.options.ownerDocument.createElement("div");
+                el.innerHTML = html;
+                fragment = this.options.ownerDocument.createDocumentFragment();
+                while (el.firstChild) {
+                    node = el.firstChild;
+                    lastNode = fragment.appendChild(node);
+                }
+                range.insertNode(fragment);
+
+                // Preserve the selection:
+                if (lastNode) {
+                    range = range.cloneRange();
+                    range.setStartAfter(lastNode);
+                    range.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+            }
+        },
 
         bindDragDrop: function () {
             var self = this, i, className, onDrag, onDrop, element;
 
             if (!self.options.imageDragging) {
-                return;
+                return this;
             }
 
             className = 'medium-editor-dragover';
@@ -1065,7 +1279,7 @@ if (typeof module === 'object') {
                         fileReader.readAsDataURL(file);
 
                         id = 'medium-img-' + (+new Date());
-                        insertHTMLCommand(self.options.ownerDocument, '<img class="medium-image-loading" id="' + id + '" />');
+                        self.insertHTML('<img class="medium-image-loading" id="' + id + '" />');
 
                         fileReader.onload = function () {
                             var img = document.getElementById(id);
@@ -1100,6 +1314,7 @@ if (typeof module === 'object') {
         },
 
         checkSelection: function () {
+
             var newSelection,
                 selectionElement;
 
@@ -1108,6 +1323,7 @@ if (typeof module === 'object') {
                     !this.options.disableToolbar) {
 
                 newSelection = this.options.contentWindow.getSelection();
+
                 if ((!this.options.updateOnEmptySelection && newSelection.toString().trim() === '') ||
                         (this.options.allowMultiParagraphSelection === false && this.hasMultiParagraphs()) ||
                         this.selectionInContentEditableFalse()) {
@@ -1336,21 +1552,30 @@ if (typeof module === 'object') {
         },
 
         setToolbarButtonStates: function () {
-            var buttons = this.toolbarActions.querySelectorAll('button'),
-                i;
-            for (i = 0; i < buttons.length; i += 1) {
-                buttons[i].classList.remove(this.options.activeButtonClass);
-            }
+            this.commands.forEach(function (extension) {
+                if (typeof extension.deactivate === 'function') {
+                    extension.deactivate();
+                }
+            }.bind(this));
             this.checkActiveButtons();
             return this;
         },
 
         checkActiveButtons: function () {
             var elements = Array.prototype.slice.call(this.elements),
-                parentNode = this.getSelectedParentElement();
+                parentNode = this.getSelectedParentElement(),
+                checkExtension = function (extension) {
+                    if (typeof extension.checkState === 'function') {
+                        extension.checkState(parentNode);
+                    } else if (typeof extension.isActive === 'function') {
+                        if (!extension.isActive() && extension.shouldActivate(parentNode)) {
+                            extension.activate();
+                        }
+                    }
+                };
             while (parentNode.tagName !== undefined && this.parentElements.indexOf(parentNode.tagName.toLowerCase) === -1) {
                 this.activateButton(parentNode.tagName.toLowerCase());
-                this.callExtensions('checkState', parentNode);
+                this.commands.forEach(checkExtension.bind(this));
 
                 // we can abort the search upwards if we leave the contentEditable element
                 if (elements.indexOf(parentNode) !== -1) {
@@ -1362,44 +1587,19 @@ if (typeof module === 'object') {
 
         activateButton: function (tag) {
             var el = this.toolbar.querySelector('[data-element="' + tag + '"]');
-            if (el !== null && el.className.indexOf(this.options.activeButtonClass) === -1) {
-                el.className += ' ' + this.options.activeButtonClass;
+            if (el !== null && !el.classList.contains(this.options.activeButtonClass)) {
+                el.classList.add(this.options.activeButtonClass);
             }
         },
 
         bindButtons: function () {
-            var buttons = this.toolbar.querySelectorAll('button'),
-                i,
-                self = this,
-                triggerAction = function (e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (self.selection === undefined) {
-                        self.checkSelection();
-                    }
-                    if (this.className.indexOf(self.options.activeButtonClass) > -1) {
-                        this.classList.remove(self.options.activeButtonClass);
-                    } else {
-                        this.className += ' ' + self.options.activeButtonClass;
-                    }
-                    if (this.hasAttribute('data-action')) {
-                        self.execAction(this.getAttribute('data-action'), e);
-                    }
-                    // Allows extension buttons to show a form
-                    // TO DO: Improve this
-                    if (this.hasAttribute('data-form')) {
-                        self.showForm(this.getAttribute('data-form'), e);
-                    }
-                };
-            for (i = 0; i < buttons.length; i += 1) {
-                this.on(buttons[i], 'click', triggerAction);
-            }
-            this.setFirstAndLastItems(buttons);
+            this.setFirstAndLastItems(this.toolbar.querySelectorAll('button'));
             return this;
         },
 
         setFirstAndLastItems: function (buttons) {
             if (buttons.length > 0) {
+
                 buttons[0].className += ' ' + this.options.firstButtonClass;
                 buttons[buttons.length - 1].className += ' ' + this.options.lastButtonClass;
             }
@@ -1420,6 +1620,9 @@ if (typeof module === 'object') {
             } else {
                 this.options.ownerDocument.execCommand(action, false, null);
                 this.setToolbarPosition();
+                if (action.indexOf('justify') === 0) {
+                    this.setToolbarButtonStates();
+                }
             }
         },
 
@@ -1549,6 +1752,7 @@ if (typeof module === 'object') {
         hideToolbar: function () {
             if (this.isToolbarShown()) {
                 this.toolbar.classList.remove('medium-editor-toolbar-active');
+                // TODO: this should be an option?
                 if (this.onHideToolbar) {
                     this.onHideToolbar();
                 }
@@ -1556,6 +1760,11 @@ if (typeof module === 'object') {
         },
 
         hideToolbarActions: function () {
+            this.commands.forEach(function (extension) {
+                if (extension.onHide && typeof extension.onHide === 'function') {
+                    extension.onHide();
+                }
+            });
             this.keepToolbarAlive = false;
             this.hideToolbar();
         },
@@ -1952,6 +2161,9 @@ if (typeof module === 'object') {
             this.on(this.options.contentWindow, 'resize', function () {
                 self.handleResize();
             });
+
+            this.bindBlur();
+
             return this;
         },
 
@@ -2030,10 +2242,10 @@ if (typeof module === 'object') {
                                 html += '<p>' + self.htmlEntities(paragraphs[p]) + '</p>';
                             }
                         }
-                        insertHTMLCommand(self.options.ownerDocument, html);
+                        self.insertHTML(html);
                     } else {
                         html = self.htmlEntities(e.clipboardData.getData(dataFormatPlain));
-                        insertHTMLCommand(self.options.ownerDocument, html);
+                        self.insertHTML(html);
                     }
                 }
             };
@@ -2164,7 +2376,7 @@ if (typeof module === 'object') {
                 }
 
             }
-            insertHTMLCommand(this.options.ownerDocument, fragmentBody.innerHTML.replace(/&nbsp;/g, ' '));
+            this.insertHTML(fragmentBody.innerHTML.replace(/&nbsp;/g, ' '));
         },
         isCommonBlock: function (el) {
             return (el && (el.tagName.toLowerCase() === 'p' || el.tagName.toLowerCase() === 'div'));

data/vendor/assets/stylesheets/medium-editor/medium-editor.css

@@ -7,6 +7,7 @@
   font-size: 0; }
 
 @-webkit-keyframes pop-upwards {
+
   0% {
     -webkit-transform: matrix(0.97, 0, 0, 1, 0, 12);
             transform: matrix(0.97, 0, 0, 1, 0, 12);
@@ -100,6 +101,8 @@
       line-height: 1.33;
       text-decoration: none;
       box-sizing: border-box; }
+      .medium-editor-toolbar li button:focus, .medium-editor-anchor-preview li button:focus {
+        outline: none; }
     .medium-editor-toolbar li .medium-editor-action-underline, .medium-editor-anchor-preview li .medium-editor-action-underline {
       text-decoration: underline; }
     .medium-editor-toolbar li .medium-editor-action-pre, .medium-editor-anchor-preview li .medium-editor-action-pre {
@@ -122,11 +125,9 @@
   position: fixed;
   top: 1px; }
 
-.stalker-toolbar {
+.medium-editor-toolbar-active.stalker-toolbar {
   -webkit-animation: pop-upwards 160ms forwards linear;
-          animation: pop-upwards 160ms forwards linear;
-  -webkit-transition: top 0.075s ease-out, left 0.075s ease-out;
-          transition: top 0.075s ease-out, left 0.075s ease-out; }
+          animation: pop-upwards 160ms forwards linear; }
 
 .medium-editor-action-bold {
   font-weight: bolder; }
@@ -182,6 +183,7 @@
           animation: medium-image-loading-animation 1s infinite ease-in-out; }
 
 @-webkit-keyframes medium-image-loading-animation {
+
   0% {
     -webkit-transform: scale(0);
             transform: scale(0); }

data/vendor/assets/stylesheets/medium-editor/themes/bootstrap.css

@@ -8,9 +8,7 @@
 .medium-editor-toolbar {
   border: 1px solid #357ebd;
   background-color: #428bca;
-  border-radius: 4px;
-  -webkit-transition: top 0.075s ease-out, left 0.075s ease-out;
-          transition: top 0.075s ease-out, left 0.075s ease-out; }
+  border-radius: 4px; }
   .medium-editor-toolbar li button {
     min-width: 60px;
     height: 60px;

data/vendor/assets/stylesheets/medium-editor/themes/default.css

@@ -12,9 +12,7 @@
   background: -webkit-linear-gradient(bottom, #242424, rgba(36, 36, 36, 0.75));
   background: linear-gradient(bottom, #242424, rgba(36, 36, 36, 0.75));
   border-radius: 5px;
-  box-shadow: 0 0 3px #000;
-  -webkit-transition: top 0.075s ease-out, left 0.075s ease-out;
-          transition: top 0.075s ease-out, left 0.075s ease-out; }
+  box-shadow: 0 0 3px #000; }
   .medium-editor-toolbar li button {
     min-width: 50px;
     height: 50px;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: medium-editor-rails
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 1.3.0
 platform: ruby
 authors:
 - Ahmet Sezgin Duran
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-02-07 00:00:00.000000000 Z
+date: 2015-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties