5.10.0

CHANGES.md

@@ -1,3 +1,12 @@
+5.10.0 / 2015-10-30
+==================
+* Added disableExtraSpaces option for preventing errant spaces
+* Added editalbeKeydownSpace event
+* Fix issue with return key at the end of text with bad formatting
+* Added new font name extension (beta)
+* Documentation updates and cleanup
+
+
 5.9.0 / 2015-10-19
 ==================
 * Add showWhenToolbarIsVisible option for displaying anchor-preview when toolbar is visible

dist/js/medium-editor.js

@@ -2307,6 +2307,10 @@ MediumEditor.extensions = {};
                     // Detecting keydown on the contenteditables
                     this.attachToEachElement('keydown', this.handleKeydown);
                     break;
+                case 'editableKeydownSpace':
+                    // Detecting keydown for SPACE on the contenteditables
+                    this.setupListener('editableKeydown');
+                    break;
                 case 'editableKeydownEnter':
                     // Detecting keydown for ENTER on the contenteditables
                     this.setupListener('editableKeydown');
@@ -2519,8 +2523,13 @@ MediumEditor.extensions = {};
         },
 
         handleKeydown: function (event) {
+
             this.triggerCustomEvent('editableKeydown', event, event.currentTarget);
 
+            if (MediumEditor.util.isKey(event, MediumEditor.util.keyCode.SPACE)) {
+                return this.triggerCustomEvent('editableKeydownSpace', event, event.currentTarget);
+            }
+
             if (MediumEditor.util.isKey(event, MediumEditor.util.keyCode.ENTER) || (event.ctrlKey && MediumEditor.util.isKey(event, MediumEditor.util.keyCode.M))) {
                 return this.triggerCustomEvent('editableKeydownEnter', event, event.currentTarget);
             }
@@ -4112,6 +4121,191 @@ MediumEditor.extensions = {};
     MediumEditor.extensions.keyboardCommands = KeyboardCommands;
 }());
 
