feat(editable): add cursor finding and positioning

Author: gabrielhase

spec/api.spec.js

@@ -123,5 +123,79 @@ describe('Editable', function () {
         cursor.triggerChange()
       })
     })
+
+    describe('findClosestCursorOffset:', function () {
+    /*
+Cursor1:                     | (left: 130)
+Comp 1:   Cristiano Ronaldo wurde 2018 mit grossem Tamtam nach Turin geholt.
+Comp 2:   Der Spieler blieb bei fünf Champions-League-Titeln stehen.
+Cursor 2:                    | (offset: 19 chars)
+    */
+      it('finds the index in a text node', function () {
+        $div.html('Der Spieler blieb bei fünf Champions-League-Titeln stehen.')
+        const {wasFound, offset} = editable.findClosestCursorOffset({
+          element: $div[0],
+          origCoordinates: {top: 0, left: 130}
+        })
+        expect(wasFound).toEqual(true)
+        expect(offset).toEqual(19)
+      })
+
+      /*
+Cursor1:                      | (left: 130)
+Comp 1:   Cristiano Ronaldo wurde 2018 mit grossem Tamtam nach Turin geholt.
+Comp 2:   <p>Der <em>Spieler</em> blieb bei fünf <span>Champions-League-Titeln</span> stehen.</p>
+Cursor 2:                                   |
+    */
+      it('finds the index in a nested html tag structure', function () {
+        $div.html('<p>Der <em>Spieler</em> blieb bei fünf <span>Champions-League-Titeln</span> stehen.</p>')
+        const {wasFound, offset} = editable.findClosestCursorOffset({
+          element: $div[0],
+          origCoordinates: {top: 0, left: 130}
+        })
+        console.log('offset', offset)
+        expect(wasFound).toEqual(true)
+        expect(offset).toEqual(19)
+      })
+
+      it('returns not found for empty nodes', function () {
+        $div.html('')
+        const {wasFound} = editable.findClosestCursorOffset({
+          element: $div[0],
+          origCoordinates: {top: 0, left: 130}
+        })
+        expect(wasFound).toEqual(false)
+      })
+
+      /*
+Cursor1:                                                   |
+Comp 1:   Cristiano Ronaldo wurde 2018 mit grossem Tamtam nach Turin geholt.
+Comp 2:   Foo
+Cursor 2: not found
+    */
+      it('returns not found for coordinates that are out of the text area', function () {
+        $div.html('Foo')
+        const {wasFound} = editable.findClosestCursorOffset({
+          element: $div[0],
+          origCoordinates: {top: 0, left: 130}
+        })
+        expect(wasFound).toEqual(false)
+      })
+
+      /*
+        Note: for performance reasons this algorithm will not work on huge paragraphs.
+        In a news case such a huge paragraph is very rare though.
+      */
+      it('stops after 30 binary search iterations', function () {
+        $div.html(`
+          Cristiano Ronaldo wurde 2018 mit grossem Tamtam nach Turin geholt. Mit ihm sollte Juventus – wie lange ersehnt – die Champions League gewinnen. Ronaldo, unter Druck geraten durch die Ermittlungen der spanischen Steuerfahnder und eine Vergewaltigungsanklage, hatte selbst Interesse an einem neuen, störungsfreien Betätigungsfeld und daran, mit einem dritten Klub die Champions-League-Trophäe zu erobern. Doch das ging nicht in Erfüllung. Cristiano Ronaldo wurde 2018 mit grossem Tamtam nach Turin geholt. Mit ihm sollte Juventus – wie lange ersehnt – die Champions League gewinnen. Ronaldo, unter Druck geraten durch die Ermittlungen der spanischen Steuerfahnder und eine Vergewaltigungsanklage, hatte selbst Interesse an einem neuen, störungsfreien Betätigungsfeld und daran, mit einem dritten Klub die Champions-League-Trophäe zu erobern. Doch das ging nicht in Erfüllung. Cristiano Ronaldo wurde 2018 mit grossem Tamtam nach Turin geholt. Mit ihm sollte Juventus – wie lange ersehnt – die Champions League gewinnen. Ronaldo, unter Druck geraten durch die Ermittlungen der spanischen Steuerfahnder und eine Vergewaltigungsanklage, hatte selbst Interesse an einem neuen, störungsfreien Betätigungsfeld und daran, mit einem dritten Klub die Champions-League-Trophäe zu erobern. Doch das ging nicht in Erfüllung. Cristiano Ronaldo wurde 2018 mit grossem Tamtam nach Turin geholt. Mit ihm sollte Juventus – wie lange ersehnt – die Champions League gewinnen. Ronaldo, unter Druck geraten durch die Ermittlungen der spanischen Steuerfahnder und eine Vergewaltigungsanklage, hatte selbst Interesse an einem neuen, störungsfreien Betätigungsfeld und daran, mit einem dritten Klub die Champions-League-Trophäe zu erobern. Doch das ging nicht in Erfüllung. Cristiano Ronaldo wurde 2018 mit grossem Tamtam nach Turin geholt. Mit ihm sollte Juventus – wie lange ersehnt – die Champions League gewinnen. Ronaldo, unter Druck geraten durch die Ermittlungen der spanischen Steuerfahnder und eine Vergewaltigungsanklage, hatte selbst Interesse an einem neuen, störungsfreien Betätigungsfeld und daran, mit einem dritten Klub die Champions-League-Trophäe zu erobern. Doch das ging nicht in Erfüllung. Cristiano Ronaldo wurde 2018 mit grossem Tamtam nach Turin geholt. Mit ihm sollte Juventus – wie lange ersehnt – die Champions League gewinnen. Ronaldo, unter Druck geraten durch die Ermittlungen der spanischen Steuerfahnder und eine Vergewaltigungsanklage, hatte selbst Interesse an einem neuen, störungsfreien Betätigungsfeld und daran, mit einem dritten Klub die Champions-League-Trophäe zu erobern. Doch das ging nicht in Erfüllung.
+        `)
+        const {wasFound} = editable.findClosestCursorOffset({
+          element: $div[0],
+          origCoordinates: {top: 0, left: 530}
+        })
+        expect(wasFound).toEqual(false)
+      })
+    })
   })
 })

