How to actually apply styles inside `highlightTree`

1

Hi! After parsing, I want to highlight some nodes, depending on their values, as I understand this can be done with highlightTree, so every time the document changes I call this piece of code:

for (let {from, to} of this.view.visibleRanges) {
    syntaxTree(this.view.state).iterate({
        from: from,
        to: to,
        enter: (node) => {
            if (node.name === 'Assign') {
                const child = node.node.getChild('Text');
                if (child) {
                    highlightTree(child.toTree(), 
                                  highlighter, 
                                  (from: number, to: number, classes: string) => { 
                                        // how to apply the styles here? 
                                   })
                }
            }
        }
    })
}

I want to highlight the first Text node of the Assign tree, and for that I call highlightTree, however, what shoud I do inside putStyle? I know it gives me the class, but what should I do with it? How do I apply it? Thanks!! Also, does highlightTree will be applied after the default highlighter runs, or before? Because the default rule is the one being applied, and that’s what I want to change.

2

highlightTree is something you could use to highlight code outside of the editor. What you’re doing in the code you pasted doesn’t make much sense—highlightTree does its own iteration, so you wouldn’t call it from inside Tree.iterate. The callback would emit HTML or DOM nodes.

3

Ohh I see. The tree iterate was used to find the node I wanted to highlight. So, If I want to add a class to a range inside the editor I’d need to use a ViewPlugin? What would you recommend? Because of the nature of this language, it’s really hard to parse properly using the LR parser that Lezer uses, thus, the reason I need to resort to these tricks.