Event handler on view not bound to the component

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome Version 115.0.5790.114

Reproducible demo link

https://jsfiddle.net/mcraf3se/5/

Describe the bug

Hello, just starting with GrapesJS so it is quite likely I am misunderstanding something fundamental. I am struggling with setting the event handlers on the view of a custom component.

How to reproduce the bug? In the linked JS fiddle.

1. Drag block My Div onto canvas
2. Click inside it (there should be a div with 'stuff').

What is the expected behavior? Per documentation here the event handlers should be bound to the component and I should be able to use something like this.model. ....

What is the current behavior? When running locally the handler is bound to window. In the JSFilddle this seems to be undefined. In both cases call to this.model.components fails

If is necessary to execute some code in order to reproduce the bug, paste it here below:

# the fiddle should have the code in it but if someone wants to run it locally. Here is the code. 

const editor = grapesjs.init({
            // Indicate where to init the editor. You can also pass an HTMLElement
            container: '#gjs',
            // Get the content for the canvas directly from the element
            // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
            fromElement: true,
            // Size of the editor
            height: '300px',
            width: '100%',
            // Disable the storage manager for the moment
            storageManager: false,
            // Avoid any default panel
            panels: { defaults: [] },
            blockManager: {
                appendTo: '#blocks',
                blocks: [
                    {
                        id: 'my-div',
                        label: 'My Div',
                        content: {
                            type: 'my-input-type'
                        }
                    },
                ]
            },
        });

        editor.DomComponents.addType('my-input-type', {
            // Make the editor understand when to bind `my-input-type`
            isComponent: el => el.tagName === 'div',

            // Model definition
            model: {
                defaults: {
                    tagName: 'div',
                    // draggable: 'form, form *', // Can be dropped only inside `form` elements
                    content: 'Stuff',
                    droppable: false, // Can't drop other elements inside
                }

            },
            view: {
                tagName: 'div',
                events: {
                    click: 'clickOnElement'
                },
                clickOnElement: () => {
                    console.log(this)
                    this.model.components('hello')
                }

            }
        });

Code of Conduct

• I agree to follow this project's Code of Conduct