src/core.js

@@ -12,6 +12,7 @@ import highlightSupport from './highlight-support'
 import Highlighting from './highlighting'
 import createDefaultEvents from './create-default-events'
 import browser from 'bowser'
+import {getTotalCharCount, textNodesUnder, getTextNodeAndRelativeOffset} from './util/element'
 
 /**
  * The Core module provides the Editable class that defines the Editable.JS
@@ -221,11 +222,23 @@ export default class Editable {
     return rangy.createRange()
   }
 
-  createCursor (element, range) {
+  createCursorWithRange ({element, range}) {
     const $host = $(element).closest(this.editableSelector)
     return new Cursor($host[0], range)
   }
 
+  createCursorAtCharacterOffset ({element, offset}) {
+    const textNodes = textNodesUnder(element)
+    const {node, relativeOffset} = getTextNodeAndRelativeOffset({textNodes, absOffset: offset})
+    const newRange = this.createRangyRange()
+    newRange.setStart(node, relativeOffset)
+    newRange.setEnd(node, relativeOffset)
+    newRange.collapse()
+    const nextCursor = this.createCursorWithRange({element, range: newRange})
+    nextCursor.setVisibleSelection()
+    return nextCursor
+  }
+
   createCursorAtBeginning (element) {
     return this.createCursor(element, 'beginning')
   }
@@ -455,6 +468,58 @@ export default class Editable {
     this.dispatcher.unload()
     return this
   }
+
+  findClosestCursorOffset (
+    {element, origCoordinates, requiredOnFirstLine = false, requiredOnLastLine = false}) {
+    const totalCharCount = getTotalCharCount(element)
+    if (totalCharCount === 0) return {wasFound: false}
+    let start = Math.floor(totalCharCount / 2)
+    let rightLimit = totalCharCount
+    let leftLimit = 0
+    const history = []
+    let found = false
+    const bluriness = 5
+    const goLeft = () => {
+      rightLimit = start
+      start = Math.floor((start - leftLimit) / 2)
+    }
+    const goRight = () => {
+      leftLimit = start
+      start = start + Math.floor((rightLimit - start) / 2)
+    }
+    const convergedOnWrong = () => {
+      const lastTwo = history.slice(-2)
+      if (lastTwo.length === 2 && lastTwo[0] === lastTwo[1]) return true
+      return false
+    }
+    // limit binary search depth to 30 partitions for performance
+    for (let i = 0; i < 30; i++) {
+      history.push(start)
+      if (convergedOnWrong()) break
+      const cursor = this.createCursorAtCharacterOffset({element, offset: start})
+      // up / down axis
+      if (requiredOnFirstLine && !cursor.isAtFirstLine()) {
+        goLeft()
+        continue
+      } else if (requiredOnLastLine && !cursor.isAtLastLine()) {
+        goRight()
+        continue
+      }
+      const coordinates = cursor.getCoordinates()
+      const distance = Math.abs(coordinates.left - origCoordinates.left)
+      if (distance <= bluriness) {
+        found = true
+        break
+      }
+      // left / right axis
+      if (coordinates.left < origCoordinates.left) {
+        goRight()
+      } else {
+        goLeft()
+      }
+    }
+    return {wasFound: found, offset: start}
+  }
 }
 
 // Expose modules and editable

src/dispatcher.js

@@ -168,7 +168,7 @@ export default class Dispatcher {
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
     const cursor = this.selectionWatcher.getSelection()
     if (!cursor || cursor.isSelection) return
-    
+
     const totalCharCount = getTotalCharCount(element)
     if (direction === 'up' && (cursor.isAtFirstLine() || totalCharCount === 0)) {
       event.preventDefault()

src/util/element.js

@@ -2,19 +2,37 @@
 function textNodesUnder (node) {
   let all = []
   for (node = node.firstChild; node; node = node.nextSibling) {
-      if (node.nodeType === 3) {
+    if (node.nodeType === 3) {
       all.push(node)
-      } else {
+    } else {
       all = all.concat(textNodesUnder(node))
-      }
+    }
   }
   return all
 }
 
+// NOTE: if there is only one text node, then just that node and
+// the abs offset are returned
+function getTextNodeAndRelativeOffset ({textNodes, absOffset}) {
+  let cumulativeOffset = 0
+  let relativeOffset = 0
+  let targetNode
+  for (let i = 0; i < textNodes.length; i++) {
+    const node = textNodes[i]
+    if (absOffset <= cumulativeOffset + node.textContent.length) {
+      targetNode = node
+      relativeOffset = absOffset - cumulativeOffset
+      break
+    }
+    cumulativeOffset += node.textContent.length
+  }
+  return {node: targetNode, relativeOffset}
+}
+
 function getTotalCharCount (element) {
   const textNodes = textNodesUnder(element)
   const reducer = (acc, node) => acc + node.textContent.length
   return textNodes.reduce(reducer, 0)
 }
 
-module.exports = {getTotalCharCount}
+module.exports = {getTotalCharCount, textNodesUnder, getTextNodeAndRelativeOffset}