How to register widget click when editor is not focused

1

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?

2

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

3

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.

1 Like
5

Thanks for sharing your approach! I wonder if you experienced any issues with click events not registering consistently. I don’t know if it’s due to the widget lifecycle or what, but it seems like they only fire when I’m clicking repeatedly on the same spot.