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.