Grapesjs: Copy Paste Components

[ssabrewolf]

Hello Grapesjs Team
Ive seen the regular copy paste works as long as is made in the same page, Is it possible implement a a copy paste between 2 different pages with the editor opened

Thanks in advance

[arthuralmeidap]

You can implement this very easily.

There are 2 commands that do this job. You can override them to work as you expect.

Take a look at the CopyComponent command. It copies the selected block to a property called clipboard.

In your case instead of saving everything into a property you will need to save the components into the OS clipboard and them getting them back to paste properly

[ssabrewolf]

Hi thanks for the feedback, unfortunately that approach wont work, before posting i checked the core:copy implementation and its based on storing an object reference on the clipboard, of course this reference only exist on the current page, thats why trying to paste in other page doesnt work despite the clipboard having data, i posted this question in hope there is some kind of core method for serializing component into string along with its css attributes, i found this code to extract a component css but
it return a lot extra css from body and others(like 7000 chars) that could create a css collision with target page
editor.CodeManager.getCode(component, 'css', {cssc: editor.CssComposer});

Regards

[arthuralmeidap]

Well, I know, at least, one workaround for this problem.

You can use the component toHTML method to get the string representation that you need.

For the css, since I don't know a way to get only the css for that component, you could inline the css for your html and it will inline only for that element because you only have the html for that component.

I'm not sure if I was clear enough

[ssabrewolf]

Hi yes, actually i had implemented that way overriding the toHTML method and creating a targeted css directory applied on target page in element scope using the same recursive function with getClassRule method, but wanted to be sure there was not a better option provided by the core, cause depending in the original copied component nested level, the elements gets funky autosize behaviours when the wrapper on the target page varies, e.g when a cell is removed from a row

Regards

[artf]

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)

[japo32]

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.