I am developing a plugin for Markdown language where I can convert the links to <a> elements. I am using a Replace Decoration to do this. For example, if the Markdown link is [Label](https://url.tld), “Label” is what goes inside the anchor tag and the url as the href. This is working fine except in some cases where the link label could contain emphasized text, inline code, and in this case, it loses the syntax highlighting (which is obvious since its a replace node). I would like to get those DOM nodes in the link label (I am parsing the syntax tree in the plugin so the positions can be known). I couldn’t get work done with the view.domAtPos function, and now I am out of ideas. Any help is appreciated.
In principle, there is no editor DOM for replaced content. So rendering it yourself in a custom way, based on the syntax tree, is probably the easiest approach here.
The problem is solved, thank you.
Another question: is there an API to get the highlighting styles based on the type of node in the syntax tree? That’d come handy if custom rendering is required.
highlightTree, plus the match method of whatever highlight style you’re using, may be what you’re looking for.
1 Like
Thank you so much for the answer, I was having a hard time finding that. Currently, I am re-parsing the link label to get a tree and then highlight that tree. However, I’d like to reuse the node that I have (I am using syntaxTree(view.state).iterate's enter function which has a node parameter), somehow convert it to a Tree (the SyntaxNode.toTree() function does create a tree but gives weird highlighting), and use that or the node directly for syntax highlighting. Is there any way to do that, highlight only a node? Or if its not possible, is it OK to do the parsing again on the link label?
EDIT: This problem is also solved, now my plugin is working as intended. Thank you for your time and suggestions.