Added new declarative debugger API

Author: Zaydek Michels-Gualtieri

src/RichTextEditor/RichTextEditor.js

@@ -1,7 +1,7 @@
 import * as Range from "./methods/Range"
 import Debugger from "./components/Debugger"
-import DocumentRenderer from "./components/DocumentRenderer"
 import React from "react"
+import Renderer from "./components/Renderer"
 import useDOMContentLoadedCallback from "lib/x/useDOMContentLoadedCallback"
 import useRichTextEditor from "./useRichTextEditor"
 import { parseRenderedChildren } from "./parsers"
@@ -174,16 +174,25 @@ const RichTextEditor = ({ markup, children }) => {
 
 				data-root
 			>
-				<DocumentRenderer
+				<Renderer
 					forwardedRef={ref}
 					state={state}
 					dispatch={dispatch}
 				/>
 			</article>
 
+			{/* DEBUG */}
 			<Debugger
 				state={state}
 				dispatch={dispatch}
+				// lastActionTimestamp
+				// lastAction
+				// readOnlyModeEnabled
+				// displayMarkdownModeEnabled
+				// focused
+				// elements
+				// range
+				// shouldRerender
 			/>
 
 		</div>

src/RichTextEditor/components/Debugger.js

@@ -1,11 +1,33 @@
 import React from "react"
 
-const Debugger = ({ state, dispatch }) => (
-	<div className="mt-6 whitespace-pre-wrap text-xs font-mono select-none" style={{ MozTabSize: 2, tabSize: 2 }}>
-		{JSON.stringify({
-			...state,
-			// elements: undefined,
-		}, null, "\t")}
+const Debugger = ({
+	state,
+	dispatch,
+	lastActionTimestamp,
+	lastAction,
+	readOnlyModeEnabled,
+	displayMarkdownModeEnabled,
+	focused,
+	elements,
+	range,
+	shouldRerender,
+}) => (
+	<div className="mt-6 whitespace-pre-wrap font-mono text-xs" style={{ MozTabSize: 2, tabSize: 2 }}>
+		{JSON.stringify(
+			{
+				...state,
+				lastActionTimestamp: lastActionTimestamp && state.lastActionTimestamp,
+				lastAction: lastAction && state.lastAction,
+				readOnlyModeEnabled: readOnlyModeEnabled && state.readOnlyModeEnabled,
+				displayMarkdownModeEnabled: displayMarkdownModeEnabled && state.displayMarkdownModeEnabled,
+				focused: focused && state.focused,
+				elements: elements && state.elements,
+				range: range && state.range,
+				shouldRerender: shouldRerender && state.shouldRerender,
+			},
+			null,
+			"\t",
+		)}
 	</div>
 )
 

…extEditor/components/DocumentRenderer.js src/RichTextEditor/components/Renderer.jssrc/RichTextEditor/components/DocumentRenderer.js renamed to src/RichTextEditor/components/Renderer.js src/RichTextEditor/components/DocumentRenderer.js renamed to src/RichTextEditor/components/Renderer.js

@@ -3,7 +3,7 @@ import componentMap from "./componentMap"
 import React from "react"
 import ReactDOM from "react-dom"
 
-const Document = ({ state, dispatch }) => (
+const Elements = ({ state, dispatch }) => (
 	state.elements.map(({ type, key, props }) => (
 		React.createElement(componentMap[type], {
 			key,
@@ -14,7 +14,7 @@ const Document = ({ state, dispatch }) => (
 )
 
 // Rerenders the current state on state.shouldRerender.
-const DocumentRenderer = ({ forwardedRef, state, dispatch }) => {
+const Renderer = ({ forwardedRef, state, dispatch }) => {
 	React.useLayoutEffect(
 		React.useCallback(() => {
 			if (!forwardedRef.current) {
@@ -26,7 +26,7 @@ const DocumentRenderer = ({ forwardedRef, state, dispatch }) => {
 			if (selection.rangeCount) {
 				selection.removeAllRanges()
 			}
-			ReactDOM.render(<Document state={state} dispatch={dispatch} />, forwardedRef.current, () => {
+			ReactDOM.render(<Elements state={state} dispatch={dispatch} />, forwardedRef.current, () => {
 				if (state.readOnlyModeEnabled /* FIXME? */ || !state.focused) {
 					// No-op
 					return
@@ -44,4 +44,4 @@ const DocumentRenderer = ({ forwardedRef, state, dispatch }) => {
 	return null
 }
 
-export default DocumentRenderer
+export default Renderer