Ckeditor5: Get DOM element type clicked on

[JBotma]

Hi! Firstly I would like to thank you for creating such amazing software. I am very excited to start using CKE5!

I need to see on what type of DOM element I clicked on. This will allow my custom interface (great feature btw) to show "delete" button if the user clicked on an image/table or show "bold/italic" buttons if the user clicked on text.

I started looking into the Observer classes, but cannot quite figure out how I can achieve this.
Any advice would be greatly appreciated?

[Reinmar]

Hey! Great question. We didn't yet finish the view docs in the architecture introduction so this bit isn't covered yet.

The way to retrieve the clicked element would be to listen to editor.editing.view#click event:

editor.editing.view.on( 'click', ( evt, data ) => {
   data.target; // -> engine.view.Element
} );

However, the ClickObserver is not automatically loaded so the features which need it need to load it:

import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';

// Somewhere in your plugin's init() callback:
editor.editing.view.addObserver( ClickObserver );

Now, the event will be fired as expected.

However, you will soon notice that this event is fired with a data containing the target property which doesn't point to a native DOM element, but to the view's element. There's no easy way to retrieve the underlying DOM element on purpose, cause that's a good practice to use the view elements as often as possible – that makes your code easier to test. However, in certain cases you may need to access the underlying DOM and for that you can use the DomConverter#mapViewToDom() method (the instance of DomConverter is available in editor.editing.view.domConverter).

PS. I'm not sure what you want to implement exactly, but checking what was clicked may not be the most adequate option. Sometimes, it's worth checking where the selection landed and, for instance, use the model. I actually don't remember how the link's feature implementation ended up, but I remember that we had to try a couple of options to find a good UX. It's, unfortunately, not something that the engine could solve for the developer.

[lasfin]

@Reinmar Is it possible to listen to clicks on specific elements to get cursor position with ClickObserver? I need to track clicks near the image to change its alignment and add a paragraph near it and don't know the right way to do that.
Thanks in advance.