+(function () {
+    'use strict';
+
+    var FontNameForm = MediumEditor.extensions.form.extend({
+
+        name: 'fontname',
+        action: 'fontName',
+        aria: 'change font name',
+        contentDefault: '±', // ±
+        contentFA: '<i class="fa fa-font"></i>',
+
+        fonts: ['', 'Arial', 'Verdana', 'Times New Roman'],
+
+        init: function () {
+            MediumEditor.extensions.form.prototype.init.apply(this, arguments);
+        },
+
+        // Called when the button the toolbar is clicked
+        // Overrides ButtonExtension.handleClick
+        handleClick: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (!this.isDisplayed()) {
+                // Get FontName of current selection (convert to string since IE returns this as number)
+                var fontName = this.document.queryCommandValue('fontName') + '';
+                this.showForm(fontName);
+            }
+
+            return false;
+        },
+
+        // Called by medium-editor to append form to the toolbar
+        getForm: function () {
+            if (!this.form) {
+                this.form = this.createForm();
+            }
+            return this.form;
+        },
+
+        // Used by medium-editor when the default toolbar is to be displayed
+        isDisplayed: function () {
+            return this.getForm().style.display === 'block';
+        },
+
+        hideForm: function () {
+            this.getForm().style.display = 'none';
+            this.getSelect().value = '';
+        },
+
+        showForm: function (fontName) {
+            var select = this.getSelect();
+
+            this.base.saveSelection();
+            this.hideToolbarDefaultActions();
+            this.getForm().style.display = 'block';
+            this.setToolbarPosition();
+
+            select.value = fontName || '';
+            select.focus();
+        },
+
+        // Called by core when tearing down medium-editor (destroy)
+        destroy: function () {
+            if (!this.form) {
+                return false;
+            }
+
+            if (this.form.parentNode) {
+                this.form.parentNode.removeChild(this.form);
+            }
+
+            delete this.form;
+        },
+
+        // core methods
+
+        doFormSave: function () {
+            this.base.restoreSelection();
+            this.base.checkSelection();
+        },
+
+        doFormCancel: function () {
+            this.base.restoreSelection();
+            this.clearFontName();
+            this.base.checkSelection();
+        },
+
+        // form creation and event handling
+        createForm: function () {
+            var doc = this.document,
+                form = doc.createElement('div'),
+                select = doc.createElement('select'),
+                close = doc.createElement('a'),
+                save = doc.createElement('a'),
+                option;
+
+            // Font Name Form (div)
+            form.className = 'medium-editor-toolbar-form';
+            form.id = 'medium-editor-toolbar-form-fontname-' + this.getEditorId();
+
+            // Handle clicks on the form itself
+            this.on(form, 'click', this.handleFormClick.bind(this));
+
+            // Add font names
+            for (var i = 0; i<this.fonts.length; i++) {
+                option = doc.createElement('option');
+                option.innerHTML = this.fonts[i];
+                option.value = this.fonts[i];
+                select.appendChild(option);
+            }
+
+            select.className = 'medium-editor-toolbar-select';
+            form.appendChild(select);
+
+            // Handle typing in the textbox
+            this.on(select, 'change', this.handleFontChange.bind(this));
+
+            // Add save buton
+            save.setAttribute('href', '#');
+            save.className = 'medium-editor-toobar-save';
+            save.innerHTML = this.getEditorOption('buttonLabels') === 'fontawesome' ?
+                             '<i class="fa fa-check"></i>' :
+                             '&#10003;';
+            form.appendChild(save);
+
+            // Handle save button clicks (capture)
+            this.on(save, 'click', this.handleSaveClick.bind(this), true);
+
+            // Add close button
+            close.setAttribute('href', '#');
+            close.className = 'medium-editor-toobar-close';
+            close.innerHTML = this.getEditorOption('buttonLabels') === 'fontawesome' ?
+                              '<i class="fa fa-times"></i>' :
+                              '&times;';
+            form.appendChild(close);
+
+            // Handle close button clicks
+            this.on(close, 'click', this.handleCloseClick.bind(this));
+
+            return form;
+        },
+
+        getSelect: function () {
+            return this.getForm().querySelector('select.medium-editor-toolbar-select');
+        },
+
+        clearFontName: function () {
+            MediumEditor.selection.getSelectedElements(this.document).forEach(function (el) {
+                if (el.nodeName.toLowerCase() === 'font' && el.hasAttribute('face')) {
+                    el.removeAttribute('face');
+                }
+            });
+        },
+
+        handleFontChange: function () {
+            var font = this.getSelect().value;
+            if (font === '') {
+                this.clearFontName();
+            } else {
+                this.execAction('fontName', { name: font });
+            }
+        },
+
+        handleFormClick: function (event) {
+            // make sure not to hide form when clicking inside the form
+            event.stopPropagation();
+        },
+
+        handleSaveClick: function (event) {
+            // Clicking Save -> create the font size
+            event.preventDefault();
+            this.doFormSave();
+        },
+
+        handleCloseClick: function (event) {
+            // Click Close -> close the form
+            event.preventDefault();
+            this.doFormCancel();
+        }
+    });
+
+    MediumEditor.extensions.fontName = FontNameForm;
+}());
+
 (function () {
     'use strict';
 
@@ -5376,6 +5570,16 @@ MediumEditor.extensions = {};
 
     // Event handlers that shouldn't be exposed externally
 
+    function handleDisableExtraSpaces(event) {
+        var node = MediumEditor.selection.getSelectionStart(this.options.ownerDocument),
+            textContent = node.textContent,
+            caretPositions = MediumEditor.selection.getCaretOffsets(node);
+
+        if ((textContent[caretPositions.left - 1] === undefined) || (textContent[caretPositions.left - 1] === ' ') || (textContent[caretPositions.left] === undefined)) {
+            event.preventDefault();
+        }
+    }
+
     function handleDisabledEnterKeydown(event, element) {
         if (this.options.disableReturn || element.getAttribute('data-disable-return')) {
             event.preventDefault();
@@ -5384,7 +5588,8 @@ MediumEditor.extensions = {};
 
             // if current text selection is empty OR previous sibling text is empty OR it is not a list
             if ((node && node.textContent.trim() === '' && node.nodeName.toLowerCase() !== 'li') ||
-                (node.previousElementSibling && node.previousElementSibling.textContent.trim() === '')) {
+                (node.previousElementSibling && node.previousElementSibling.nodeName.toLowerCase() !== 'br' &&
+                 node.previousElementSibling.textContent.trim() === '')) {
                 event.preventDefault();
             }
         }
@@ -5724,6 +5929,11 @@ MediumEditor.extensions = {};
         this.subscribe('editableKeydownDelete', handleBlockDeleteKeydowns.bind(this));
         this.subscribe('editableKeydownEnter', handleBlockDeleteKeydowns.bind(this));
 
+        // Bind double space event
+        if (this.options.disableExtraSpaces) {
+            this.subscribe('editableKeydownSpace', handleDisableExtraSpaces.bind(this));
+        }
+
         // disabling return or double return
         if (this.options.disableReturn || this.options.disableDoubleReturn) {
             this.subscribe('editableKeydownEnter', handleDisabledEnterKeydown.bind(this));
@@ -5850,6 +6060,10 @@ MediumEditor.extensions = {};
             return this.options.ownerDocument.execCommand('fontSize', false, opts.size);
         }
 
+        if (action === 'fontName') {
+            return this.options.ownerDocument.execCommand('fontName', false, opts.name);
+        }
+
         if (action === 'createLink') {
             return this.createLink(opts);
         }
@@ -6079,6 +6293,9 @@ MediumEditor.extensions = {};
                 case 'fileDragging':
                     extension = new MediumEditor.extensions.fileDragging(opts);
                     break;
+                case 'fontname':
+                    extension = new MediumEditor.extensions.fontName(this.options.fontName);
+                    break;
                 case 'fontsize':
                     extension = new MediumEditor.extensions.fontSize(opts);
                     break;
@@ -6432,6 +6649,7 @@ MediumEditor.extensions = {};
         delay: 0,
         disableReturn: false,
         disableDoubleReturn: false,
+        disableExtraSpaces: false,
         disableEditing: false,
         autoLink: false,
         elementsContainer: false,
@@ -6460,7 +6678,7 @@ MediumEditor.parseVersionString = function (release) {
 
 MediumEditor.version = MediumEditor.parseVersionString.call(this, ({
     // grunt-bump looks for this:
-    'version': '5.9.0'
+    'version': '5.10.0'
 }).version);
 
     return MediumEditor;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "medium-editor",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "author": "Davi Ferreira <hi@daviferreira.com>",
   "contributors": [
     {

src/js/version.js

@@ -15,5 +15,5 @@ MediumEditor.parseVersionString = function (release) {
 
 MediumEditor.version = MediumEditor.parseVersionString.call(this, ({
     // grunt-bump looks for this:
-    'version': '5.9.0'
+    'version': '5.10.0'
 }).version);