fix: text leaf to detect parent correctly (#340)

Author: hkonsti

packages/2d/src/lib/components/Txt.ts

@@ -11,7 +11,7 @@ import {is} from '../utils';
 import type {Node} from './Node';
 import type {ShapeProps} from './Shape';
 import {Shape} from './Shape';
-import {TxtLeaf} from './TxtLeaf';
+import {TXT_TYPE, TxtLeaf} from './TxtLeaf';
 import type {ComponentChildren} from './types';
 
 type TxtChildren = string | Node | (string | Node)[];
@@ -24,6 +24,8 @@ export interface TxtProps extends ShapeProps {
 
 @nodeName('Txt')
 export class Txt extends Shape {
+  public readonly [TXT_TYPE] = true;
+
   /**
    * Create a bold text node.
    *

packages/2d/src/lib/components/TxtLeaf.ts

@@ -15,6 +15,8 @@ export interface TxtLeafProps extends ShapeProps {
   text?: SignalValue<string>;
 }
 
+export const TXT_TYPE = Symbol('Txt');
+
 @nodeName('TxtLeaf')
 export class TxtLeaf extends Shape {
   @lazy(() => {
@@ -43,7 +45,15 @@ export class TxtLeaf extends Shape {
   @computed()
   protected parentTxt() {
     const parent = this.parent();
-    return parent?.constructor.name === 'Txt' ? parent : null;
+    if (!parent) {
+      return null;
+    }
+
+    if (!(TXT_TYPE in parent)) {
+      return null;
+    }
+
+    return parent;
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {

packages/2d/src/lib/jsx-runtime.ts

@@ -21,7 +21,8 @@ function isClassComponent(
   return !!fn.prototype?.isClass;
 }
 
-export const Fragment = Symbol.for('@revideo/2d/fragment');
+export const Fragment: FunctionComponent = ({children}) => children;
+
 export function jsx(
   type: NodeConstructor | FunctionComponent | typeof Fragment,
   config: JSXProps,