Improve debug mutations plugin (#2844)

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

@@ -38,7 +38,7 @@ const MUTATION_PROPERTIES = [
  * @param {Object} options
  */
 
-function DebugMutationsPlugin({ editor }) {
+function DebugMutationsPlugin() {
   const observer = new window.MutationObserver(mutations => {
     const array = Array.from(mutations).map(mutationRecord => {
       const object = {}
@@ -48,7 +48,21 @@ function DebugMutationsPlugin({ editor }) {
       MUTATION_PROPERTIES.forEach(key => {
         const value = mutationRecord[key]
         if (value == null) return
-        if (value instanceof window.NodeList && value.length === 0) return
+
+        // Make NodeList easier to read
+        if (value instanceof window.NodeList) {
+          if (value.length === 0) return
+
+          object[key] = Array.from(value)
+            .map(node => {
+              const { outerHTML, innerHTML } = node
+              if (outerHTML == null) return JSON.stringify(node.textContent)
+              return outerHTML.slice(0, outerHTML.indexOf(innerHTML))
+            })
+            .join(', ')
+          return
+        }
+
         object[key] = value
       })
 
@@ -72,10 +86,10 @@ function DebugMutationsPlugin({ editor }) {
    * Start observing the DOM node for mutations if it isn't being observed
    */
 
-  function start() {
+  function start(event, editor, next) {
     const rootEl = editor.findDOMNode([])
 
-    if (rootEl === prevRootEl) return
+    if (rootEl === prevRootEl) return next()
 
     debug('start')
 
@@ -88,17 +102,20 @@ function DebugMutationsPlugin({ editor }) {
     })
 
     prevRootEl = rootEl
+
+    next()
   }
 
   /**
    * Stop observing the DOM node for mutations
    */
 
-  function stop() {
+  function stop(event, editor, next) {
     debug('stop')
 
     observer.disconnect()
     prevRootEl = null
+    next()
   }
 
   return {