Hover a row and styling some parts of the raw

[sofly]

Hello everyone! The library is amazing! Could someone assist me? I’m using CodeMirror v6 with the JSON language.
1. When hovering over a row, I need to find all JSON properties in that row and highlight them. I already have logic to iterate through the tree and find all property names (SyntaxNode) in the line, but I need a way to find the DOM nodes that are bound to those property names (SyntaxNode). Is this possible?
2. Where should I add an event listener to listen for the mousemove event?
3. What type of widget should I use for these tasks?
4. If I need to display something near a property name when it’s clicked, should I use a separate widget? It feels like these are two distinct features: clicking on a property and highlighting all properties in the row.

Does anyone have a link to examples involving hovering over a row?

Thank you, and have a great day!

[marijn]

@sofly

but I need a way to find the DOM nodes that are bound to those property names

That’s not how this library works. Instead, you create decorations for the ranges covered by the names.

@sofly

Where should I add an event listener to listen for the mousemove event?

Probably with an event observer.

And yes, separating different features into different widgets is generally a good idea.

[sofly]

@marijn, thank you for the quick response. Could you please tell me how I can find JSON property names in decorations?

[marijn]

You don’t. You find them in the syntax tree, which you supposedly already were doing, and you create decorations from that data.