default component for DropZone

[yoshi95]

Hi, I have a need to programmatically populate many DropZones (like 10+) for my CMS integration. But I dont want the user to populate all of the DropZone manually.

I am thinking of some way to provide a default component like

<DropZone name="banner" defaultComponent={'ImageBanner'} />
// or
<DropZone name="banner" defaultComponent={() => <h2>Heading</h2>} />

Wondering if this is possible do this with as plugin, or even extend the current DropZone component.
Maybe it is a feature request, love to open a PR with some guidance as well.

Thank you

[chrisvxd]

Hey @yoshi95! This won't be possible until the slot API as proposed in #255. Will keep this open for tracking.

[yoshi95]

thanks @chrisvxd

slots sounds like a great idea for what we need.

I hacked around and exposed insertComponent using webpack, to similuate drag and dropping of default component programmatically for now. Seems to work well for now except more history, will see what troubles i run into.

will keep and eye out and upgrade to 0.19 when available

[saadshahd]

thanks @chrisvxd

slots sounds like a great idea for what we need.

I hacked around and exposed insertComponent using webpack, to similuate drag and dropping of default component programmatically for now. Seems to work well for now except more history, will see what troubles i run into.

will keep and eye out and upgrade to 0.19 when available

Hey @yoshi95, could you please share the details of your temp solution?

[yoshi95]

@saadshahd i used modify-source-webpack-plugin webpack plugin to modified the imported npm source to expose the internal insertComponent method, which i found is used by DropZone

i updated webpack config to expose the above

{
            test: /@measured\/puck\/dist\/index\.mjs/,
            operations: [
              new ReplaceOperation('once', 'export {', 'export { useAppContext, insertComponent')
            ]
}

now i can programmatically call insertComponent

[saadshahd]

@saadshahd i used modify-source-webpack-plugin webpack plugin to modified the imported npm source to expose the internal insertComponent method, which i found is used by DropZone

i updated webpack config to expose the above

{
            test: /@measured\/puck\/dist\/index\.mjs/,
            operations: [
              new ReplaceOperation('once', 'export {', 'export { useAppContext, insertComponent')
            ]
}

now i can programmatically call insertComponent

Thanks @yoshi95 for the reply. I was wondering when do you call the insertComponent function?

[ojj1123]

@yoshi95 I was wondering if you could share the full workaround or example one.

[chrisvxd]

Hey everyone. A canary is now available for slots, which solve this problem (PR pending merge)

Canary: 0.19.0-canary.896a6279

Docs:

• slot field docs
• DropZones to Slots migration guide
• Updated multi-column layout guide

TLDR usage for default components in a slot:

const config = {
  components: {
    Example: {
      fields: {
        content: {
          type: "slot",
        },
      },
      defaultProps: {
        content: [
          {
            type: "Card",
            props: {
              id: "12345",
              text: "Pre-populated",
            },
          },
        ],
      },
      render: ({ content: Content }) => {
        return <Content />; // Behaves just like a DropZone
      },
    },
  },
};