Copy/paste styles between components

[havrylenko-olena]

It would be nice to have ability to copy/paste styles between grapesjs components.
Maybe like some additional buttons on Styles panel.

[AntonMelnykAA]

[lexoyo]

I may have missunderstood but isn't css classes what you are looking for?

[havrylenko-olena]

Not exactly. I mean situation when you need to copy/paste some styles between components not related to classes, or maybe some classes have to have some same styles.

[artf]

I'm not sure about adding something new to the core UI but you should be able to implement that functionality relatively simply by using the StyleManager API.

// Using for convenience a simple variable to keep track of copied styles
let copiedStyles = {};
const { StyleManager, Commands } = editor;

Commands.add('copy-styles', () => {
  copiedStyles = StyleManager.getSelected()?.getStyle() || {};
});

Commands.add('paste-styles', () => {
  StyleManager.getSelected()?.addStyle(copiedStyles);
});

Using the Commands API is not mandatory, but that might help to make this functionality more reusable if you decide to place it in a plugin (eg. to use commands editor.runCommand('copy-styles')/editor.runCommand('paste-styles'))

[havrylenko-olena]

Thanks, @artf