StyleManager events fire multiple times per change
Hello, I am having the same problem and since that it is not solved yet, it would be a solution to use the debounce technique. check this example.
Read full answer below ↓Question
To reproduce: On a fresh install of GrapesJS, within the demo page (within index.html), add an event listener like so: editor.on('component:styleUpdate:width', (model) => { console.log(model); });Issue: When changing the 'width' value of any element, the 'model' variable will be printed multiple times. The issue seems to be more severe when listening for 'list' properties such as Font Family, Font Weight or Display. E.g: editor.on('component:styleUpdate:font-family', (model) => { console.log(model); }); For these kinds of properties, I have noticed that the events fire multiple times when the...
Answers (3)
Hello,
I am having the same problem and since that it is not solved yet, it would be a solution to use the debounce technique.
check this example.
Hello, I also found this issue. The event is firing even without changing the width I added the following code to the html page and the log is generated multiple times. editor.on('component:styleUpdate:width', (model) => { console.log('Component width updated:', model); }); I have recorded a video...
I think the fix is already available on the dev branch (so ready for the next release) https://github.com/artf/grapesjs/blob/0dba07fd21b8e2dd953100bec5b7531f0761c9c2/src/style_manager/view/PropertyView.js#L411-L413 I see multiple events on the current online demo but seems to be ok on my local dev...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1364
[Bug]: Error on multiple instances of grapesjs
Hello, I use Grapesjs in my reactJS application. I have a react component which is an instance of Grapesjs. So I can add this component in...
Issue #596
Color picker displays wrong position
Issue #2403
editor.load possibly causes memory leak
How to reproduce:Naviagate to https://grapesjs.com/demo.htmlOpen browser console (Chrome) and type the following: setInterval(() => editor....
Issue #1530
Click events in undo/redo manager
Hi @artf, I have a issue regarding undo manager and I have checked it's also on your demo page. Problem is that undo manger also count the...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.