Trigger some specific action on dropping a particular custom component

[dhruvsharma1409]

Hello,

I'm working on a project that uses the grapesjs but stuck for a while on a particular feature that needs to be implemented.

Desired workflow ---
Drag and drop a custom block on the canvas (one particularly - which is an ui of an e-commerce product card, which consists product image, name, description and price) --> don't add it to the canvas yet --> open a dialog box and we select an item from a list of products which have all the details stored in the database --> append all the details after fetching from the database to that block's HTML --> and afterwards add it to the existing canvas with updated block's HTML

But I'm unable to trigger that dialog box when I drag that block.

Tried using -
editor.on('component:add', (some, argument) => {
console.log('component added');
setOpenProductDialog(true);
});

But it gets executed for all that block that I drag and drop. How can I restrict that to trigger on just when I drag drop that particular block and change the html of that block when I select one item from the list.

A little help would be really appreciative.

[ronaldohoch]

Hello!
I have made it this way:

export default (editor, opts = {}) => {
  const bm = editor.BlockManager;
  const $ = editor.$

  bm.add('dina-forms', {
    category: opts.dinaCategoryLabel,
    label: opts.blockLabelForm,
    content: {
      type: 'FormBlock',
      id: 'dinaForm',
      class: 'dina-form',
    }
  });

  editor.on('component:add', (model) => {
    if(model.getName() == "FormBlock"){
      editor.runCommand("open-form-modal",{model:model});
    }
  })
}

other file:

    window.editor.Commands.add('open-form-modal', {
      run: function (editor, sender, opts) {
        if (opts.hasOwnProperty("model")) {
          model = opts.model;
          var nome = prompt("Qual seu nome?");
          model.components(nome); // <- Here are the replacement 
        }
      }
    });