Merge pull request #1115 from yabwe/css-lint-fix

Fix slow CSS selector

spec/elements.spec.js

@@ -32,10 +32,11 @@ describe('Elements TestCase', function () {
             expect(this.el.getAttribute('contenteditable')).toBeFalsy();
         });
 
-        it('should set element data attr medium-editor-element to true', function () {
+        it('should set element data attr medium-editor-element to true and add medium-editor-element class', function () {
             var editor = this.newMediumEditor('.editor');
             expect(editor.elements.length).toBe(1);
             expect(this.el.getAttribute('data-medium-editor-element')).toEqual('true');
+            expect(this.el.className).toBe('editor medium-editor-element');
         });
 
         it('should set element role attribute to textbox', function () {
@@ -65,11 +66,15 @@ describe('Elements TestCase', function () {
             expect(this.el.hasAttribute('contenteditable')).toBe(false);
         });
 
-        it('should remove the medium-editor-element attribute', function () {
+        it('should remove the medium-editor-element attribute and class name', function () {
+            this.el.classList.add('temp-class');
+            expect(this.el.className).toBe('editor temp-class');
             var editor = this.newMediumEditor('.editor');
             expect(this.el.getAttribute('data-medium-editor-element')).toEqual('true');
+            expect(this.el.className).toBe('editor temp-class medium-editor-element');
             editor.destroy();
             expect(this.el.hasAttribute('data-medium-editor-element')).toBe(false);
+            expect(this.el.className).toBe('editor temp-class');
         });
 
         it('should remove the role attribute', function () {

spec/textarea.spec.js

@@ -54,7 +54,7 @@ describe('Textarea TestCase', function () {
         it('should preserve textarea className', function () {
             this.el.className += ' test-class test-class-2';
             var editor = this.newMediumEditor('.editor');
-            expect(editor.elements[0].className).toBe('editor test-class test-class-2');
+            expect(editor.elements[0].className).toBe('editor test-class test-class-2 medium-editor-element');
         });
 
         it('should create unique div ids for multiple textareas', function () {
@@ -180,7 +180,7 @@ describe('Textarea TestCase', function () {
             this.el.className += ' test-class test-class-2';
             var editor = this.newMediumEditor('.editable-div');
             editor.addElements(this.el);
-            expect(editor.elements[1].className).toBe('editor test-class test-class-2');
+            expect(editor.elements[1].className).toBe('editor test-class test-class-2 medium-editor-element');
         });
 
         it('should create unique div ids for multiple textareas', function () {

src/js/core.js

@@ -413,6 +413,7 @@
             var elementId = MediumEditor.util.guid();
 
             element.setAttribute('data-medium-editor-element', true);
+            element.classList.add('medium-editor-element');
             element.setAttribute('role', 'textbox');
             element.setAttribute('aria-multiline', true);
             element.setAttribute('data-medium-editor-editor-index', editorId);
@@ -701,6 +702,7 @@
                 element.removeAttribute('contentEditable');
                 element.removeAttribute('spellcheck');
                 element.removeAttribute('data-medium-editor-element');
+                element.classList.remove('medium-editor-element');
                 element.removeAttribute('role');
                 element.removeAttribute('aria-multiline');
                 element.removeAttribute('medium-editor-index');

src/sass/medium-editor.scss

@@ -9,7 +9,7 @@
 @import "util/clearfix";
 
 // contenteditable rules
-[data-medium-editor-element] {
+.medium-editor-element {
     word-wrap: break-word;
     min-height: 30px;