Prevent editing some components

[cmcintosh]

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]

Are you aware already of data-gjs-* attributes?
eg.

<div data-gjs-editable="false" data-gjs-removable="false" ...>
... html inside ..
</div>

[cmcintosh]

hmm, Where in the workflow would I add this. In my case, I am loading the template information via a remote store. Could I add it during that, or can a add it on a editor.init callback.

I tried adding it manually, but was still able to edit the inner elements.

[mklemersson]

this attributes data-gjs-editable="false" data-gjs-removable="false" only works for the current selected element not for their childs, @cmcintosh I also tried put manually but it only works when I set this attributes on every child elements, like this:

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

[cmcintosh]

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.

[Geczy]

+1 on the propagation idea

[mklemersson]

@cmcintosh It's a great idea, I vote for propagates and this will be really helpful using in a trait, so se could toggle this functionality ;)

[artf]

thanks for the feedback guys, I'll put it on the Roadmap

[cmcintosh]

@artf can you expand on the first option on your previous comment,
'''
const updateAll = model => {
model.set({editable: false, ...});
model.get('components').each(model => updateAll(model));
}
updateAll(component);
'''

I am not familiar with what framework your using so am still picking up how its supposed to work (actually dont know what framwork you are using and have been leaning mostly on jquery)

[mklemersson]

He is using backbone js, if I'm not wrong.

[cmcintosh]

Thanks, looks like time for me to learn a new framework ;)

[rip747]

Out of curiosity. What's preventing from looking to see if any parent elements have the "data-gjs-editable" attribute to prevent a the current element from being editable?

[cmcintosh]

nothing, I had thought that would be the ideal path. Not totally sure to implement it yet

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

[cmcintosh]

Thanks, ill look at this tomorrow ;)

[austinbiggs]

@artf - Will there be a propagate html attribute? Like what you detailed below?

<div data-gjs-editable="false" data-gjs-propagate="['editable', ...]">

[Coyote6]

@cmcintosh How far did you get into your Drupal 8 Module as I am working to do the same in Drupal 7? Thanks.

[artf]

@AustinTBiggs is already there
be careful because ['editable', ...] is not a valid JSON (you have to use double quotes for keys), therefore data-gjs-propagate='["editable", ...]'

[cmcintosh]

@Coyote6 I am still working on things for this. Was busy on other things, but am now back at it.

[Coyote6]

@cmcintosh awesome. I completely understand how that goes. I have been updating my repository that I left a link to on your drupal project once I found it. I am looking forward to getting a good solid version working.

[Jakobud]

Sorry this is an old issue, but is it also possible to limit which attributes are editable on any give block or component? I'm having a hard time figuring out if that's possible in the documentation.

[artf]

@Jakobud what attributes are you talking about? By default, you don't edit attributes, indeed one would define a Trait for such a case

[Jakobud]

Maybe my terminology is off here. I guess I mean prevent editing of things like padding, margins, font sizes, etc for any given content block.

The reason I ask is because in many cases perhaps this tool could be used for making content changes on a website for a company that has strict brand guidelines. Things like, "the standard font used is always X size" and "the padding between something is always Y pixels", etc. So having a tool like this would be very nice for non-developers to be able to edit the content on the site, but it might give them too much power. So restricting the editing of specific attributes/trails/? on a per content block basis would be helpful. I think the idea is that your standard brand guideline-specific styles would be defined in your CSS for each content block, and one could use GrapeJS to edit the content (headlines, images, paragraphs, etc) but not change the look/feel of those content blocks.

[artf]

@Jakobud you should define the Style Manager accordingly to your needs and then you can also restrict styleable properties on components via styleable

[Jakobud]

Ah excellent that is what I was looking for. I figured there was a way to do this but couldn't figure it out. Thanks!

[ghost]

did the propagation idea get implemented?

[hiteshgarg1994]

You can extend view of a component and use the onRender function to make child elements unselectable.

  view: defaultType.view.extend({
        onRender() {
          this.model.onAll((innerComponent) => {
            if (!innerComponent.is("image"))
              innerComponent.set({editable: false, hoverable: false, selectable: false, highlightable: false});
          });
        }
      })

[hellocaio]

Yes @redeeze , propagate was implemented, here are all props available.

[pooriamo]

@artf Is there a reference for data-gjs-* attributes? I couldn't find it in the website.

[artf]

@pooriamo data-gjs-* attributes reflect all the component's available properties (pointed above your comment), so if you even create a custom component with its own custom properties, you can use them in data-gjs-*.