From b1174171ae59ec1021b84356a9ffe8b019b8dbec Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Mon, 4 Nov 2024 12:34:08 +0100
Subject: [PATCH] =?UTF-8?q?feat(json-crdt-peritext-ui):=20=F0=9F=8E=B8=20a?=
 =?UTF-8?q?dd=20ability=20to=20render=20controller=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dom/CompositionController.ts                      |  9 ++++++++-
 .../events/PeritextDomController.ts                   | 11 ++++++++++-
 .../renderers/debug/RenderPeritext.tsx                |  5 +++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/json-crdt-peritext-ui/dom/CompositionController.ts b/src/json-crdt-peritext-ui/dom/CompositionController.ts
index e4bcc9652e..19dcb26aa5 100644
--- a/src/json-crdt-peritext-ui/dom/CompositionController.ts
+++ b/src/json-crdt-peritext-ui/dom/CompositionController.ts
@@ -1,6 +1,7 @@
 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;
@@ -8,7 +9,7 @@ export interface CompositionControllerOpts {
   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
index 3aa7bef220..572ffd2c5f 100644
--- 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
index 410806d831..e7e4b49f78 100644
--- 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>