BUG: Javascript error when I want to add padding

I've been running into the same issue and also using the grapesjs-mjml plugin. Apparently it only occurs when a project is loaded which has the style property present on the attributes of a component when the project is loaded. After each change made within the editor, the style property will be extended with the old value append with the most recent value, exponentially growing the project JSON.

I tried going trough different versions of grapesjs, starting with version 0.22.2 working upwards. When getting to version 0.22.6 the issue started to occur, so somewhere between release 0.22.5 and 0.22.6 the bug must have been introduced. In all prior versions everything works as expected.

To reproduce the issue, simply to the following:

1. Create a new project and add some components
2. Generate the project JSON by calling editor.getProjectData()
3. Load the project into the editor by calling editor.loadProjectData()
4. With or without modification to one or more components, generate the project data again using editor.getProjectData()

After executing step 4, the project JSON ends up with the incorrect attributes. This in turn can cause the issue mentioned by OP.

Please check the below snippet which was generated after loading a project JSON and retrieving the project data immediately without making any modifications whatsoever.

"components": [
    {
      "tagName": "mj-image",
      "type": "mj-image",
      "style": {
        "src": "resources/c-exp/C8D02998273D07256CCA/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg",
        "padding-top": "10px",
        "padding-bottom": "10px",
        "padding-right": "25px",
        "padding-left": "25px",
        "align": "center",
        "width": "250px",
        "style": "src:resources/c-exp/C8D02998273D07256CCA/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;align:center;width:250px;"
      },
      "attributes": {
        "src": "resources/c-exp/C8D02998273D07256CCA/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg",
        "padding-top": "10px",
        "padding-bottom": "10px",
        "padding-right": "25px",
        "padding-left": "25px",
        "align": "center",
        "width": "250px",
        "style": "src:resources/c-exp/C8D02998273D07256CCA/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;align:center;width:250px;style:src:resources/c-exp/C8D02998273D07256CCA/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;align:center;width:250px;;"
      }

The loaded project JSON contained the following for the same component:

"components": [
    {
      "tagName": "mj-image",
      "type": "mj-image",
      "style": {
        "src": "resources/c-exp/C8D02998273D07256CCA/nl/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg",
        "padding-top": "10px",
        "padding-bottom": "10px",
        "padding-right": "25px",
        "padding-left": "25px",
        "align": "center",
        "width": "250px"
      },
      "attributes": {
        "src": "resources/c-exp/C8D02998273D07256CCA/nl/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg",
        "padding-top": "10px",
        "padding-bottom": "10px",
        "padding-right": "25px",
        "padding-left": "25px",
        "align": "center",
        "width": "250px",
        "style": "src:resources/c-exp/C8D02998273D07256CCA/nl/maileditor/assets/UxlhZLikRdyXoBDZnfIoHg;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;align:center;width:250px;"
      }
    }
  ]

Unfortunately I haven't been able to figure out what commit in release 0.22.6 caused the issue. So if anyone could help out, it would be kindly appreciated.

Downgrading to 0.22.5 seems to be the only option for now.

Unfortunately haven't been able to figure out where or when exactly the style property gets added to the component style when exporting project data from a previously loaded project. Maybe someone else can pinpoint what causes the issue.

@soul-media : for what it's worth, patching the init method on the mjml components as a workaround seems to be working and prevents the style property from being added in the export of the project data (even after loading the a previously saved project). This seems to work even for version 0.22.14, and the JSON output will then be like the one on the right of your screenshot.

To patch the function, use the customComponents option of the grapesjs-mjml pluginsOpts to register a function that gets access to the coreMjmlModel.init function. For each component whose init function equals that of the coreMjmlModel, assign the patched function instead (this will only modify components that have an init function present). In the patched function, the style property is deleted before the attributes are passed to the this.set('style', ...) call, which seems to work around the issue.

var editor = grapesjs.init({
  showOffsets: 1,
  noticeOnUnload: 0,
  container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['grapesjs-mjml'],
  pluginsOpts: {
    'grapesjs-mjml': {
      customComponents: [
        // Patches: https://github.com/GrapesJS/grapesjs/issues/6646
        (editor, { coreMjmlModel }) => {
          function patchedMjmlInit() {
            const attrs = { ...this.get('attributes') };
            const style = { ...this.get('style-default'), ...this.get('style') };

            for (let prop in style) {
              if (!(prop in attrs)) {
                attrs[prop] = style[prop];
              }
            }

            this.set('attributes', attrs);

            // Remove the `style` attribute before passing to this.set(`style`)
            // This should prevent random errors after loading an existing project
            const attrsNoStyle = { ...attrs };
            delete attrsNoStyle.style;

            this.set('style', attrsNoStyle);

            this.listenTo(this, 'change:style', this.handleStyleChange);
            this.listenTo(this, 'change:attributes', this.handleAttributeChange);
          }

          editor.DomComponents.getTypes().forEach((type) => {
            const compType = editor.DomComponents.getType(type.id);
            if (compType.model.prototype.init === coreMjmlModel.init) {
              compType.model.prototype.init = patchedMjmlInit;
            }
          });
        },
      ],
    },
  },
});