hide placeholder on formatted line

fixes #657
slab · May 14, 2016 · 22054a5 · 22054a5
1 parent 41157c8
commit 22054a5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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');
     });
   });
 });