[QUESTION] All instances of custom component are being updated
Question
Hi,
I created a custom component for a toggle button. My problem is that once I drag and drop more than one, and then I edit any of them, all instances are being updated in terms of color, size, etc. I am using the latest version of grapesjs
editor.BlockManager.add('toggle', {
label: 'Toggle',
attributes: { class:'fa fa-toggle-on'},
category: 'Basic',
content: '<label class="switch"> <input type="checkbox"><span class="slider"></span></label>'
})
All the animations and properties are in the CSS that I loaded in the editor. Any idea why this can be happening?
Answers (2)
Hi! i guess this is because your blocks posses similar classes and have selectors in common.
in the latest version, avoidInlineStyle is true by default, so are you experiencing this on the latest version?
The guess by @pouyamiralayi is right, this happens because of the same classes and you have to toggle them in the style manager to make stylable only the component style. BTW I'll try, soon I hope, to provide a more intuitive solution
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1537
Duplicate component not style
Hi, First of all, thanks a lot for the awesome work ❤️ !!! I've a question about the duplication tool so here the steps to follow :I drag&d...
Issue #577
Only allow one component of specific type on editor
is there way to not allow to drop any specific component more than one time on page? I have custom component and user cannot drop it more t...
Issue #5199
BUG: Changes in component's attributes being reproduced in all the instances instead of just one
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v114 Reproducible demo link https:/...
Issue #612
Urgent : Duplicate other blocks when used custom asset manager
Hello, We have modified the Assset manager with custom one. But we are having problem now. If we drop one image into canvase and then add a...
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.