Children of parent element cannot be dragged/moved

[danielcranney]

Describe the bug
I am trying to create a custom component (IntroductionBlock) which contains a number of children (text nodes).

The parent container can be styled by the user (updating props.buttonStyle), and the color of the text nodes updates based on this selection (ie when the buttonStyle is dark, the color is light; and when buttonStyle is light, color is dark).

Because of this, I cannot pass the child components in as {children} (because I update the childrens props using linkedNodes["childNode"], and must actually place them inside the component.

This is fine, but it means that the child components cannot be moved/re-ordered within the parent in the way that they can when they are passed in as {children}/

To Reproduce

1. Add a parent element, with 'canvas', like below:
   <Element canvas is={IntroductionBlock} id="introduction-full-block" custom={{ displayName: "Intro Hero" }} componentStyle={"none"} iconStyle={"emoji"} background={rgbaToColorObject(state.theme.colors.light.rgb)} color={rgbaToColorObject(state.theme.colors.dark.rgb)} altColor={rgbaToColorObject(state.theme.colors.accent.rgb)} fillSpace={"no"} height="auto" width="100%" padding={["35", "35", "30", "35"]} flexDirection={"row"} ></Element>

Inside of the IntroductionBlock component, add the child components, like so:
<div ref={(dom) => connect(drag(dom))}> <Element canvas is={Text} as={"h3"} text={"Developer and Designer"} id="subheaderText" componentStyle={componentStyle} /> <Element canvas is={Text} as={"h2"} text={"Daniel Cranney"} id="mainHeader" componentStyle={componentStyle} /> <Element canvas is={Text} as={"p"} text={"I make websites that are beautiful and accessible."} id="bodyText" componentStyle={componentStyle} /> </div>

Expected behavior
I would expect the child components to be draggable, as I believe they are direct children of the parent container, but this does not happen.
Please note: The child components CAN be dragged around when they are passed in as {children}, but cannot then be accessed as linkedNodes.

Your environment

Software	Version(s)
craft.js	0.2.0-beta.12
NextJS	13

[ismajl-ramadani]

Can you post a working code of your case using CodeSandbox or a similar platform?