From d2ecad448808fab67783fe7fb13a0a9010432a8e Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Mon, 4 Nov 2024 20:43:09 +0100
Subject: [PATCH] =?UTF-8?q?feat(json-crdt-peritext-ui):=20=F0=9F=8E=B8=20r?=
 =?UTF-8?q?emove=20text=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react/InlineView.tsx                      | 21 +++++++------------
 src/json-crdt-peritext-ui/react/TextView.tsx  | 11 ----------
 src/json-crdt-peritext-ui/react/types.ts      |  2 +-
 .../renderers/debug/RenderInline.tsx          |  8 ++++---
 .../renderers/default/RenderInline.tsx        |  4 +++-
 5 files changed, 16 insertions(+), 30 deletions(-)
 delete mode 100644 src/json-crdt-peritext-ui/react/TextView.tsx

diff --git a/src/json-crdt-peritext-ui/react/InlineView.tsx b/src/json-crdt-peritext-ui/react/InlineView.tsx
index 16e9ccf1d7..dbe41f940a 100644
--- a/src/json-crdt-peritext-ui/react/InlineView.tsx
+++ b/src/json-crdt-peritext-ui/react/InlineView.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {put} from 'nano-theme';
 import {CssClass, ElementAttr} from '../constants';
-import {TextView} from './TextView';
 import {usePeritext} from './context';
 import {CaretView} from './selection/CaretView';
 import {FocusView} from './selection/FocusView';
@@ -58,21 +57,15 @@ export const InlineView: React.FC<InlineViewProps> = (props) => {
   const span = ref.current;
   if (span) (span as any)[ElementAttr.InlineOffset] = inline;
 
-  const attributes: React.HTMLAttributes<HTMLSpanElement> = {
-    className: CssClass.Inline,
-  };
-
   let children: React.ReactNode = (
-    <TextView
-      ref={(span: HTMLSpanElement | null) => {
-        ref.current = span as HTMLSpanElement;
-        if (span) (span as any)[ElementAttr.InlineOffset] = inline;
-      }}
-      attr={attributes}
-      text={text}
-    />
+    <span className={CssClass.Inline} ref={(span: HTMLSpanElement | null) => {
+      ref.current = span as HTMLSpanElement;
+      if (span) (span as any)[ElementAttr.InlineOffset] = inline;
+    }}>
+      {text}
+    </span>
   );
-  for (const map of renderers) children = map.inline?.({...props, children, span}) ?? children;
+  for (const map of renderers) children = map.inline?.({...props, children, span: () => ref.current}) ?? children;
 
   if (inline.hasCursor()) {
     const elements: React.ReactNode[] = [];
diff --git a/src/json-crdt-peritext-ui/react/TextView.tsx b/src/json-crdt-peritext-ui/react/TextView.tsx
deleted file mode 100644
index fde1f2aad1..0000000000
--- a/src/json-crdt-peritext-ui/react/TextView.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-export const TextView = React.forwardRef<HTMLSpanElement, {text: string; attr: React.HTMLAttributes<HTMLSpanElement>}>(
-  (props, ref) => {
-    return (
-      <span {...props.attr} ref={ref}>
-        {props.text}
-      </span>
-    );
-  },
-);
diff --git a/src/json-crdt-peritext-ui/react/types.ts b/src/json-crdt-peritext-ui/react/types.ts
index e04215a2e3..047f102f57 100644
--- a/src/json-crdt-peritext-ui/react/types.ts
+++ b/src/json-crdt-peritext-ui/react/types.ts
@@ -22,5 +22,5 @@ export interface RendererMap {
 
 export interface InlineRendererProps extends InlineViewProps {
   children: React.ReactNode;
-  span: HTMLSpanElement | null;
+  span: () => HTMLSpanElement | null;
 }
diff --git a/src/json-crdt-peritext-ui/renderers/debug/RenderInline.tsx b/src/json-crdt-peritext-ui/renderers/debug/RenderInline.tsx
index 27bf090ee7..f9750894c2 100644
--- a/src/json-crdt-peritext-ui/renderers/debug/RenderInline.tsx
+++ b/src/json-crdt-peritext-ui/renderers/debug/RenderInline.tsx
@@ -3,11 +3,13 @@ import * as React from 'react';
 import {useDebugCtx} from './context';
 import type {InlineRendererProps} from '../../react/types';
 
-export const RenderInline: React.FC<InlineRendererProps> = ({span, children}) => {
+export const RenderInline: React.FC<InlineRendererProps> = (props) => {
+  const {children} = props;
   const {enabled} = useDebugCtx();
-
+  
   if (!enabled) return children;
-
+  
+  const span = props.span();
   if (span) {
     const style = span.style;
     style.outline = '1px dotted red';
diff --git a/src/json-crdt-peritext-ui/renderers/default/RenderInline.tsx b/src/json-crdt-peritext-ui/renderers/default/RenderInline.tsx
index 74d55eb7dd..c4c91b0829 100644
--- a/src/json-crdt-peritext-ui/renderers/default/RenderInline.tsx
+++ b/src/json-crdt-peritext-ui/renderers/default/RenderInline.tsx
@@ -5,9 +5,11 @@ import {usePeritext} from '../../react';
 import {useSyncStore} from '../../react/hooks';
 import type {InlineRendererProps} from '../../react/types';
 
-export const RenderInline: React.FC<InlineRendererProps> = ({inline, span, children}) => {
+export const RenderInline: React.FC<InlineRendererProps> = (props) => {
+  const {inline, children} = props;
   const {dom} = usePeritext();
   const focus = useSyncStore(dom.cursor.focus);
+  const span = props.span();
 
   if (span) {
     const attr = inline.attr();