Grapesjs: [QUESTION] Adds image block trough Editor API

[arthuralmeidap]

Hi @artf ,

When I drag and drop a Image block within the canvas it triggers the active event for the image block thats runs the openModal method. Shows a modal to upload the image.
I'm trying to run editor.addComponents({ type: 'image' }); and shows the modal to upload the image.

I didn't find any API methods that provides such functionality. Am I missing something?

If GrapesJS doesn't provides that, what do you think if I try to improve the editor.addComponents to check the component type and triggers the active event?

[chiqui3d]

I think this will help you.
editor.runCommand('open-assets');
https://github.com/artf/grapesjs/wiki/Assets

[artf]

@arthuralmeidap you can trigger the event directly on the added component

const model = editor.addComponents({ type: 'image' });
model.trigger('active');

[arthuralmeidap]

@chiqui3d, thanks for the feedback but the image block was just an example. In my case I have created a new Type and I was trying to trigger the active event for my component. It works exactly like the image block that's why I used the image block as an example.

@artf, thanks for the response! it worked fine!

Why the active event is not triggered internally when we call the editor.addComponents method?

[artf]

@arthuralmeidap I don't think that such behavior should be attached to the component by default, therefore, I delegated it to the dropper

[arthuralmeidap]

IMHO, this behaviour should be attached by default because , like in my case, if I want to add a new image block, or any other block that has a special behaviour when activated, within the canvas through the API it was necessary to understand how grapes works and do that manually.

I'm justing adding the components by API but I still want everything that comes with it. In this case the ability to upload images.

What do you think?

OBS: Please, this is just a discussion about the GrapesJS design. I'm not saying anything bad about your work at all. I really appreciate a lot what you have been doing with GrapesJS.

[artf]

No problem, @arthuralmeidap I'm always open to any discussion about the design, but in this case, I'm still concerned about adding such a behavior by default. Adding an object and an HTML string it's basically the same, so imagine to add such a component

editor.addComponents(`<div>
  ...stuff
  <img alt="img1" \>
  ... other stuff
  <img alt="img2" \>
  ....
</div>`);

With a default active trigger you'll "see" the Modal twice

Why model.trigger('active') is not good for your case?

[arthuralmeidap]

yes, you are right @artf . I didn't think about dumb cases like that you mentioned.
It worked very fine to me. I just thought if was not the case to embedded such behaviour within the addComponents or somewhere else.

Thanks for all the help btw! Closing the issue in 3, 2, 1.....

[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.