Customize result from image drag'n'drop desktop
Check this one https://github.com/artf/grapesjs/issues/2472#issuecomment-570228050
Read full answer below ↓Question
Hello,
I'm using GrapesJs with the MJML plugin and when I drag'n'drop an image from my desktop, the dropped result on the wrapper is an "image" component. But in my case I would like that the dropped result is directly a "mj-image" component.
I saw the result from the drag data transfer is computed in this method from the Droppable utils class : https://github.com/artf/grapesjs/blob/ea2f7954937c2306b284e09cf08c6e7bffb9309c/src/utils/Droppable.js#L151
Is there a way to extend this method via a new plugin ?
Thanks
Answers (1)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1464
Customizing the Component Position
First of all thank you guys for this awesome library, And I have one Clarification that is how do i customize the drop position example if...
Issue #3200
Help needed: Get the component that a block being dropped onto?
Hello, If I drag and drop a block on a dynamically added component, how can I get/access the component that the block is dropped onto? I se...
Issue #2917
BUG: Style Manage does not hide style blocks
Hey @artf, I'm trying to hide style properties based on the selected element. for example, when I drag and drop an image on my GrapesJS, I...
Issue #2744
[QUESTION] Disable a block drag&drop
Hello everyone, I would like to make forbidden the drop of one block before another specific one. Context : i've create a new trait for som...
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
GrapesJS Document Blocky — Build Professional Documents with Drag-and-Drop Ease
If you’ve ever tried to build invoices, reports, proposals, or client documents using a drag-and-drop editor — you know how tricky it
Tutorial
Best GrapesJS Plugins in 2025 (Updated List)
Discover the top free and premium GrapesJS plugins in 2025 — boost your editor with UI kits, Tailwind blocks, AI tools, and advanced page managers.
Tutorial
Blocky Plugin — 40+ Ready-Made Tailwind CSS Blocks for GrapesJS
Designed for creators who value both speed and precision, Blocky adds a library of 40+ pre-built Tailwind blocks directly inside your GrapesJS editor.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.