How to add a block in Canvas on a specific position Onclick (Without Drag&Drop)

[NoumanAhmad-Braqsol]

Hi , devs
Block config appendOnClick:1 it allow the block to add Onclick and it works fine.
but it appends the block into the selected element .
My Question is that how to append a block on a specific position Onclick .
Actually i want to add the block always as the nextSibling of the selected element.
i want something like this to catch click event. is it possible?

  editor.on('block:on:click', block => {
            console.log(block)

        });

[ronaldohoch]

Hello, i've made some searchs.

First: check the pasteCommand https://github.com/artf/grapesjs/blob/dev/src/commands/view/PasteComponent.js#L7
In this line, we have the editor.getSelected();

Checking the image, this is the component selected, i doesn't check it so deep, so i don't know where in this is the element position.

Second: When you start a new plugin, it came with this code:

editor.addComponents(
        `<div style="margin:100px; padding:25px;">
            Content loaded from the plugin
        </div>`,
        { at: 0 } // <- Here is the position of a new element
    ))

[NoumanAhmad-Braqsol]

Thanks for reply . Actually I have Blocks in BlockManager . we use drag and drop to put block at specific position. But if we add appendOnClick:1 in block config then we can add component on click. this click event always append the component to selected element . But i want to control this event to add nextSibling of the selected element.

[iabhiyaan]

 // other codes
 { at: editor.getSelected().index() + 1 }

[NoumanAhmad-Braqsol]

hi thanks for response @iabhiyaan which Event emit when we click on a block. ie. if we drag a block an event emit block:drag:start

     editor.on('block:drag:start', block => {
        var parent = editor.getSelected().collection
        var index = editor.getSelected().index()
        var new_index=(index+1)
        var new_el =parent.add(block.attributes.content, {at: new_index});
        editor.select(new_el)
        });

similarly if we click a block which event emit ? so i can control the event . i need event ie

editor.on('block:onClick:start', block => {

}); 

[iabhiyaan]

I think, such event doesnot exists. But you can try these:

 blockManager.add('some-block-id', {
 // ...
 render: ({ el }) => {
   const btn = document.createElement('button');
   btn.innerHTML = 'Click me';
   btn.addEventListener('click', () => alert('Do something'))
   el.appendChild(btn);
 },
});

reference: https://grapesjs.com/docs/modules/Blocks.html#custom-render

[artf]

I updated the appendOnClick option in order to allow function values. This will work as a catch-all where you can apply one logic for all blocks.
I've also added the onClick property to blocks, so you can add your append logic to each block separately, eg.

editor.Blocks.add('my-block', {
  label: '...',
  content: '...',
  onClick: (block) => {
    editor.getWrapper().append(block.get('content'), { at: 0 })
  }
})

ps. This will be available in the next release.