Merge pull request #163 from livingdocsIO/fix-async-ranges-on-focus

Fix: Async ranges on focus

Author: lukasbuenger

spec/create-default-events.spec.js

@@ -0,0 +1,88 @@
+import $ from 'jquery'
+import rangy from 'rangy'
+
+import Cursor from '../src/cursor'
+import Editable from '../src/core'
+
+describe('Default Events', () => {
+
+  // create a Cursor object and set the selection to it
+  function createCursor ($elem, range) {
+    const cursor = new Cursor($elem[0], range)
+    cursor.setSelection()
+    return cursor
+  }
+
+  function createRangeAtEnd (node) {
+    const range = rangy.createRange()
+    range.selectNodeContents(node)
+    range.collapse(false)
+    return range
+  }
+
+  let onListener
+  // register one listener per test
+  function on (editable, eventName, func) {
+    // off() // make sure the last listener is unregistered
+    const obj = { calls: 0 }
+    function proxy () {
+      obj.calls += 1
+      func.apply(this, arguments)
+    }
+    onListener = { event: eventName, listener: proxy }
+    editable.on(eventName, proxy)
+    return obj
+  }
+
+  // unregister the event listener registered with 'on'
+  function off (editable) {
+    if (onListener) {
+      editable.unload()
+      onListener = undefined
+    }
+  }
+
+  describe('for editable', () => {
+
+
+    describe('on focus', () => {
+
+      beforeEach(function () {
+        this.focus = $.Event('focus')
+        this.blur = $.Event('blur')
+        this.$elem = $('<div />')
+        $(document.body).append(this.$elem)
+        this.editable = new Editable()
+        this.editable.add(this.$elem)
+        this.$elem.focus()
+      })
+      afterEach(function () {
+        off(this.editable)
+        this.editable.dispatcher.off()
+        this.$elem.remove()
+      })
+
+      it('always dispatches with virtual and native ranges in sync.', function () {
+        // <div>foo\</div>
+        this.$elem.html('foo')
+        createCursor(this.$elem, createRangeAtEnd(this.$elem[0]))
+
+        const onFocus = on(this.editable, 'focus', (element, selection) => {
+          if (!selection) return
+          expect(element).toEqual(this.$elem[0])
+          const range = selection.range
+          const nativeRange = range.nativeRange
+          expect(range.startContainer).toEqual(nativeRange.startContainer)
+          expect(range.endContainer).toEqual(nativeRange.endContainer)
+          expect(range.startOffset).toEqual(nativeRange.startOffset)
+          expect(range.endOffset).toEqual(nativeRange.endOffset)
+        })
+
+        this.$elem.trigger(this.focus)
+        this.$elem.trigger(this.blur)
+        this.$elem.trigger(this.focus)
+        expect(onFocus.calls).toEqual(2)
+      })
+    })
+  })
+})

src/dispatcher.js

@@ -84,6 +84,7 @@ export default class Dispatcher {
     this.$document
       .on('focus.editable', selector, function (event) {
         if (this.getAttribute(config.pastingAttribute)) return
+        self.selectionWatcher.syncSelection()
         self.notify('focus', this)
       })
 

src/selection-watcher.js

@@ -22,12 +22,19 @@ export default class SelectionWatcher {
     this.currentRange = undefined
   }
 
+  /**
+   * Updates the internal selection pointer to the current rangy selection.
+   */
+  syncSelection () {
+    this.rangySelection = rangy.getSelection(this.win)
+  }
+
   /**
   * Return a RangeContainer if the current selection is within an editable
   * otherwise return an empty RangeContainer
   */
   getRangeContainer () {
-    this.rangySelection = rangy.getSelection(this.win)
+    this.syncSelection()
 
     // rangeCount is 0 or 1 in all browsers except firefox
     // firefox can work with multiple ranges