Node with other nodes as children

[xylish7]

I'm trying to create a node which contains other nodes. In my case, I want to have a node called Testimonials which renders Testimonial nodes. However it looks like the parent node it not movable and also if I press on the up arrow, it fails to navigate to the root node.

2024-06-28.21-15-12.mp4

These are the nodes I'm using:

• Container.tsx

export function Container({
  align,
  children,
  direction,
  gap,
  justify,
  margin,
  maxWidth,
}: ContainerProps) {
  const {
    connectors: { connect, drag },
  } = useNode();

  return (
    <div
      className={clsx({ "empty-canvas": !children })}
      style={{
        alignItems: align,
        display: "flex",
        flexDirection: direction,
        flexWrap: "wrap",
        gap: `${gap}rem`,
        justifyContent: justify,
        margin: margin === "none" ? undefined : "auto",
        maxWidth: maxWidth === "100%" ? undefined : `${maxWidth}rem`,
      }}
      ref={(ref) => {
        ref && connect(drag(ref));
      }}
    >
      {children}
    </div>
  );
}

• Testimonials.tsx

export function Testimonial({
  avatar,
  color = "primary",
  icon = "Globe",
  link = "#",
  name = "John Doe",
  role = "CEO",
  text = "I really love this product, it's so amazing!",
}: TestimonialProps) {
  const {
    connectors: { connect, drag },
  } = useNode();

  return (
    <div
      ref={(ref) => {
        ref && connect(drag(ref));
      }}
    >
      <figure>
        <svg
          className={clsx("h-9 md:h-12 mx-auto mb-3", getTextColor(color))}
          viewBox="0 0 24 27"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
            fill="currentColor"
          />
        </svg>
        <blockquote>
          <p className="text-center text-xl text-default-600">{text}</p>
        </blockquote>
        <figcaption className="flex items-center justify-center mt-6 space-x-3">
          <Avatar
            className="shrink-0"
            color={color}
            isBordered
            src={avatar}
            alt=""
          />

          <div className="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700">
            <div className="pr-3 text-lg text-default-600">{name}</div>
            <div className="pl-3 text-md font-light text-gray-500 dark:text-gray-400 text-start flex">
              <Link
                className={clsx("mr-2")}
                href={link}
                color="warning"
                isExternal
                aria-label=""
              >
                <Icon color={color} name={icon} hasRef={false} />
              </Link>
              {role}
            </div>
          </div>
        </figcaption>
      </figure>
    </div>
  );
}

• Testimonials.tsx

export const Testimonials = (props: ContainerProps) => {
  return (
    <Element is={Container} id="testimonial" canvas {...props}>
      <Testimonial {...defaultTestimonialProps} />
      <Testimonial {...defaultTestimonialProps} />
      <Testimonial {...defaultTestimonialProps} />
    </Element>
  );
};

Testimonials.craft = {
  ...Container.craft,
  custom: {
    displayName: "Testimonials",
  },
};

I've also seen that in the provided examples, I'm not able to move or delete the node which wraps around button. I would like that the r8 container would behave like a normal node which can be deleted or dragged. Is this a limitation or I lack the knowledge of doing it?

Thank you!

[xylish7]

To be more specific, I would like the buttons to be direct children of Custom1 node instead of r8 node, so that I can customize the padding, margins and so on.