Hyphen changed to " by editor messes up modern coding.
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome
Reproducible demo link
Not necessary - Obvious issue
Describe the bug
This is what the code needs to be:
data-zanim-lg='{"from":{"opacity":1,"x":70},"to":{"opacity":1,"x":0},"ease":"CubicBezier","duration":0.8,"delay":0.3}' data-zanim-xs='{"from":{"opacity":1,"y":-37},"to":{"opacity":1,"y":0},"ease":"CubicBezier","duration":0.8,"delay":0.3}'
This is what the editor changes it to:
data-zanim-lg="{& quot ; from& quot ;:{& quot ;opacity& quot ;:1,& quot ;x& quot ;:70},& quot ;to& quot ;:{& quot ;opacity& quot ;:1,& quot ;x& quot ;:0},& quot ;ease& quot ;:& quot ;CubicBezier& quot ;,& quot ;duration& quot ;:0.8,& quot ;delay& quot ;:0.3}" data-zanim-xs="{& quot ; from& quot ;:{& quot ;opacity& quot ;:1,& quot ;y& quot ;:-37},& quot ;to& quot ;:{& quot ;opacity& quot ;:1,& quot ;y& quot ;:0},& quot ;ease& quot ;:& quot ;CubicBezier& quot ;,& quot ;duration& quot ;:0.8,& quot ;delay& quot ;:0.3}"
This would be okay if the editor automatically changed it back when it finished but it doesn't.
Please fix the editor to allow a hyphen instead of fubarring all modern coding.
I do see that you allow hyphens after the =" so I see no reason why you can't allow them on the outside.
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (2)
This is not a bug, but how attribute escaping works in HTML.
domEl.innerHTML = `<div data-attr='{"key": "value"}'>Text</div>`;
domEl.innerHTML;
// -> '<div data-attr="{"key": "value"}">Text</div>'
Thanks for reporting this, @clonefunnels.
The issue with Hyphen changed to " by editor messes up modern coding. appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.
What to try:
- Add a setTimeout wrapper to ensure the DOM has settled:
setTimeout(() => {
// your operation here
}, 0);
-
Check initialization order — make sure components are fully loaded before you interact with them
-
Use the editor's event system — listen to completion events:
editor.on('component:mount', (component) => {
// safe to interact with component here
});
Recommended next steps:
- Test with the latest GrapesJS version if you haven't
- Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
- Include GrapesJS version, browser, and console errors in your report
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3770
[Feature]: Improve and fix absolute dragMode
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v93 Reproducible demo link https://...
Issue #6603
Ampersand is not escaped in attribute value
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v142.0.7392.0 (canary) Reproducible...
Issue #5312
Issue with rich text editor Indent action for Lists
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome V115Reproducible demo link https://js...
Issue #4250
init() method typings error
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v 100.0.4896.75 Reproducible demo l...
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.