BUG: Ids gets changed while trying to set components on the canvas using json
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome
Reproducible demo link
no link
Describe the bug
How to reproduce the bug?
- ... use a demo json that can generate some component on the canvas, set an id in attributes
- ... use editor.setComponents(json)
- ... set style using editor.setStyle() function for the same id element What is the expected behavior? ... id shouldn't be changed while getting rendered on the canvas
What is the current behavior? ... id's are getting changed and because of which styles can't be implemented for the same
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (3)
Hi @shelendravashishtha2 can you please indicate the exact steps (I need to know what is the json you're referring to)
I've seen this happen to if you don't save a reference to the CSS before using the editor.setComponents() method All of the CSS markeup from the elements id selector/reference is removed when using editor.setComponents() method The exact steps i've encountered are save a reference of the editor components as JSON ie
`let jsonElements = editor.getComponents().toJSON();
editor.setComponents(jsonElements)
`
after using the setComponents method the CSS makrup is lost for all of the id selectors of the blocks, and some of the components id's will change ie if it was #iefzr it will change to #iefzr-2
The reason i've used saved the jsonElements is for having a way to edit them via the UI with an editor like monaco editor see my screenshot below, but even without modifying the JSON the CSS still get's reset
Is there a better way to go about modifying the JSON ie one to one instead of modifying it via setComponents?
I think I found the issue on my end using editor.getComponents().toJSON();
adds an empty "style":"" field to some of the components which is clearing out there CSS
ie
"components": [
{
"type": "box",
"style": "",
"attributes": {
"id": "ic7c"
}
},
{
"type": "box",
"style": "",
"attributes": {
"id": "if5j"
}
}
]Related Questions and Answers
Continue research with similar issue discussions.
Issue #3832
BUG: The css classes are removed and the autogenerated ids for each html tags gets changed ( Example : ivj5m-2) after each reload
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link Not there De...
Issue #4323
BUG: Performance issue while dragging component to canvas when you have 2k component on canvas
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Google Chrome Version 101.0.4951.41 (Officia...
Issue #5990
BUG: When you delete a component, duplicate classes between components will be deleted.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126.0.6478.127(Windows) Reproducibl...
Issue #5378
BUG: Uncaught TypeError: Cannot read properties of undefined (reading 'Canvas') while dragging a component in Layer Manager Panel
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v116.0.5845.97 Reproducible demo li...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.