fix(events): Check event.target.closest() exists before calling

Author: ajwild

examples/events.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react'
 import {PropTypes} from 'prop-types'
 import ReactDOM from 'react-dom'
 import {CSSTransition, TransitionGroup} from 'react-transition-group'
+import {closest} from '../src/util/dom'
 
 class Events extends Component {
   render () {
@@ -97,7 +98,7 @@ function draw () {
 }
 
 function isFromFirstExample (elem) {
-  return !!elem.closest('.paragraph-example')
+  return !!closest(elem, '.paragraph-example')
 }
 
 export default function (editable) {

src/cursor.js

@@ -9,6 +9,7 @@ import error from './util/error'
 import * as rangeSaveRestore from './range-save-restore'
 // import printRange from './util/print_range'
 import NodeIterator from './node-iterator'
+import {closest} from './util/dom'
 
 /**
  * The Cursor module provides a cross-browser abstraction layer for cursor.
@@ -20,8 +21,7 @@ import NodeIterator from './node-iterator'
 export default class Cursor {
 
   static findHost (elem, selector) {
-    if (!elem.closest) elem = elem.parentNode
-    return elem.closest(selector)
+    return closest(elem, selector)
   }
 
   /**

src/dispatcher.js

@@ -4,6 +4,7 @@ import eventable from './eventable'
 import SelectionWatcher from './selection-watcher'
 import config from './config'
 import Keyboard from './keyboard'
+import {closest} from './util/dom'
 
 // This will be set to true once we detect the input event is working.
 // Input event description on MDN:
@@ -30,6 +31,7 @@ export default class Dispatcher {
     this.keyboard = new Keyboard(this.selectionWatcher)
     this.activeListeners = []
     this.setup()
+    this.getEditableBlockByEvent = (evt) => closest(evt.target, editable.editableSelector)
   }
 
   setupDocumentListener (event, func, capture = false) {
@@ -81,10 +83,6 @@ export default class Dispatcher {
     }
   }
 
-  getEditableBlockByEvent (evt) {
-    return evt.target.closest(this.editableSelector)
-  }
-
   /**
   * Sets up events that are triggered on modifying an element.
   *

src/highlight-support.js

@@ -2,11 +2,10 @@ import rangy from 'rangy'
 import * as content from './content'
 import highlightText from './highlight-text'
 import TextHighlighting from './plugins/highlighting/text-highlighting'
-import {createElement} from './util/dom'
+import {closest, createElement} from './util/dom'
 
 function isInHost (elem, host) {
-  if (!elem.closest) elem = elem.parentNode
-  return elem.closest('[data-editable]:not([data-word-id])') === host
+  return closest(elem, '[data-editable]:not([data-word-id])') === host
 }
 
 const highlightSupport = {

src/parser.js

@@ -1,6 +1,7 @@
 import * as string from './util/string'
 import * as nodeType from './node-type'
 import config from './config'
+import {closest} from './util/dom'
 
 /**
  * The parser module provides helper methods to parse html-chunks
@@ -20,8 +21,7 @@ import config from './config'
  */
 export function getHost (node) {
   node = (node.jquery ? node[0] : node)
-  if (!node.closest) node = node.parentNode
-  return node.closest(`.${config.editableClass}`)
+  return closest(node, `.${config.editableClass}`)
 }
 
 /**

src/util/dom.js

@@ -28,3 +28,17 @@ export const createElement = (html, win = window) => {
   el.innerHTML = html
   return el.firstElementChild
 }
+
+/**
+* Get the closest dom element matching a selector
+* @description
+*   - If a textNode is passed, it will still find the correct element
+*   - If a document is passed, it will return undefined
+* @param {Node} elem
+* @param {String} selector
+* @returns {HTMLElement|undefined}
+*/
+export const closest = (elem, selector) => {
+  if (!elem.closest) elem = elem.parentNode
+  if (elem && elem.closest) return elem.closest(selector)
+}