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...
Read full answer below βQuestion
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: Add padding to a image / Text 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. Th...
Answers (3)
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 ex...
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 o...
It appears you've encountered a bug in GrapesJS, specifically when working with MJML components and applying styles like padding, which leads to invalid attributes being generated and stored. This issue seems to be a regression, as it works in older versions (0.22.2) but fails in newer ones. Root C...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5677
[X] I confirm to use the latest version of GrapesJS
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfi...
Issue #6318
Unable to use transparent fill in Block media svg
GrapesJS version[X] I confirm to use the latest version of [email protected] when this issue was filedWhat browser are you using? Fir...
Issue #4191
We are trying to store the data from grapesJS editor in Angular 10 application, getting CORS error, image attached below
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 99.0.4844.5 Reproducible demo link...
Issue #6549
Couldnt Resize image
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://code...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins βPremium plugins ship with support, regular updates, and production-ready features β save days of integration work.
Browse premium plugins βRelated tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins β TinyMCE Inline Text Editor and Placeholder.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.