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?