Style Import to Editor using Import Template option in top bar

[SintoDema]

We need an option to update the style of a template using the Import option provided by GrapesJS Editor. Already we have an import template option and it is working in the case of HTML. But while we import a set of style code <style>...</style> it's not properly importing to Editor. I have raised an issue on this, but due to lack of time to fix this issue, I am asked to open a Product Requirement. Not sure whether this is the place to add.

What is the current behavior?
After removing a style from the Import modal, it does not get reflecting in the editor. No issues when we remove the HTML element and importing the code.

What is the expected behavior?
After importing CSS(adding/removing/updating) using the Import option, it should reflect in the editor.

Are you able to attach screenshots, screencasts, or a live demo?
Yes, here is a demo link, and that its the demo link of the GrapesJS itself.
Grapesjs Demo
Video: https://www.awesomescreenshot.com/video/4985996?key=d6919e1431a0774cb65b25330fcb17e3

Describing current issue
While creating a new template using GrapesJS, I came across a scenario that, when we try to import CSS from the import modal it does not get reflected in the editor.

• On a blank editor, I have created a template with HTML & CSS adding to it.
• After that, I need to do some changes in the CSS section, for that, I took the Import option at the top of the editor & scrolled to the style tag at the bottom.
• There I saw the style that causing the issue, I selected that and removed it.
• After that, I clicked the Import button.

Then I checked the template & the style issue was still there. So I again opened the Import modal to confirm that the style is not there & I removed it properly. I saw that the style I removed was still there inside the style tag. I tried to remove that multiple times and import it. It was not removed from the editor. It was there in the import modal once I again open that.

Here is the solution that is currently provided. But not worked for me.
https://github.com/artf/grapesjs-preset-webpage/blob/3e5a9e12998c9a32b6f1199953084163678e6c17/src/commands/openImport.js#:~:text=btnImp.onclick%20%3D%20e,%7D%3B

[artf]

Here is the solution that is currently provided. But not worked for me.

Hey @SintoDema what do you mean "not worked for me"? What change did you make?

[SintoDema]

Hi,

I have tested with the code you provided, but that does not help me.

But I have continued searching on that & just now I got a fix. I put the code as:

editorElement.setComponents(importHTML); editorElement.setStyle(importCSS);

setComponents only help the HTML elements change to reflect in the editor & not making any change in the editor template related to CSS.

All the actions are written in as an extra function on click of "Import" button, is there any inbuild function to avoid use of extra click function?

Now, the code is like:

'gjs-preset-webpage': { modalImportTitle: 'Import Template', modalImportLabel: '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>', modalImportContent: function(editor) { return editor.getHtml() + '<style>'+editor.getCss()+'</style>' }, exportOpts: { btnLabel: __yamlang('Export Landing Page to ZIP'), filenamePfx: $('#user_company_name').val()+' - ', filename: $('[name="page_name"]').val(), },

External click as:

$('body').on('click', '.gjs-btn-import', function() { ... });

[artf]

I have tested with the code you provided, but that does not help me.

I didn't provide any code, I just indicated where is the issue.
Right now I'm not able to propose a workaround on the bugged version, but the correct fix should be this:

btnImp.onclick = e => {
    editor.Css.clear();
    editor.setComponents(viewerEditor.getValue().trim());
    modal.close();
  };

This is why I asked you to create an issue on the plugin repo, I'll fix and release a new version when I'll be available.

[SintoDema]

Sorry. I thought it in the wrong way.
Thank you for the clarification.