Merge pull request #186 from livingdocsIO/fix-switch

Fix switch event

Author: peyerluk

examples/events.js

@@ -183,7 +183,7 @@ export default function (editable) {
       if (!isFromFirstExample(elem)) return
       showEvent({
         name: 'split',
-        content: 'Split this block'
+        content: <span>Split this block</span>
       })
     })
 
@@ -195,7 +195,7 @@ export default function (editable) {
 
       showEvent({
         name: 'merge',
-        content: content
+        content: <span>{content}</span>
       })
     })
 
@@ -207,7 +207,7 @@ export default function (editable) {
 
       showEvent({
         name: 'switch',
-        content: content
+        content: <span>{content}</span>
       })
     })
 

src/cursor.js

@@ -45,6 +45,26 @@ export default class Cursor {
     )
   }
 
+  isAtLastLine () {
+    const range = rangy.createRange()
+    range.selectNodeContents(this.host)
+
+    const hostCoords = range.nativeRange.getBoundingClientRect()
+    const cursorCoords = this.range.nativeRange.getBoundingClientRect()
+
+    return hostCoords.bottom === cursorCoords.bottom
+  }
+
+  isAtFirstLine () {
+    const range = rangy.createRange()
+    range.selectNodeContents(this.host)
+
+    const hostCoords = range.nativeRange.getBoundingClientRect()
+    const cursorCoords = this.range.nativeRange.getBoundingClientRect()
+
+    return hostCoords.top === cursorCoords.top
+  }
+
   isAtBeginning () {
     return parser.isBeginningOfHost(
       this.host,

src/dispatcher.js

@@ -168,16 +168,18 @@ export default class Dispatcher {
 
     const cursor = this.selectionWatcher.getSelection()
     if (!cursor || cursor.isSelection) return
-    // Detect if the browser moved the cursor in the next tick.
-    // If the cursor stays at its position, fire the switch event.
-    setTimeout(() => {
-      var newCursor = this.selectionWatcher.forceCursor()
-      if (newCursor.equals(cursor)) {
-        event.preventDefault()
-        event.stopPropagation()
-        this.notify('switch', element, direction, newCursor)
-      }
-    }, 0)
+
+    if (direction === 'up' && cursor.isAtFirstLine()) {
+      event.preventDefault()
+      event.stopPropagation()
+      this.notify('switch', element, direction, cursor)
+    }
+
+    if (direction === 'down' && cursor.isAtLastLine()) {
+      event.preventDefault()
+      event.stopPropagation()
+      this.notify('switch', element, direction, cursor)
+    }
   }
 
   /**
@@ -205,16 +207,14 @@ export default class Dispatcher {
     const self = this
 
     this.keyboard
-      .on('left up', function (event) {
-        self.dispatchSwitchEvent(event, this, 'before')
+      .on('up', function (event) {
+        self.dispatchSwitchEvent(event, this, 'up')
       })
 
-      .on('right down', function (event) {
-        self.dispatchSwitchEvent(event, this, 'after')
+      .on('down', function (event) {
+        self.dispatchSwitchEvent(event, this, 'down')
       })
 
-      .on('tab shiftTab esc', () => {})
-
       .on('backspace', function (event) {
         const range = self.selectionWatcher.getFreshRange()
         if (!range.isCursor) return self.triggerChangeEvent(this)