feat(json-crdt-peritext-ui): 🎸 remove text component

streamich · Nov 4, 2024 · d2ecad4 · d2ecad4
1 parent fdb6e23
commit d2ecad4
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 30 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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();