Conflict between GrapesJS-generated classes with bootstrap classes

[maynor96]

Hello!

When you add any style to the column component (for example: margins) from the GrapesJS style manager, the necessary styles are generated. However, these styles conflict with bootstrap classes.

You can see the following thread: https://github.com/GrapesJS/grapesjs/issues/391

To solve this, I suggest adding the following code in the "initialize" method inside the GrapesJS object that is defined in the custom.js file:

`const prefix = 'cms-page-';

editor.on('selector:add', selector => {
    const name = selector.get('name');

    if (selector.get('type') === editor.SelectorManager.Selector.TYPE_CLASS &&
        name.indexOf(prefix) !== 0) {
        selector.set('name', prefix + name);
    }

});`

In this way the classes will be generated with the prefix: 'cms-page'. This would be very useful since we could define our own styles for the different visual components in the file: packages/custom-theme/themes/client/html/custom-theme/cms-page.css

What do you think about this approach?

Best regards!

[aimeos]

We've disable the style manager by default because instead allowing to change CSS styles directly, you should implement own components with all CSS classes already applied so editors are not able to break the design.

If you want to enable the style manager for any reason, you have to deal with such issues in your own code.

[maynor96]

Hello!

You are right, also developers should make the admin panel as intuitive as possible for the end customer. And certainly the style manager requires the client to know about css terms and properties like margins, paddings, etc.

I am going to disable the style manager and instead create components and have them styled with settings/traits.

This way I will add styles to the cms-page.css instead of adding the styles generated by grapesjs directly in the html (inline styles).

Regards!