Normalize target node in debug mutations (#2845)

* Normalize target node in debug mutations

* Added comments and fixed linting

packages/slate-react/src/plugins/debug/debug-mutations.js

@@ -26,6 +26,24 @@ const MUTATION_PROPERTIES = [
   'previousSibling',
 ]
 
+/**
+ * Takes a DOM node and returns an easily readable version of it.
+ *
+ * @param {DOMNode} node
+ */
+
+function normalizeNode(node) {
+  if (node.nodeType === window.Node.TEXT_NODE) {
+    return node.textContent
+  } else if (node.nodeType === window.Node.ELEMENT_NODE) {
+    const { outerHTML, innerHTML } = node
+    if (outerHTML == null) return JSON.stringify(node.textContent)
+    return outerHTML.slice(0, outerHTML.indexOf(innerHTML))
+  } else {
+    return `Node(type=${node.nodeType}`
+  }
+}
+
 /**
  * A plugin that sends short easy to digest debug info about each dom mutation
  * to browser.
@@ -46,7 +64,7 @@ function DebugMutationsPlugin() {
       // Only add properties that provide meaningful values to the object
       // to make the debug info easier to read
       MUTATION_PROPERTIES.forEach(key => {
-        const value = mutationRecord[key]
+        let value = mutationRecord[key]
         if (value == null) return
 
         // Make NodeList easier to read
@@ -54,15 +72,16 @@ function DebugMutationsPlugin() {
           if (value.length === 0) return
 
           object[key] = Array.from(value)
-            .map(node => {
+            .map(normalizeNode)
-              const { outerHTML, innerHTML } = node
-              if (outerHTML == null) return JSON.stringify(node.textContent)
-              return outerHTML.slice(0, outerHTML.indexOf(innerHTML))
-            })
             .join(', ')
           return
         }
 
+        // Make Node easier to read
+        if (value instanceof window.Node) {
+          value = normalizeNode(value)
+        }
+
         object[key] = value
       })