diff --git a/assets/core.styl b/assets/core.styl index 93ed991e43..7ba17394c2 100644 --- a/assets/core.styl +++ b/assets/core.styl @@ -127,7 +127,7 @@ resets(arr) .ql-align-right text-align: right -.ql-editor.ql-empty::before +.ql-editor.ql-blank::before color: rgba(0,0,0,0.6) content: attr(data-placeholder) font-style: italic diff --git a/core/editor.js b/core/editor.js index bba350a7b3..2965d082ec 100644 --- a/core/editor.js +++ b/core/editor.js @@ -146,6 +146,13 @@ class Editor { this.formatText(index, text.length, formats, source); } + isBlank() { + if (this.scroll.children.length == 0) return true; + if (this.scroll.children.length > 1) return false; + let child = this.scroll.children.head; + return child.length() <= 1 && Object.keys(child.formats()).length == 0; + } + removeFormat(index, length) { let text = this.getText(index, length); let [line, offset] = this.scroll.line(index + length); diff --git a/core/quill.js b/core/quill.js index 5fd5d9106f..31f98522d7 100644 --- a/core/quill.js +++ b/core/quill.js @@ -83,9 +83,9 @@ class Quill { if (options.debug) { Quill.debug(options.debug); } - this.root.classList.toggle('ql-empty', this.getLength() <= 1); + this.root.classList.toggle('ql-blank', this.editor.isBlank()); this.emitter.on(Emitter.events.TEXT_CHANGE, (delta) => { - this.root.classList.toggle('ql-empty', this.getLength() <= 1); + this.root.classList.toggle('ql-blank', this.editor.isBlank()); }); this.emitter.emit(Emitter.events.READY); } diff --git a/test/unit/core/quill.js b/test/unit/core/quill.js index 22027eafb9..489e4e8848 100644 --- a/test/unit/core/quill.js +++ b/test/unit/core/quill.js @@ -406,17 +406,19 @@ describe('Quill', function() { this.original = this.quill.getContents(); }); - it('editor has placeholder dataset', function() { + it('blank editor', function() { expect(this.quill.root.dataset.placeholder).toEqual('a great day to be a placeholder'); + expect(this.quill.root.classList).toContain('ql-blank'); }); - it('editor has empty class', function() { - expect(this.quill.root.classList).toContain('ql-empty'); + it('with text', function() { + this.quill.setText('test'); + expect(this.quill.root.classList).not.toContain('ql-blank'); }); - it('empty class should be removed', function() { - this.quill.setText('test'); - expect(this.quill.root.classList).not.toContain('ql-empty'); + it('formatted line', function() { + this.quill.formatLine(0, 1, 'list', 'ordered'); + expect(this.quill.root.classList).not.toContain('ql-blank'); }); }); });