BUG: Javascript error when I want to add padding
- 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.
### Code of Conduct
- [x] I agree to follow this project's Code of Conduct
Contributor guide
Assessment
This issue has not been assessed yet.