Ckeditor5: [Widget] Mouseover events

[guillome2k]

🆕 Feature request
Onmouseover / onmouseout events for custom plugin (inline) widgets

💻 Version of CKEditor
12.10

📋 Steps to reproduce

1. Searched the manuals
2. Tried stuff like:
   ```modelObj.document.listenTo(editor.editing.view.document, "click", function() { console.log("cliock wi"); });

plugin.listenTo(editor.editing.view.document, "over", function(event, data) { console.log("on mouseenter"); });
plugin.listenTo(editor.editing.view.document, "mousemove", function(event, data) { console.log("on mousemove"); });
plugin.listenTo(editor.editing.view.document, "mouseover", function(event, data) { console.log("on mouseover"); });
plugin.listenTo(editor.editing.view.document, "enter", function(event, data) { console.log("on enter"); });
plugin.listenTo(editor.editing.view.document, "hover", function(event, data) { console.log("on hover"); });```

✅ Expected result

I like to add an onmouseover action to my custom inline widget plugin.

This code for onclick does work
plugin.listenTo(editor.editing.view.document, "click", function(event, data) {
const target = data.target;
const modelObj = getWidgetDom(target);

if (!modelObj) { return; }

.. code
});

[Mgsy]

cc @jodator

[jodator]

There are no such observer defined. Currently we use only click & mousedown events.

You can add your own observers by extending the DomEventObserver and add it to the view.

[guillome2k]

Worked! Thank you!

[juanpasolano]

@guillome2k Would you mind sharing how you implemented this.
I've tried creating a DomEventObserver and then adding it to this.editor.editing.view.addObserver( MouseEnterObserver ); but it only fires once on mouseentering the document, I need it to trigger when entering different elements in the document.

class MouseEnterObserver extends DomEventObserver {
  get domEventType() {
    return 'mouseenter';
  }
  onDomEvent( domEvent ) {
    this.fire( 'mouseenter', domEvent );
  }
}

How could I attach the Observer to the widget/ContainerElement i need?

Thank you

[guillome2k]

```js
class MouseEnterObserver extends DomEventObserver {
constructor( view ) {
super( view );

    this.domEventType = 'mousemove';
}

onDomEvent( domEvent ) {
    this.fire( domEvent.type, domEvent );
}

}
class MouseOutObserver extends DomEventObserver {
constructor( view ) {
super( view );

    this.domEventType = 'mouseout';
}

onDomEvent( domEvent ) {
    this.fire( domEvent.type, domEvent );
}

..

editor.editing.view.addObserver(MouseEnterObserver);
plugin.listenTo(editor.editing.view.document, "mousemove", function(event, data) {
const target = data.target;
const modelObj = getWidgetDom(target);

        if (!!modelObj) {
            ... your code ...

}```