Hi - first of all thanks for making such a great library, I have been trying to build some related functionality by hand and let me tell you it’s given me a great appreciation for the complexity of what you have done!
I’m trying to do something that I’m not quite supposed to with CodeMirror - I’m applying styles to elements outside of the normal flow. Here are my event handlers:
eventHandlers: {
mouseover: (e, view) => {
const target = e.target as HTMLElement | null;
const rule = target?.dataset.rule;
const matchId = target?.dataset.matchid;
if (rule && matchId) {
document
.querySelectorAll(
`#grammar [data-rule='${rule}'], #output [data-matchid='${rule}']`,
)
.forEach((el) => el.classList.add("highlighted"));
target.classList.add("highlighted");
}
},
mouseout: (e, view) => {
const target = e.target as HTMLElement | null;
const rule = target?.dataset.rule;
if (rule) {
document
.querySelectorAll(
`#grammar [data-rule='${rule}'], #output [data-matchid='${rule}']`,
)
.forEach((el) => el.classList.remove("highlighted"));
target.classList.remove("highlighted");
return true;
}
},
},
My decorators add the data-rule, and I thought this was a smart way to listen for mouseover events. But I get a fair bit of flicking sometimes, or things not behaving quite right - I’m pretty sure it’s because I’m not supposed to be doing this.
Is there a proper way to add onMouseOver events to decorations?
(You can see what I’m trying to achieve - with the buggy behaviour - here so you can see why I need these events, if you hover over some of the rule names or the input characters)