FEAT: listen to mouse event for native components

[addlistener]

My use case

I have a popup opened but cannot be closed when you click on a component because mouse events are stop propagated. I want to manually close it in a click callback.

Benefit

Listen to events on all gjs natives components, not just the custom ones
Right now those events are stopPropagated. it's hard to customize

Alternatives

1. Maybe some plugin mechanism for us to access the base component, if you think adding more events is too much
2. This does not seem to work https://stackoverflow.com/questions/68175490/trap-on-dbclick-in-grapejs-editor
3. Extending components works but we cannot monkeypatch the original ones to make it work on all native components. FEAT: component:clicked / dbclicked event #3124
4. component:selected is not useful in this case since if you select an already selected component it won't be triggered.

Mouse event such as

click
doubleclick
scroll
contextmenu
...and more

Parameters needed

component, element

[artf]

Extending components works but we cannot monkeypatch the original ones to make it work on all native components.

Can you elaborate more on this as it's not clear to me what issue you're facing?
The whole point of Component View is to allow the customization of what is rendered in the canvas. That means you can add functionalities not necessarily available on the end-user component (eg. trigger some GrapesJS API on click of some element)

[addlistener]

I have popup which listens a global click to detect click outside and close the popup.

When you click <span>my text 1</span> the popup should close. Because the click is outside of the popup rect.

It can work on custom components since I can use the events field.

class MyCustomComp {
  events: {
    click: closeMyPopup
  }
}

But i cannot do the same for native components, since neither can I access those component class(there's just typing exported, no real object export #3124 (comment)) nor change their events field

[artf]

It looks like you didn't read carefully the Component documentation. It shows how the View works and how to extend it, and it works for any kind of component.

[addlistener]

I tried using 'extend' on native components. editor.addType works but later editor.addComponents complaints

adding the extend property will turn on the bug. Still thinking...

[artf]

Please try to create a reproducible demo with that error

[addlistener]

@artf

Here it is.
https://stackblitz.com/edit/grapesjs-react-custom-ui-oqoqcp?file=src%2FpatchNativeComponents.ts,src%2FApp.tsx

I can't reproduce exactly my error. But I can provide some problems which are really basic regarding extending native views.

Problem1

1. Expected: dblclick shows assets manager
2. Actual: dblclick shows nothing
3. My trial: If you comment the "view" obj below dblclick works as expected

Core lines

      extendView: type,
      extendFnView: ['events'],
      view: {
        events(): Backbone.EventsHash {
          return {
            click: 'onClick',
          };
        },
        onClick() {
          console.log('clicked', this.model.get('type'));
        },
      },

Problem2

Another problem is shown in the same file
I tried this #3146 (comment)
But it shows ComponentView is undefined. It's just type exported?

Core lines

import { Plugin, Component, ComponentView } from 'grapesjs';

console.log({ Component });
console.log({ ComponentView });

[artf]

Problem 1

extendFnView: ['events'] has no effect here as your events() returns a new object, for your case to work you have the get events from the original view.

editor.Components.getTypes().forEach((item) => {
 const viewEvents = item.view.prototype.events?.() || {};
 // ...
 editor.Components.addType(type, {
   // ...
   // remove extendFnView
   view: {
        events() {
          return {
            ...viewEvents,
            click: 'onClick',
          };
        },
     // ...
    },
 });
})

Problem 2

Correct, it's only for types. My suggestion there was to extend as per docs (so it was not about extending the internal class).