Copy Paste Components

This is our implementation of using localStorage in case someone needs the solution.

      function newCopy(selected) {
        window.localStorage.setItem('grapesjs_clipboard', JSON.stringify(selected));
      }
      function newPaste(selected) {
        var components = JSON.parse(window.localStorage.getItem('grapesjs_clipboard'));

        if (components) {
          if (selected && selected.attributes.type !== 'wrapper') {
            var index = selected.index();
            // Invert the order so last item gets added first and gets pushed down as others get added.
            components.reverse();
            var currentSelection = selected.collection;
            components.forEach(comp => {
              // TODO: Add check for validity of paste.
              var added = currentSelection.add(comp, {at: index + 1});
              editor.trigger('component:paste', added);
            });
            selected.emitUpdate();
          } else {
            // No components are selected so just insert at the end.
            editor.addComponents(components);
          }
        }
      }

      const commands = editor.Commands;
      commands.add('core:copy', editor => {
        const selected = [...editor.getSelectedAll()];
        //Filter out components that are not copyable.
        var filteredSelected = selected.filter(item => item.attributes.copyable == true);
        if (filteredSelected.length) {
          newCopy(filteredSelected);
        }
      });
      commands.add('core:paste', editor => {
        const selected = editor.getSelected();
        newPaste(selected);
      });

Clipboard API would have been a great cross browser solution but it's not yet widely used.

I didn't try it, I just read the code

You don't trigger the paste event when pasting in the body

Also the css is added in a style tag after each paste... There must be a better way to handle the styles, I'll take a look soon

Is it possible implement a a copy paste between 2 different pages with the editor opened

Well, if for 2 different pages you mean 2 different tabs, I don't think so. Obviously, you're dealing with different editor instances so you have to find your way to make them talk with each other (eg. localStorage if you're on the same domain)