Add debug view to Playground (#53)

Add debug view to Playground

Author: msakrejda

playground/src/Editor.tsx

@@ -58,6 +58,7 @@ export type EditorProps = {
   handle: DocHandle<unknown>
   path: Prop[]
   schemaAdapter: SchemaAdapter
+  onStateChange?: (state: EditorState) => void
 }
 
 const toggleBold = (schema: Schema) => toggleMarkCommand(schema.marks.strong)
@@ -97,8 +98,14 @@ function turnSelectionIntoBlockquote(
   return true
 }
 
-export function Editor({ handle, path, schemaAdapter }: EditorProps) {
+export function Editor({
+  handle,
+  path,
+  schemaAdapter,
+  onStateChange,
+}: EditorProps) {
   const editorRoot = useRef<HTMLDivElement>(null)
+  const onChange = useRef(onStateChange)
   const [view, setView] = useState<EditorView | null>(null)
   const [imageModalOpen, setImageModalOpen] = useState(false)
   const [linkModalOpen, setLinkModalOpen] = useState(false)
@@ -140,6 +147,7 @@ export function Editor({ handle, path, schemaAdapter }: EditorProps) {
       dispatchTransaction(this: EditorView, tr: Transaction) {
         const newState = this.state.apply(tr)
         this.updateState(newState)
+        onChange.current?.(newState)
         setMarkState(activeMarks(newState, schema))
       },
     })

playground/src/Playground.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useState } from "react"
 import { Editor } from "./Editor"
-import { Repo, DocHandle } from "@automerge/automerge-repo"
+import {
+  Repo,
+  DocHandle,
+  DocHandleChangePayload,
+} from "@automerge/automerge-repo"
 //import { MessageChannelNetworkAdapter } from "@automerge/automerge-repo-network-messagechannel"
 import { PausableNetworkAdapter } from "./PausableNetworkAdapter"
 import TabContainer from "./Tabs"
@@ -13,6 +17,7 @@ import {
 import { Mark, Node } from "prosemirror-model"
 import { BlockMarker } from "../../src/types"
 import * as Automerge from "@automerge/automerge"
+import { EditorState } from "prosemirror-state"
 
 // @ts-expect-error this is for debug
 window.A = Automerge
@@ -66,6 +71,7 @@ function Playground({ demoMode }: Props) {
       leftHandle={leftHandle}
       rightHandle={rightHandle}
       showTitle={!demoMode}
+      showDebug={!demoMode}
     />
   )
 
@@ -85,6 +91,7 @@ function Playground({ demoMode }: Props) {
             leftHandle={leftHandle}
             rightHandle={rightHandle}
             showTitle={true}
+            showDebug={true}
           />
         ),
       },
@@ -112,60 +119,135 @@ type TabProps = {
   leftHandle: DocHandle<{ text: string }>
   rightHandle: DocHandle<{ text: string }>
   showTitle: boolean
+  showDebug: boolean
 }
 
-function SameSchema({ leftHandle, rightHandle, showTitle }: TabProps) {
+function SameSchema({
+  leftHandle,
+  rightHandle,
+  showTitle,
+  showDebug,
+}: TabProps) {
   return (
     <div>
       {showTitle && <h2>Same Schema</h2>}
       <div id="editors">
         <div className="editor">
-          <Editor
+          <DebugEditor
             name="left"
             handle={leftHandle}
             path={["text"]}
             schemaAdapter={basicSchemaAdapter}
+            debug={showDebug}
           />
         </div>
         <div className="editor">
-          <Editor
+          <DebugEditor
             name="right"
             handle={rightHandle}
             path={["text"]}
             schemaAdapter={basicSchemaAdapter}
+            debug={showDebug}
           />
         </div>
       </div>
     </div>
   )
 }
 
-function DifferentSchema({ leftHandle, rightHandle, showTitle }: TabProps) {
+function DifferentSchema({
+  leftHandle,
+  rightHandle,
+  showTitle,
+  showDebug,
+}: TabProps) {
   return (
     <div>
       {showTitle && <h2>Different Schema</h2>}
       <div id="editors">
         <div className="editor">
-          <Editor
+          <DebugEditor
             name="left"
             handle={leftHandle}
             path={["text"]}
             schemaAdapter={paragraphAndHeadingSchemaAdapter}
+            debug={showDebug}
           />
         </div>
         <div className="editor">
-          <Editor
+          <DebugEditor
             name="right"
             handle={rightHandle}
             path={["text"]}
             schemaAdapter={paragraphAndListItemsSchemaAdapter}
+            debug={showDebug}
           />
         </div>
       </div>
     </div>
   )
 }
 
+function DebugEditor({
+  name,
+  handle,
+  path,
+  schemaAdapter,
+  debug,
+}: {
+  name?: string
+  handle: DocHandle<unknown>
+  path: Automerge.Prop[]
+  schemaAdapter: SchemaAdapter
+  debug?: boolean
+}) {
+  const [spans, setSpans] = useState(Automerge.spans(handle.doc(), path))
+  useEffect(() => {
+    if (!debug) {
+      return
+    }
+    function listener(payload: DocHandleChangePayload<unknown>) {
+      setSpans(Automerge.spans(payload.doc, ["text"]))
+    }
+    handle.on("change", listener)
+
+    return () => {
+      handle.off("change", listener)
+    }
+  }, [debug, handle])
+
+  const [editorState, setEditorState] = useState<EditorState | undefined>(
+    undefined,
+  )
+  function handleEditorStateChange(state: EditorState) {
+    setEditorState(state)
+  }
+
+  return (
+    <div>
+      <Editor
+        name={name}
+        handle={handle}
+        path={path}
+        schemaAdapter={schemaAdapter}
+        onStateChange={handleEditorStateChange}
+      />
+      {debug && (
+        <div style={{ display: "flex" }}>
+          <div>
+            <span>ProseMirror state</span>
+            <pre>{JSON.stringify(editorState?.toJSON(), null, 2)}</pre>
+          </div>
+          <div>
+            <span>Automerge state</span>
+            <pre>{JSON.stringify(spans, null, 2)}</pre>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
 const paragraphAndHeadingSchemaAdapter = new SchemaAdapter({
   nodes: {
     doc: {