My CM plugin is causing Datastar to register event handlers multiple times

v6
1

Hi guys. I’m building something with Datastar and I encountered a weird bug that I’m not sure where it originates from.

The problem is that when I use datastar’s data-on-click it somehow registers the listener mutliple times and it adds more with every state change (cursor move, window resize, editing…).

Then clicking the link will show multiple console logs while it should only one.

Here is the minimal example that does this:
index.html (2.4 KB)

Question is - am I doing the plugin wrong? Maybe it’s a CM6 bug? Or Datastar’s - if so then how to reproduce it without the CM?

2

I think what might be happening is that CodeMirror is changing the attributes on a reused HTML element for the widget. You could try putting the data- attributes on a child element of the widget rather than on the widget itself, and then at least the MutationObserver might unbind the events as it deletes them.

3

For that I’d need to use the Decoration.widget right? But I think with widget I can’t put the cursor into it and edit - as I can with the Decoration.mark. Am I correct?

4

Ok, I kindof figured out that I can just return two mark decorations and one will wrap the other, but…

It didn’t really help. I have what I think you ment in the DOM, but CM is still registering multiple event listeners.

image
image480×102 3.85 KB

image

@marijn Is that something to be considered as a bug in CM?

5

Ok I’m calling it quitts.

For anybody in the future trying to solve the issue:
I decided to only send custom events from inside the CM6 widgets and then catch them with data-on-* when they bubble up from CM6 with Datastar.

6

Sorry I didn’t check replies in time.

That sounds like a nice solution actually.

7

I mean - it’s a descent solution. It only bothers me that I don’t really know why this bug was happening in the first place.

I implemented this already and it works as expected so case closed, I guess :wink: