Prevent editing some components

Yeah, @MichaelKlemersson is right currently you have to set them manually on any element. Another trick would be to update all children via model

const updateAll = model => {
    model.set({editable: false, ...});
    model.get('components').each(model => updateAll(model));
}
updateAll(component);

But what I think would be the best it's some kind of property which propagates (suggestions for a better term are welcome) properties from the parent to its children, eg.

<div data-gjs-editable="false" data-gjs-propagate="['editable', ...]">
     <!-- this will be not editable too and the same for its children -->
     <div>...</div>
     
    <!-- possibility to overwrite and 'break' the chain -->
     <div data-gjs-editable="true" data-gjs-propagate=""></div>
</div>

what do you think?

Yes i think that the propagation idea is great. To be clear the reason im looking for this is im building out a module for Drupal 8 that will allow creating themes via the GrapeJS tool. In Drupal you have elements called Blocks, and my thought was to block of editing of those on the Main editor, and instead have a popup editor to edit them and allow reusing those across various pages.

This is due to how Drupal renders content via PHP and thus I need to convert the html to php variables when storing the template into a twig file.

An example you can use in the demo

1. Select an element (eg. some section)
2. Execute this in console

editor.getSelected().append(`
<div data-gjs-removable="false" data-gjs-draggable="false" data-gjs-propagate='["removable", "draggable"]' style="color:blue">
  <div>Comp01</div>
	<div>
    <div>Comp11</div>
    <div data-gjs-stop="1" data-gjs-removable="true" data-gjs-draggable="true" data-gjs-propagate='["stop"]' style="color:red">
      <div>Comp21</div>
      <div>Comp22</div>
    </div>
    <div>
      <div>Comp31</div>
      <div>Comp32</div>
    </div>
  </div>
  <div>Comp03</div>
</div>
`)