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?
Read full answer below βQuestion
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 130.0.6723.59 (Official Build) (arm64) Reproducible demo link https://codepen.io/btmkt/pen/QWeOJRB?editors=1111 Describe the bug How to reproduce the bug?Open console.Drop multiple components inside the canvas(easy to reproduce with 3 columns for example).Drag the test-comp component added at the end in the extra category over the added components. What is the expected behavior? The component model and view init events (at least, not sure if there are others) should trigger only whe...
Answers (4)
@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?
@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? Hello @artf, The change above, which I saw was implemented, doesn't seem to fix the behaviour I encounter...
The behavior you're observing in GrapesJS v0.22.x, where component model init and view initialize events trigger multiple times during drag-and-drop (on hover and twice on drop), is a change from v0.21.x and earlier versions. This is likely due to enhancements in the drag-and-drop mechanism, where...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5705
Component tools misalign when the editor is resized
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v122 Reproducible demo link https:/...
Issue #5280
Event handler on view not bound to the component
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 115.0.5790.114 Reproducible...
Issue #4247
Components disappearing/not being rendered at cloning, moving or adding
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chromium v96 Reproducible demo link https:...
Issue #4323
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...
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 βRelated tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins β TinyMCE Inline Text Editor and Placeholder.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.