diff --git a/packages/slate-react/src/plugins/debug/debug-mutations.js b/packages/slate-react/src/plugins/debug/debug-mutations.js index 09bbba75b..34ee5673d 100644 --- a/packages/slate-react/src/plugins/debug/debug-mutations.js +++ b/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 {