Merge pull request yabwe#566 from daviferreira/spellcheck

Add spellcheck options to enable/disable native spellcheck

Author: nmielnik

README.md

@@ -83,6 +83,7 @@ the textarea value to the div HTML content.
 * __imageDragging__: Allows image drag and drop into the editor. Default: true
 * __placeholder__: Defines the default placeholder for empty contenteditables when __disablePlaceholders__ is not set to true. You can overwrite it by setting a data-placeholder attribute on your elements. Default: 'Type your text'
 * __secondHeader__: HTML tag to be used as second header. Default: h4
+* __spellcheck__: Enable/disable native contentEditable automatic spellcheck. Default: true
 * __standardizeSelectionStart__: Standardizes how the beginning of a range is decided between browsers whenever the selected text is analyzed for updating toolbar buttons status
 
 ### Toolbar options

dist/js/medium-editor.js

@@ -1112,6 +1112,7 @@ var editorDefaults;
         activeButtonClass: 'medium-editor-button-active',
         firstButtonClass: 'medium-editor-button-first',
         lastButtonClass: 'medium-editor-button-last',
+        spellcheck: true,
 
         paste: {
             forcePlainText: true,
@@ -1123,6 +1124,7 @@ var editorDefaults;
     };
 
 })();
+
 var Extension;
 (function(){
 
@@ -3448,6 +3450,7 @@ function MediumEditor(elements, options) {
                     this.elements[i] = createContentEditable.call(this, i);
                 }
                 this.elements[i].setAttribute('contentEditable', true);
+                this.elements[i].setAttribute('spellcheck', this.options.spellcheck);
             }
             if (!this.elements[i].getAttribute('data-placeholder')) {
                 this.elements[i].setAttribute('data-placeholder', this.options.placeholder);
@@ -3681,6 +3684,7 @@ function MediumEditor(elements, options) {
 
             for (i = 0; i < this.elements.length; i += 1) {
                 this.elements[i].removeAttribute('contentEditable');
+                this.elements[i].removeAttribute('spellcheck');
                 this.elements[i].removeAttribute('data-medium-element');
             }
 

dist/js/medium-editor.min.js

@@ -17,6 +17,17 @@ describe('Content TestCase', function () {
         tearDown(this.el);
     });
 
+    it('should removing paragraphs when a list is inserted inside of it', function () {
+        this.el.innerHTML = '<p>lorem ipsum<ul><li>dolor</li></ul></p>';
+        var editor = new MediumEditor('.editor', {
+            buttons: ['orderedlist']
+        }),
+            target = editor.elements[0].querySelector('p');
+        selectElementContentsAndFire(target);
+        fireEvent(editor.toolbar.getToolbarElement().querySelector('[data-action="insertorderedlist"]'), 'click');
+        expect(this.el.innerHTML).toMatch(/^<ol><li>lorem ipsum(<br>)?<\/li><\/ol><ul><li>dolor<\/li><\/ul>?/);
+    });
+
     describe('when the tab key is pressed', function () {
         it('should indent when within an <li>', function () {
             this.el.innerHTML = '<ol><li>lorem</li><li>ipsum</li></ol>';
@@ -200,14 +211,15 @@ describe('Content TestCase', function () {
         });
     });
 
-    it('should removing paragraphs when a list is inserted inside of it', function () {
-        this.el.innerHTML = '<p>lorem ipsum<ul><li>dolor</li></ul></p>';
-        var editor = new MediumEditor('.editor', {
-            buttons: ['orderedlist']
-        }),
-            target = editor.elements[0].querySelector('p');
-        selectElementContentsAndFire(target);
-        fireEvent(editor.toolbar.getToolbarElement().querySelector('[data-action="insertorderedlist"]'), 'click');
-        expect(this.el.innerHTML).toMatch(/^<ol><li>lorem ipsum(<br>)?<\/li><\/ol><ul><li>dolor<\/li><\/ul>?/);
+    describe('spellcheck', function () {
+      it('should have spellcheck attribute set to true by default', function () {
+          var editor = new MediumEditor('.editor');
+          expect(editor.elements[0].getAttribute('spellcheck')).toBe('true');
+      });
+
+      it('should accept spellcheck as an options', function () {
+          var editor = new MediumEditor('.editor', {spellcheck: false});
+          expect(editor.elements[0].getAttribute('spellcheck')).toBe('false');
+      });
     });
 });

spec/content.spec.js

@@ -125,6 +125,7 @@ describe('Initialization TestCase', function () {
                 activeButtonClass: 'medium-editor-button-active',
                 firstButtonClass: 'medium-editor-button-first',
                 lastButtonClass: 'medium-editor-button-last',
+                spellcheck: true,
                 paste: {
                     forcePlainText: true,
                     cleanPastedHTML: false,

spec/init.spec.js

@@ -298,6 +298,7 @@ function MediumEditor(elements, options) {
                     this.elements[i] = createContentEditable.call(this, i);
                 }
                 this.elements[i].setAttribute('contentEditable', true);
+                this.elements[i].setAttribute('spellcheck', this.options.spellcheck);
             }
             if (!this.elements[i].getAttribute('data-placeholder')) {
                 this.elements[i].setAttribute('data-placeholder', this.options.placeholder);
@@ -531,6 +532,7 @@ function MediumEditor(elements, options) {
 
             for (i = 0; i < this.elements.length; i += 1) {
                 this.elements[i].removeAttribute('contentEditable');
+                this.elements[i].removeAttribute('spellcheck');
                 this.elements[i].removeAttribute('data-medium-element');
             }
 

src/js/core.js

@@ -38,6 +38,7 @@ var editorDefaults;
         activeButtonClass: 'medium-editor-button-active',
         firstButtonClass: 'medium-editor-button-first',
         lastButtonClass: 'medium-editor-button-last',
+        spellcheck: true,
 
         paste: {
             forcePlainText: true,
@@ -48,4 +49,4 @@ var editorDefaults;
 
     };
 
-})();
+})();