Event for when a component has been added?

[rafark]

Basically, if i add a component that is not a container to the root I want to wrap it inside a container.

How can I trigger a function when a new component has been added?

[rafark]

Ok, I was using < Element is= { Root }> inside my Root component definition instead of using it when adding it as an instance in inside < Frame >. I just changed it to:

export const Root: FC<{children: ReactNode}> = ({children}) => {
    const { connectors: { connect }} = useNode()
    const editor: useEditorReturnType = useEditor()

    //check the children here
    //
    // @ts-ignore
    return <div ref={ref => connect(ref)} className="root my-10 rounded-1 min-h-20 bg-gray-100 mt-10 w-[600px]">
        {children}
    </div>
}

And now the component will re-render as expected when a new child is added.

Now, when swapping a child component, can I use Children.map() or should i use the add(), move() and delete() APIs from this library?

[rafark]

If it helps anyone, I ended up using the id of the Root node using useNode() and the accessing the children using editor.query.node(id).childNodes():

export const Root: FC<{children: ReactNode}> = ({children}) => {
    const { id, connectors: { connect }} = useNode()
    const editor: useEditorReturnType = useEditor()

    useEffect(() => {
        editor.query.node(id).childNodes().forEach((nodeId, index) => {
            const node = editor.query.node(nodeId)
            if (node.get().data.type === Text) {
                //added = true
                const newNode = editor.query.parseFreshNode({
                      data: { type: Element, props: {
                        is: Container,
                        canvas: true
                      } },
                    }).toNode()

                  editor.actions.add(newNode, id, index)
                  editor.actions.move(node.get(), newNode.id, 0)
            }
        })
    // @ts-ignore
    }, [children])
    //
    // @ts-ignore
    return <div ref={ref => connect(ref)} className="root my-10 rounded-1 min-h-20 bg-gray-100 mt-10 w-[600px]">
        {children}
    </div>
}