Adding the dblclick event is no longer there when the browser refreshes.

[Zunaib]

Hi Guys,

I wanted to open my custom asset manager on double clicking || dropping the video component.
I searched on GitHub to accomplish this and i found something that works, but in one use-case i cant get to work.

This is what i have as of right now,

   const comps = editor.DomComponents;
    let defaultType = comps.getType("video");

    comps.addType("video", {
      view: defaultType.view.extend({
        init() {
          this.listenTo(this.model, "active", this.doStuff);
          this.doStuff();
        },
        events: {
          dblclick: function () {
            this.doStuff();
          },
        },
        doStuff() {
          setFilters({ ...filters, videos: true }); // this guy activates a check that opens the custom asset manager.
        },
      }),
    });

Now if the editor has no video component and i drag and drop it, the custom asset manager opens on init() as it should and also responds to dblclick as it should.

THE PROBLEM:

So the video component is on canvas right, I refresh the browser and i expect the video component to behave the same as above.

But the thing is that video component that is already on the canvas gets rendered before the above code executes because when initialising as - grapesjs.init() everything gets rendered and then rest of the stuff executes.

After that happens the video component rendered obviously used the default model for video that does not have the dblclick event attached and hence on double clicking nothing happens.

I am attaching the before and after refresh - state of events attached to the video component.

Adding the component onto canvas and console logging it gives me,

After i refresh and console logging it gives me,

HELP

Can anyone of you please tell me how to cater this problem,
I thought of these things

• Doing the above mentioned code before the canvas is loaded and things are rendered (Don't know how to do that).
• Editing the model when initialising the editor (Don't know how to that).

Please answer me soon and if you need any more explanation about anything i can provide.

@artf please help.

[Zunaib]

@artf Hi man, any suggestions, please reply.

[artf]

Try with the onActive callback which can also be triggered from Block definition via activate property.

comps.addType("video", {
      view: {
        events: {
          dblclick: 'onActive',
        },
        onActive() {
          //... do your stuff here
        },
     },
});

[Zunaib]

Okay will give it a try.

[Zunaib]

No luck with this.