How to extends the default events from a given component?

[ronaldohoch]

Hello @artf and community ^^

I have a mjml plugin with a lot of custom, but we can start from the original plugin.

I need to run some code when i drop an image in canva, so i used the comment from here(#3124) to remember the events from component. (https://github.com/artf/grapesjs/blob/175151b69a041c5bcb3cd4b93bee4df8b2063103/src/dom_components/view/ComponentImageView.js#L8)

In the image mjml, i'm put this code:

      onActive() {
         //some logic..
      }

And it stops to open the assets manager, so i made this:

      onActive() {
         editor.DomComponents.getType("image").view.prototype.onActive.call(this);
         //some logic..
      }

But also, i need to run some code when i click on the image. I know i can work with editor.on("component:selected") and create some logic to run code only in image. But i think we could have a way to do it inside of component.

I needed to do it:

      events: Object.assign(
        editor.DomComponents.getType("image").view.prototype.events(),
        {
          click: () => {
            setTimeout(() => {
              $$(".gjs-sm-property__width").hide();
              $$(".gjs-sm-property__height").hide();
            }, 100);
          },
          dblClick: () => {
            editor.DomComponents.getType("image").view.prototype.onActive.call()
          }
        }
      ),

This way i have lost the function "initResizer" from original image, but we don't use resizer in e-mail marketing... Yet 👀

Would be nice to have a way to extends the default events without losing the original ones.

[artf]

I'd say your approach is correct to extend component functions/events. Anyway there is one way to extend parent function and it's documented here, this would allow you to skip calling it from the prototype.