Extract or save the code of the component partially

[HonTung]

Hello Grapesjs Team!

I feel so great when found GrapesJS, and now I am still in a exploring stage.

Just wondering, is there any hook or function that I could extract and save the code of the component or export from Layer Manager? So I can make them storing into block manager library/database and reusable when editing new template.

Thanks 😊

[ronaldohoch]

Hello, you can use this to save the json of selected component:
JSON.stringify(editor.getSelected())

But i don't know how to get the style from selected component and their children..

[ronaldohoch]

Maybe with this you can get the styles: https://grapesjs.com/docs/api/css_composer.html#getrules

[HonTung]

Thanks @ronaldohoch for the hint.

I have created simple grapesjs command script that works

editor.Commands.add('save-component',{
       run: function(editor){
       const component = editor.getSelected();
       const componentMJML = `${editor.getHtml({ component })}`;
       console.log( componentMJML );
   }
});

Hope one day I could build one plugin function for saving the component.

[ronaldohoch]

niice!
Didn't know this works too, thank you!