BUG: Javascript error when I want to add padding

[soul-media]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome & Firefox

Reproducible demo link

Describe the bug

How to reproduce the bug?
Chrome & Firefox:

1. Add padding to a image / Text
2. Sometimes the error occurs, sometimes it doesn't.

REC-20251111104744.mp4

What is the current behavior?
Chrome
The error looks looks like this: Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.

This is what the text looks like before I add padding.

<mj-text>
  <span style="color:rgb(235, 105, 40);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:25px;letter-spacing:0px;margin:0px 0px 0px -2px;">Dezember 2025 - Club Newsletter</span>
</mj-text>

This is what the text looks like after I added padding.

<mj-text 0="font-size:30px" 1="font-size:30px" __p="true">
  <span style="color:rgb(235, 105, 40);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:25px;letter-spacing:0px;margin:0px 0px 0px -2px;">Dezember 2025 - Club Newsletter</span>
</mj-text>

When I try it with an older version (0.22.2), it works. With the latest version, this error occurs.

Firefox
Uncaught DOMException: String contains an invalid character
attr /lib/grapejs.min.js?v=0.22.13:2
each /lib/grapejs.min.js?v=0.22.13:2
S /lib/grapejs.min.js?v=0.22.13:2
each /lib/grapejs.min.js?v=0.22.13:2
attr /lib/grapejs.min.js?v=0.22.13:2
attr /lib/grapejs.min.js?v=0.22.13:2
updateAttributes /lib/grapejs.min.js?v=0.22.13:2

If is necessary to execute some code in order to reproduce the bug, paste it here below:
This is how I save the data

// Inline storage
        const inlineStorage = (editor) => {
          const projectDataEl = document.getElementById('project-data');
          const projectHtmlEl = document.getElementById('project-html');

          editor.Storage.add('inline', {
            load() {
              return JSON.parse(projectDataEl.value || '{}');
            },
            store(data) {
              const mjmlCode = editor.getHtml();
              const htmlResult = editor.Commands.get('mjml-code-to-html').run(editor, { mjml: mjmlCode });

              projectDataEl.value = JSON.stringify(data);
              projectHtmlEl.value = htmlResult.html;
            },
          });
        };

Maybe this information will help you:
I output the JSON data stored in “projectDataEl.value” in load() for a working and a non-working project. The JSON on the left is the one on the non-working project, and the one on the right is the one on the working project.

Code of Conduct

• I agree to follow this project's Code of Conduct

[trebor94]

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.

[trebor94]

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;
            }
          });
        },
      ],
    },
  },
});