GrapesJS / GrapesJS/grapesjs

BUG: Javascript error when I want to add padding

Open
#6,646 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
26.2k
Forks
4.6k
Avg merge
2d 21h
Merged PRs (30d)
6

Description

### GrapesJS version

- [x] 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.
```mjml

Dezember 2025 - Club Newsletter

```

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

Dezember 2025 - Club Newsletter

```

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

```js
// 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.
Image

### Code of Conduct

- [x] I agree to follow this project's Code of Conduct

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.