How to register widget click when editor is not focused

Hey guys,

I have widgets in the editor which are basically SPAN elements with onclick function to toggle ON/OFF. This works when editor is focused. When editor is not focused, clicking such widget focuses editor instead and I have to click again so the widget registers click (so click twice).

Anyone has any idea if there is any way to register the click in widget with first click?

Focus happens on mousedown, so maybe using that event, rather than click, would help here.

I had to make similar interactive widgets. Certain parts of the document had to selected or a predefined text had to be inserted at a different locations in the document when these widgets are clicked. Here is one way of achieving that.

  • Emit a custom event from the widget on mouse click.
  • Setup event listener for the custom events on the document, e.g. document.addEventListener('my-custom-event', customEventHandler) It might be possible to setup the listener at a lower position in the DOM, but I didn’t try that.
  • Listener methods had to have access to the view, so that I can set selections or insert text.

Hope this helps. If you know how this can be improved, please let me know.