How to drag external text into particular index inside the textable component?

Hi @artf , When I drag external content inside the editor it should be dropped at specific position but it is overlapping the existing content in the component. So is there any way where I can place text at the specific position without getting overlapped?

FYI, I am using canvas:dragdata for the getting the external content.

@siddhi1397 please don't open bug issues as features/questions

Okay sorry for that. @artf But can you please help with how can this be implemented?

Thanks for reporting this, @siddhi1397.

Great question about How to drag external text into particular index inside the textable component?. The recommended approach with Components 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!