Prevent editing some components

I would like to prevent users from editing the internal components of specific components.

IE lets say I have an element called Drupal-Block

<div data-block>
... html inside ..
</div>

I want to prevent the users from editing the … html inside… bit

[artf]

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?

[artf]

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>
`)