fallback findPath query to find closest element with a data-key (#2794)

* fallback findPath query to find closest element with a data-key

* lint

* move example to findEventRange query

* lint

examples/images/index.js

@@ -1,4 +1,4 @@
-import { Editor, getEventRange, getEventTransfer } from 'slate-react'
+import { Editor, getEventTransfer } from 'slate-react'
 import { Block, Value } from 'slate'
 
 import React from 'react'
@@ -181,7 +181,7 @@ class Images extends React.Component {
    */
 
   onDropOrPaste = (event, editor, next) => {
-    const target = getEventRange(event, editor)
+    const target = editor.findEventRange(event)
     if (!target && event.type === 'drop') return next()
 
     const transfer = getEventTransfer(event)

packages/slate-react/src/plugins/dom/before.js

@@ -271,7 +271,7 @@ function BeforePlugin() {
     // default, and calling `preventDefault` hides the cursor.
     const node = editor.findNode(event.target)
 
-    if (editor.isVoid(node)) {
+    if (!node || editor.isVoid(node)) {
       event.preventDefault()
     }
 

packages/slate-react/src/plugins/react/queries.js

@@ -181,13 +181,13 @@ function QueriesPlugin() {
           : y - rect.top < rect.top + rect.height - y
 
       const range = document.createRange()
-      const iterable = isPrevious ? 'previousTexts' : 'nextTexts'
       const move = isPrevious ? 'moveToEndOfNode' : 'moveToStartOfNode'
-      const entry = document[iterable](path)
+      const entry = document[isPrevious ? 'getPreviousText' : 'getNextText'](
+        path
+      )
 
       if (entry) {
-        const [n] = entry
-        return range[move](n)
+        return range[move](entry)
       }
 
       return null
@@ -234,13 +234,24 @@ function QueriesPlugin() {
 
   function findPath(editor, element) {
     const content = editor.tmp.contentRef.current
+    let nodeElement = element
 
-    if (element === content.ref.current) {
+    // If element does not have a key, it is likely a string or
+    // mark, return the closest parent Node that can be looked up.
+    if (!nodeElement.hasAttribute(DATA_ATTRS.KEY)) {
+      nodeElement = nodeElement.closest(SELECTORS.KEY)
+    }
+
+    if (!nodeElement || !nodeElement.getAttribute(DATA_ATTRS.KEY)) {
+      return null
+    }
+
+    if (nodeElement === content.ref.current) {
       return PathUtils.create([])
     }
 
     const search = (instance, p) => {
-      if (element === instance) {
+      if (nodeElement === instance) {
         return p
       }
 
@@ -248,7 +259,7 @@ function QueriesPlugin() {
         return null
       }
 
-      if (element === instance.ref.current) {
+      if (nodeElement === instance.ref.current) {
         return p
       }