You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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}/
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
The text was updated successfully, but these errors were encountered:
danielcranney
changed the title
Children of canvas element cannot be dragged/moved
Children of parent element cannot be dragged/moved
Aug 28, 2023
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
<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
The text was updated successfully, but these errors were encountered: