Merge pull request #356 from willrowe/fix-text-change-methods

Fix text change methods not updating toolbar icons
slab · May 5, 2015 · 7f78558 · 7f78558
2 parents 6a4c334 + 8b45903
commit 7f78558
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 1 deletion.
diff --git a/src/modules/toolbar.coffee b/src/modules/toolbar.coffee
@@ -31,6 +31,7 @@ class Toolbar
     @quill.on(Quill.events.SELECTION_CHANGE, (range) =>
       this.updateActive(range) if range?
     )
+    @quill.on(Quill.events.TEXT_CHANGE, => this.updateActive())
     @quill.onModuleLoad('keyboard', (keyboard) =>
       keyboard.addHotkey([dom.KEYS.BACKSPACE, dom.KEYS.DELETE], =>
         _.defer(_.bind(this.updateActive, this))

diff --git a/src/modules/tooltip.coffee b/src/modules/tooltip.coffee
@@ -15,7 +15,7 @@ class Tooltip
     @container.innerHTML = @options.template
     this.hide()
     @quill.on(@quill.constructor.events.TEXT_CHANGE, (delta, source) =>
-      if source == 'user' and @container.style.left != Tooltip.HIDE_MARGIN
+      if @container.style.left != Tooltip.HIDE_MARGIN
         @range = null
         this.hide()
     )

diff --git a/test/fixtures/unit.html b/test/fixtures/unit.html
@@ -1,6 +1,8 @@
 <div id="toolbar-container">
   <button class="ql-bold">Bold</button>
   <button class="ql-link">Link</button>
+  <button class="ql-italic">Italic</button>
+  <button class="ql-image">Image</button>
   <select class="ql-size">
     <option value="10px">Small</option>
     <option value="13px" selected>Normal</option>

diff --git a/test/unit/modules/toolbar.coffee b/test/unit/modules/toolbar.coffee
@@ -135,4 +135,63 @@ describe('Toolbar', ->
       )
     )
   )
+
+  describe('quill.deleteText()', ->
+    it('button', ->
+      @quill.setSelection(1, 1)
+      expect(dom(@button).hasClass('ql-active')).toBe(true)
+
+      @quill.deleteText(0, 2)
+      expect(dom(@button).hasClass('ql-active')).toBe(false)
+    )
+  )
+
+  describe('quill content methods', ->
+    it('button', ->
+      @quill.addModule('image-tooltip', true)
+      image = @toolbarContainer.querySelector('.ql-image')
+      @quill.setSelection(1, 1)
+      expect(dom(@button).hasClass('ql-active')).toBe(true)
+      expect(dom(image).hasClass('ql-active')).toBe(false)
+
+      @quill.insertEmbed(1, 'image', 'http://quilljs.com/images/cloud.png')
+      expect(dom(@button).hasClass('ql-active')).toBe(false)
+      expect(dom(image).hasClass('ql-active')).toBe(false)
+    )
+
+    it('button', ->
+      @quill.setSelection(1, 1)
+      expect(dom(@button).hasClass('ql-active')).toBe(true)
+
+      @quill.insertText(1, 'not-bold', 'bold', false)
+      expect(dom(@button).hasClass('ql-active')).toBe(false)
+    )
+
+    it('button', ->
+      @quill.setSelection(1, 1)
+      expect(dom(@button).hasClass('ql-active')).toBe(true)
+
+      @quill.setText('plain text')
+      expect(dom(@button).hasClass('ql-active')).toBe(false)
+    )
+
+    it('button', ->
+      italic = @toolbarContainer.querySelector('.ql-italic')
+      @quill.setSelection(1, 1)
+      expect(dom(@button).hasClass('ql-active')).toBe(true)
+      expect(dom(italic).hasClass('ql-active')).toBe(false)
+
+      @quill.setHTML('<i>italicized</i>')
+      expect(dom(@button).hasClass('ql-active')).toBe(false)
+      expect(dom(italic).hasClass('ql-active')).toBe(true)
+    )
+
+    it('button', ->
+      @quill.setSelection(1, 1)
+      expect(dom(@button).hasClass('ql-active')).toBe(true)
+
+      @quill.formatText(0, 1, 'bold', false)
+      expect(dom(@button).hasClass('ql-active')).toBe(false)
+    )
+  )
 )