feat(json-crdt-peritext-ui): 🎸 add ability to render controller state

streamich · Nov 4, 2024 · b117417 · b117417
1 parent 86713f8
commit b117417
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/src/json-crdt-peritext-ui/dom/CompositionController.ts b/src/json-crdt-peritext-ui/dom/CompositionController.ts
@@ -1,14 +1,15 @@
 import type {PeritextEventTarget} from '../events/PeritextEventTarget';
 import type {UiLifeCycles} from './types';
 import type {Peritext} from '../../json-crdt-extensions/peritext';
+import type {Printable} from 'tree-dump';
 
 export interface CompositionControllerOpts {
   source: HTMLElement;
   txt: Peritext;
   et: PeritextEventTarget;
 }
 
-export class CompositionController implements UiLifeCycles {
+export class CompositionController implements UiLifeCycles, Printable {
   public composing = false;
   public data: string = '';
 
@@ -46,4 +47,10 @@ export class CompositionController implements UiLifeCycles {
     const text = event.data;
     if (text) this.opts.et.insert(text);
   };
+
+  /** ----------------------------------------------------- {@link Printable} */
+
+  public toString(tab?: string): string {
+    return `composition { composing: ${this.composing}, data: ${JSON.stringify(this.data)} }`;
+  }
 }
diff --git a/src/json-crdt-peritext-ui/events/PeritextDomController.ts b/src/json-crdt-peritext-ui/events/PeritextDomController.ts
@@ -1,3 +1,4 @@
+import {printTree, type Printable} from 'tree-dump';
 import {InputController} from '../dom/InputController';
 import {SelectionController} from '../dom/SelectionController';
 import {RichTextController} from '../dom/RichTextController';
@@ -13,7 +14,7 @@ export interface PeritextDomControllerOpts {
   txt: Peritext;
 }
 
-export class PeritextDomController implements UiLifeCycles {
+export class PeritextDomController implements UiLifeCycles, Printable {
   public readonly et: PeritextEventTarget;
   public readonly keys: KeyController;
   public readonly comp: CompositionController;
@@ -50,4 +51,12 @@ export class PeritextDomController implements UiLifeCycles {
     this.selection.stop();
     this.richText.stop();
   }
+
+  /** ----------------------------------------------------- {@link Printable} */
+
+  public toString(tab?: string): string {
+    return 'DOM' + printTree(tab, [
+      (tab) => this.comp.toString(tab),
+    ]);
+  }
 }
diff --git a/src/json-crdt-peritext-ui/renderers/debug/RenderPeritext.tsx b/src/json-crdt-peritext-ui/renderers/debug/RenderPeritext.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {rule} from 'nano-theme';
 import {context} from './context';
 import type {PeritextViewProps} from '../../react';
+import {usePeritext} from '../../react/context';
 
 const blockClass = rule({
   pos: 'relative',
@@ -34,8 +35,11 @@ export interface RenderPeritextProps extends PeritextViewProps {
 }
 
 export const RenderPeritext: React.FC<RenderPeritextProps> = ({enabled: enabledProp = true, peritext, children}) => {
+  const {dom} = usePeritext();
   const [enabled, setEnabled] = React.useState(enabledProp);
 
+  console.log('dom', dom);
+
   return (
     <context.Provider value={{enabled}}>
       <div className={blockClass}>
@@ -46,6 +50,7 @@ export const RenderPeritext: React.FC<RenderPeritextProps> = ({enabled: enabledP
         {enabled && (
           <div className={dumpClass}>
             <pre>{peritext + ''}</pre>
+            {!!dom && <pre>{dom + ''}</pre>}
           </div>
         )}
       </div>