Padding and background of mj-column cannot be configured / are ignored.

MJML allows to specify padding and background-color for mj-columns but such options are not available in grapesjs-mjml. When importing a template where e.g. a custom padding is set then those are ignored to.

I’ve tried to implement this by myself but I’m kind of confused since there’s a global attribute to set the padding of columns and the mj-section component has a custom render function.

---

Compare e.g the following mjml in mjml.io/try-it-live and grapes-mjml

<mjml>
  <mj-body>
    <mj-section>
      <mj-column background-color="red" padding="100px">
        <mj-text font-size="20px">Hello World</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

[mumumilk]

@m-e-conroy

I had the same problem with padding being reseted to defaults (changes persisted on canvas but not on style manager).

padding was beign reseted because the padding property was being added with detached: true in https://github.com/artf/grapesjs-mjml/blob/df40b0c980cf65fe03d6d89b159213167d443635/src/style.js#L22

so what i did was to “override” the padding style property with my own parameters:

editor.on('load', () => {
        editor.StyleManager.removeProperty('dimension', 'padding');
        editor.StyleManager.addProperty('dimension', {
          property: 'padding',
          type: 'composite',
          properties: [
            { name: 'Top', property: 'padding-top', type: 'integer', units: ['px', '%', 'em'] },
            { name: 'Right', property: 'padding-right', type: 'integer', units: ['px', '%', 'em'] },
            { name: 'Bottom', property: 'padding-bottom', type: 'integer', units: ['px', '%', 'em'] },
            { name: 'Left', property: 'padding-left', type: 'integer', units: ['px', '%', 'em'] },
          ],
        });
})

another solution as well is to prevent style manager reset by setting resetStyleManager: false in mjml pluginOpts (keep in mind that you’ll have to provide your own property and sectors config)

pluginsOpts = {
  ['grapesjs-mjml']: {
    resetStyleManager: false,
  },
},

hope this helps anyone with the same problem

[ronaldohoch]

Hello again. Guys, find other bug, here is the solution:

            renderStyle() {
                const model_style = this.model.get('style') || {}
                const stylable = this.model.attributes.stylable;
                const style = Object.keys(model_style).filter(attr=>stylable.indexOf(attr)>0).map(attr => `${attr}:${model_style[attr]};`);
                this.el.setAttribute('style', `${this.attributes.style} ${style.join(' ')} ${this.el.getAttribute('style')}`);              
            },

What is the problem i find? Any other attribute, like css-class and id are turning into style. Part of that issue i describe there: https://github.com/artf/grapesjs/discussions/4022

So, i update the style variable line from this: const style = Object.keys(this.model.get('style')).map(attr => ${attr}😒{model_style[attr]};) into this:

   const stylable = this.model.attributes.stylable;
   const style = Object.keys(model_style).filter(attr=>stylable.indexOf(attr)>0).map(attr => `${attr}:${model_style[attr]};`);

Explanation: Here i’m using the property stylable from the component’s model to filter what will turn into style.