Component model and view inits every time it's dragged over every component present in Canvas on which it can be dropped into

@mohamedsalem401 this is probably happening due to the shallow editor. I think it would make sense to leverage the temporary option (which we already use to skip some actions) in canMove. wdyt?

const wrapper = this.getShallowWrapper();
srcModel = wrapper?.append(source, { temporary: true })[0] || null;

@artf Yes, I suspect it has to do with the shallow editor. Hopefully the temporary option will work and then I'll open a PR

@mohamedsalem401 this is probably happening due to the shallow editor. I think it would make sense to leverage the temporary option (which we already use to skip some actions) in canMove. wdyt?

const wrapper = this.getShallowWrapper();
srcModel = wrapper?.append(source, { temporary: true })[0] || null;

Hello @artf,

The change above, which I saw was implemented, doesn't seem to fix the behaviour I encountered. It's still the same as in version 0.22.1. I've updated the pen to 0.22.3 (https://codepen.io/btmkt/pen/QWeOJRB?editors=1111) and I've also ran some tests in my app which confirms the above.

Thank you. Hope you will give it another try.

Thanks for reporting this, @bt-mkt.

Great question about Component model and view inits every time it's dragged over every component present in Canvas on which it can be dropped into. The recommended approach with Canvas is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!