how to copy paste component

[SudarshanV1]

<div class="a-container"
     data-sly-resource="${'subscribe' @ resourceType='xyz/components/content/subscribe'}"></div>
<div class="b-container"
     data-sly-resource="${'social' @ resourceType='xyz/components/content/social'}"></div>

i have two components and used as resource in other component.
now the problem is, author want to copy this resources from other place and paste in component.
Since its resource and not parsys, im not able to paste it. how to resolve this?

[giuseppebag]

hi @SudarshanV1, 

you can replace the hardcoded data-sly-resource calls with either a Container/Parsys component (like core/wcm/components/container/v1/container) so authors can freely add/copy/rearrange components.

Use the Core Components Container which creates a proper authoring container where authors can drag, drop, copy, and paste components while maintaining responsive layout capabilities

<!-- Replace your hardcoded resources with containers -->
<div class="a-container">
    <div data-sly-resource="${'subscribe-container' @ resourceType='core/wcm/components/container/v1/container'}"
         data-sly-unwrap="${!wcmmode.edit}"></div>
</div>
<div class="b-container">
    <div data-sly-resource="${'social-container' @ resourceType='core/wcm/components/container/v1/container'}"
         data-sly-unwrap="${!wcmmode.edit}"></div>
</div>

Then you can configure allowed components via template policies to restrict which components authors can add to each container.

[SudarshanV1]

How do i restrict to allow only one particular type of resource to add in container in this case

[Karishma_begumSh]

Hi @SudarshanV1 

• data-sly-resource just renders another resource at runtime.
• It doesn’t create an editable node structure inside your current component.
• Because of that, in the editor, authors don’t see a "real" component instance they can copy/paste – they just see an include.

Use a Parsys

• Instead of hardcoding data-sly-resource, give authors a drop zone (parsys/responsivegrid) inside your component.
• Authors can then drag in subscribe or social (or copy-paste them from another place).

<div class="a-container">
    <div data-sly-resource="${'a' @ resourceType='wcm/foundation/components/responsivegrid'}"></div>
</div>
<div class="b-container">
    <div data-sly-resource="${'b' @ resourceType='wcm/foundation/components/responsivegrid'}"></div>
</div>

or else try below one

Use Component Reference (cq:include / Experience Fragment / Reference Component)

• Instead of hardcoding subscribe/social, you can expose a dialog option to pick a path to an existing component node (reference).
• Then render it like:

<div class="a-container"
     data-sly-resource="${properties.subscribePath @ resourceType='xyz/components/content/subscribe'}"></div>

• Or use cq:include with path reference.
• Authors can then copy/paste the reference node anywhere.
  
  Hope this helpful:)

Regards,

Karishma.

[SudarshanV1]

How do i restrict to allow only one particular type of resource to add in container/Parsys in this case