fix(events): sync ranges on focus

Author: lukasbuenger

spec/create-default-event.spec.js

@@ -0,0 +1,90 @@
+import $ from 'jquery'
+import rangy from 'rangy'
+
+import Cursor from '../src/cursor'
+import Editable from '../src/core'
+
+describe('Default Events', () => {
+  let $elem, editable, focus, blur
+
+  // create a Cursor object and set the selection to it
+  function createCursor (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 (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 () {
+    if (onListener) {
+      editable.unload()
+      onListener = undefined
+    }
+  }
+
+  describe('for editable', () => {
+    beforeEach(() => {
+      $elem = $('<div contenteditable="true"></div>')
+      $(document.body).append($elem)
+      editable = new Editable()
+      editable.add($elem)
+      $elem.focus()
+    })
+
+    afterEach(() => {
+      off()
+      editable.dispatcher.off()
+      $elem.remove()
+    })
+
+    describe('on focus', () => {
+      beforeEach(() => {
+        focus = $.Event('focus')
+        blur = $.Event('blur')
+      })
+
+      it('always dispatches with virtual and native ranges in sync.', () => {
+        // <div>foo\</div>
+        $elem.html('foo')
+        createCursor(createRangeAtEnd($elem[0]))
+
+        const onFocus = on('focus', (element, selection) => {
+          if (!selection) return
+          expect(element).toEqual($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)
+        })
+
+        $elem.trigger(focus)
+        $elem.trigger(blur)
+        $elem.trigger(focus)
+        expect(onFocus.calls).toEqual(2)
+      })
+    })
+  })
+})

src/create-default-events.js

@@ -11,8 +11,10 @@ export default function createDefaultEvents (editable) {
      * @event focus
      * @param {HTMLElement} element The element triggering the event.
      */
-    focus (element) {
+    focus (element, selection) {
+      console.log(element, selection)
       behavior.focus(element)
+      behavior.selection(element, selection)
     },
 
     /**
@@ -35,7 +37,10 @@ export default function createDefaultEvents (editable) {
      * @param {String} action The flow action: "start" or "pause".
      */
     flow (element, action) {
-      behavior.flow(element, action)
+      behavior.flow(
+        element,
+        action
+      )
     },
 
     /**

src/dispatcher.js

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