Dropzone not working

[Rkaede]

Hi there,

First off, Puck is an incredible library. It's really well thought out and has a beautiful API. Thank you so much for putting this out into the world. 🙏

I'm having issues using the DropZone component with our in-house component library. Here's an example codesandbox of the setup:

https://codesandbox.io/p/sandbox/4fpn9f?file=%2Fsrc%2FEditor.tsx

We're trying to nest a two levels deep using the DropZone component: ComponentA > ComponentB > ComponentC.

This works great in the sandbox above. However, when we use our in-house "ComponentB" component, we can no longer drop a "ComponentC" onto it.

import { ComponentB } from '@internal/components';

const config = {
  components: {
    ComponentB: {
      fields: {},
      defaultProps: {},
      render: () => {
        return (
          <ComponentB> // if we change this to a div it works fine.
            <DropZone zone="component-b" />
          </ComponentB>
        );
      },
    },
    //... other components
  },
};

Are there any common pitfalls that we need to check for in our ComponentB?

[FedericoBonel]

Hello @Rkaede,

I tried replicating your issue in a local setup, but it worked as expected, just like in the sandbox you provided.

Could you provide more details about the problem? Specifically:

1. After dragging and dropping a ComponentB, are you unable to add a ComponentC inside it?
2. Can you add other components inside ComponentB?
3. Could you share an example of how your in-house ComponentB is implemented?

This will help me better understand and troubleshoot the issue.

[FedericoBonel]

Since there haven’t been any updates, I’ll be closing this issue. Let me know if you’d like it reopened!