Grapesjs: Execute command on drop

[tribulant]

This is not an issue, I just need some help or information, please.

I created a custom block using editor.BlockManager.add()

How can I execute a command to run some Javascript to take user input in a prompt or something to modify the content of the model before it is inserted into the canvas after the drop?

I started with some code like this:

editor.on('block:drag:stop', function(model) {});

Or should I rather create a custom domcomponent somewhere?

Any help would be appreciated!

[artf]

Correct, you can use editor.on('block:drag:stop', function(model) {}); or if you want something more component specific you can create a custom Component and make use of activeOnRender property

editor.DomComponents.addType('custom-type', {
  model: {...},
  view: defaultView.extend({
     init() {
       this.listenTo(this.model, 'active', this.doStuff); // listen for active event
     },
     doStuff() {...}
  }),
});


blockManager.add('test-block', {
 label: 'Label',
 content: {
    type: 'custom-type',
    activeOnRender: 1, // <- this will trigger the active event
 },
});

[tribulant]

@artf

Thank you so much, you rock!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.