BUG: Set root does not work

[henzigo]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Safari 15.0

Reproducible demo link

https://jsfiddle.net/adw6y12f/9/

Describe the bug

Hello, I'm trying to set root component for the editor as it was described here. Unfortunately, this is not working and I can edit all HTML content.

Thanks for your advice or fix that bug :)

How to reproduce the bug?

1. Create HTML with some divs
2. Set id or class to one div that you wants to be root layer
3. Set that id as root element to init method :

   grapesjs.init({
   container: '#gjs',
   fromElement: 1,
   height: '100%',
   storageManager: { type: 0 },
   plugins: ['gjs-blocks-basic'],
   layerManager: {
   root: '#editable',
   },
   });

4. You can edit all elements in editor

What is the expected behavior? All elements will be rendered, but only elements in root element will be editable

What is the current behavior? All elements are editable

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[artf]

Yeah, I see the issue with the root configuration in LayerManager. The temporary fix would be to trigger the root change on render of the layers panel:

editor.on('run:core:open-layers', () => editor.Layers.setRoot('#editable'));

But anyway, the root of the LayerManager doesn't decide if your components are editable or not, its purpose here is only to change the root in the LayerManager UI panel.

If you need to disable parts of your template, this is probably what you're looking for: https://jsfiddle.net/artur_arseniev/w6mvq4bx/

[henzigo]

Thank you for your answer. It would be nice to have some documentation of what is root element because only mentions are in PR/issues.

[artf]

Yeah, the LayerManager module itself has no documentation. Indeed it's on the waiting list for the refactoring and once it's done we can publish more about its usage and API documentation.

Anyway, I've seen your previous message about how you would like to use my demo example but with inverted logic (enabling only what is known). Well, I've tried it but unfortunately, I've spotted some issues I have to fix before. Once the next release is ready, I'll publish the demo example.

[artf]

Sorry @henzigo I forgot to update you: https://jsfiddle.net/artur_arseniev/aku70f5w/ (by using the latest version)

[henzigo]

Hello @artf

I appreciate that you posted demo for me :) It works quite well, but I have two issues with this code:

1. With my HTML page loaded CSS is not exported properly (There is my demo: https://jsfiddle.net/qjur4t3b/11/). Could it be, because of React and inline styles loaded? Is there any way how could I remove those CSS styles?
2. I can still place components on top and bottom of my editable wrapper, but this is something I can live with

[artf]

With my HTML page loaded CSS is not exported properly (There is my demo: https://jsfiddle.net/qjur4t3b/11/). Could it be, because of React and inline styles loaded? Is there any way how could I remove those CSS styles?

Yeah, you have to put those styles in an external file if you want them to be excluded from the export code. You can also try to update getCss() with the new option for the CSS code generator editor.CodeManager.getCode(cmp, 'css', { onlyMatched: true }) to return only matched rules, but it will still show the rule if it's matched.

I can still place components on top and bottom of my editable wrapper, but this is something I can live with

Yeah right, you can actually fix that by adding this to the wrapper:

droppable: false,
propagate: ['highlightable', 'selectable', 'droppable']

[henzigo]

Yeah, you have to put those styles in an external file if you want them to be excluded from the export code. You can also try to update getCss() with the new option for the CSS code generator editor.CodeManager.getCode(cmp, 'css', { onlyMatched: true }) to return only matched rules, but it will still show the rule if it's matched.

This is an unfortunate situation. We are using Styled components that are generating styles dynamically, so there is no chance to move those styles into separate files :(

[artf]

In that case, onlyMatched: true might help you, but consider that you're always able to filter CSS rules before exporting them so you can exclude what is not necessary for your output.