BUG: Javascript error when I want to add padding

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.

https://github.com/user-attachments/assets/01270f08-974d-4898-bde0-83233f9258e0

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