diff --git a/spec/elements.spec.js b/spec/elements.spec.js index f3658b49b..22c9ae947 100644 --- a/spec/elements.spec.js +++ b/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 () { diff --git a/spec/textarea.spec.js b/spec/textarea.spec.js index 0a827f72e..ee284440e 100644 --- a/spec/textarea.spec.js +++ b/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 () { diff --git a/src/js/core.js b/src/js/core.js index c203a7ef5..de987225e 100644 --- a/src/js/core.js +++ b/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'); diff --git a/src/sass/medium-editor.scss b/src/sass/medium-editor.scss index 2f470d604..b33bd573c 100644 --- a/src/sass/medium-editor.scss +++ b/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;