Fix selection of embedded objects.

slab · May 7, 2015 · df687b1 · df687b1
1 parent 7f78558
commit df687b1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/config/grunt/dist.coffee b/config/grunt/dist.coffee
@@ -80,6 +80,7 @@ module.exports = (grunt) ->
         'clone', 'extend', 'defaults', 'omit', 'values'
         'isElement', 'isEqual', 'isFunction', 'isNumber', 'isObject', 'isString'
         'uniqueId'
+        'omit'
       ]
       flags: ['development']
     target:

diff --git a/src/modules/toolbar.coffee b/src/modules/toolbar.coffee
@@ -1,6 +1,7 @@
 Quill = require('../quill')
-_     = Quill.require('lodash')
-dom   = Quill.require('dom')
+Format = require('../core/format')
+_ = Quill.require('lodash')
+dom = Quill.require('dom')
 
 
 class Toolbar
@@ -66,7 +67,6 @@ class Toolbar
     )
 
   setActive: (format, value) ->
-    value = false if format == 'image'  # TODO generalize to all embeds
     input = @inputs[format]
     return unless input?
     $input = dom(input)
@@ -122,7 +122,12 @@ class Toolbar
     else
       contents = @quill.getContents(range)
     formatsArr = _.map(contents.ops, 'attributes')
-    return this._intersectFormats(formatsArr)
+    activeFormats = this._intersectFormats(formatsArr)
+
+    if range.isCollapsed()
+      activeFormats = _.omit(activeFormats, (value, format) => return @quill.editor.doc.formats[format].isType(Format.types.EMBED))
+
+    return activeFormats
 
   _getLineActive: (range) ->
     formatsArr = []

diff --git a/test/unit/modules/toolbar.coffee b/test/unit/modules/toolbar.coffee
@@ -136,18 +136,16 @@ describe('Toolbar', ->
     )
   )
 
-  describe('quill.deleteText()', ->
-    it('button', ->
+  describe('buttons should update when calling Quill method', ->
+    it('deleteText()', ->
       @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', ->
+    it('insertEmbed()', ->
       @quill.addModule('image-tooltip', true)
       image = @toolbarContainer.querySelector('.ql-image')
       @quill.setSelection(1, 1)
@@ -159,23 +157,23 @@ describe('Toolbar', ->
       expect(dom(image).hasClass('ql-active')).toBe(false)
     )
 
-    it('button', ->
+    it('insertText()', ->
       @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', ->
+    it('setText()', ->
       @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', ->
+    it('setHTML()', ->
       italic = @toolbarContainer.querySelector('.ql-italic')
       @quill.setSelection(1, 1)
       expect(dom(@button).hasClass('ql-active')).toBe(true)
@@ -186,12 +184,24 @@ describe('Toolbar', ->
       expect(dom(italic).hasClass('ql-active')).toBe(true)
     )
 
-    it('button', ->
+    it('formatText()', ->
       @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)
     )
   )
+
+  describe('embed button should become active when selecting', ->
+    it('an image', ->
+      @quill.addModule('image-tooltip', true)
+      image = @toolbarContainer.querySelector('.ql-image')
+
+      @quill.setSelection(0, 0)
+      @quill.insertEmbed(0, 'image', 'http://quilljs.com/images/cloud.png')
+      @quill.setSelection(0, 1)
+      expect(dom(image).hasClass('ql-active')).toBe(true)
+    )
+  )
 )