BUG: Set root does not work

GrapesJS version

• 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',
  },
});

1. 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

• I agree to follow this project’s Code of Conduct

[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]

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.