Copy and Paste Component Across Editor

[theophilhenry]

Description

We need to be able to copy and paste component to a different editor (or different page).

The problem currently, when we design something in a dropzone/button/anything, and I like the style or the layout of it, I can't simply reuse it in another editor. I can... only if the developer implement some kind of "Templating" field to save the current props as template.

With copy and paste, it would make it a lot easier both for users (don't need to save a lot of templates), and for developer (doesn't need to implement some kind of templating feature).

Considerations

Proposals

To accomodate mobile and desktop users, I propose the implementation for this feature with 2 options

1. Keyboard shortcut, with Ctrl+C and Ctrl+V
2. Action Bar. There's new icon in the action bar to do copy, "paste below", and "paste on top" Below is my detailed explanation.

When the user click/focus on a certain component (button, container, text), they can either :

• do ctrl+c on their keyboard, or
• click one action in the action bar to "copy". (So mobile users can also do copy) If the user focus is in the root component, I don't think the user should be able to copy the root data. That is too much.

After that, the user can go to another editor in another page, and do the following :

1. When the user focus is on the root component, and they press press ctrl+v, the pasted element should show up in the most bottom by default.
2. When the user focus is on a certain component inside the targeted editor, and they press ctrl+v, the pasted component should be just below that focused component.
3. We can also have an option for mobile users in the action bar, to do "paste below component" or "paste on top of component", to make it pasteable directly on top or below the current focused component.

[FedericoBonel]

I think this would be a great feature to have. Just a few considerations we should keep in mind:

• We should probably support cutting as well (Ctrl + X / Cmd + X).
• The use of allow and disallow in target slots: someone might copy a component and try to paste it into a slot that doesn't allow it.
• Since you're proposing copy-paste between Puck instances, we should validate the config on paste as well. A user might paste something from an editor with a different config, which could result in an invalid or broken data payload.

[FedericoBonel]

Issue #483, which was closed in favor of this one, also mentioned the option to copy, cut, and paste by right-clicking on components.

[mkilpatrick]

Here's a simple implementation of copy/pasting to/from the clipboard in case it's useful. Note that it's not using item selectors or setData since this linked project hasn't been upgraded to 0.19.x as of this post.