Fix text shape

packages/core/src/components/shape/editing-text-shape.tsx

@@ -2,28 +2,29 @@ import { useTLContext } from '+hooks'
 import * as React from 'react'
 import type { TLShapeUtil, TLRenderInfo, TLShape } from '+types'
 
-interface EditingShapeProps<T extends TLShape, E extends HTMLElement | SVGElement>
-  extends TLRenderInfo {
-  shape: T
-  utils: TLShapeUtil<T, E>
-}
-
-export function EditingTextShape<T extends TLShape, E extends HTMLElement | SVGElement>({
+export function EditingTextShape<
+  T extends TLShape,
+  E extends SVGElement | HTMLElement,
+  M extends Record<string, unknown>
+>({
   shape,
-  events,
   utils,
   isEditing,
   isBinding,
   isHovered,
   isSelected,
   isCurrentParent,
+  events,
   meta,
-}: EditingShapeProps<T, E>) {
+}: TLRenderInfo<M, E> & {
+  shape: T
+  utils: TLShapeUtil<T, E>
+}) {
   const {
     callbacks: { onTextChange, onTextBlur, onTextFocus, onTextKeyDown, onTextKeyUp },
   } = useTLContext()
 
-  const ref = React.useRef<E>(null)
+  const ref = utils.getRef(shape)
 
   React.useEffect(() => {
     // Firefox fix?
@@ -34,22 +35,19 @@ export function EditingTextShape<T extends TLShape, E extends HTMLElement | SVGE
     }, 0)
   }, [shape.id])
 
-  return utils.render({
-    ref,
-    shape,
-    isEditing,
-    isHovered,
-    isSelected,
-    isCurrentParent,
-    isBinding,
-    events: {
-      ...events,
-      onTextChange,
-      onTextBlur,
-      onTextFocus,
-      onTextKeyDown,
-      onTextKeyUp,
-    },
-    meta,
-  })
+  return (
+    <utils.render
+      ref={ref}
+      {...{
+        shape,
+        isEditing,
+        isHovered,
+        isSelected,
+        isCurrentParent,
+        isBinding,
+        meta,
+        events: { ...events, onTextChange, onTextBlur, onTextFocus, onTextKeyDown, onTextKeyUp },
+      }}
+    />
+  )
 }

packages/core/src/components/shape/shape.tsx

@@ -52,19 +52,19 @@ export const Shape = <
             isEditing={true}
             isHovered={isHovered}
             isSelected={isSelected}
-            utils={utils}
-            meta={meta}
+            utils={utils as any}
+            meta={meta as any}
             events={events}
           />
         ) : (
           <RenderedShape
             shape={shape}
-            utils={utils as any}
             isBinding={isBinding}
             isCurrentParent={isCurrentParent}
             isEditing={isEditing}
             isHovered={isHovered}
             isSelected={isSelected}
+            utils={utils as any}
             meta={meta as any}
             events={events}
           />