Only allow one component of specific type on editor
Question
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 than one on page, so if component is already added on page then I want to display specific message and not allow to be dropped in editor
Answers (3)
Hi @krunal039,
My best suggestion would be to listen for the component:add event. In the event listener function you could check to see if the added component is the type that you are looking for, and if more than one of those components now exist in the canvas then remove the one that was just added and inform the user.
editor.on('component:add', model => {
// ... your logic goes here
if(remove){
model.destroy();
}
});
@krunal039 Ryan's suggestion is the correct way to accomplish your request
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1227
Re-render view in editor's canvas whenever Trait value changes
Is there any possible way in grapesjs that whenever a user changes the value of a Trait of a custom component the render function should li...
Issue #443
Is it possible to restrict that only one of a certain component can be added to the canvas?
We want to define a custom component that may or may not be added into the HTML, but we want to disallow adding more than one of that compo...
Issue #772
trait validation
Is there way to restrict trait length i.e title cannot be more than 255 chars and if user try to add more than that, should display error m...
Issue #1555
Force block to bottom and single element
Is there some way to force a block to be dropped only at bottom of wrapper and be droppend only a single time (if user remove, can drop it...
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.