Best way to inline dynamic content (widget/marker)

I’m wanting to inline some dynamic content based on the code around it. Specifically, this is for

Essentially, when you type require(“x”), I want to inline a little version-picker dropdown menu to the right of the “x” string such that it allows you to select what version of the package you want to be requiring, so:

require(“x”) -> renders as -> require(“x” @5.0.0<>)

Where @5.0.0<> is a span that contains a select element with opacity 0 so that when you click it you can choose the right version. Additionally, for a split second it may render as a spinner as it is fetching the data. My issue is that it seems difficult to do this with markedText since I need the token information (I can edit the parser to specifically look for require(“x” such that it is “.cm-string required” instead of .cm-string). Is the best method really to just wait for a renderLine event, then go in scan the line for these classes and mark them accordingly?

What I’d really like to be able to do is have the parser return additional content as well as just a classname, but I figure that isn’t doable. I tried in renderLine appending nodes, but this confused the rendering.

Anyways, advice here would be great.



It’s probably cleaner to use markText (or addBookmark) along with your own scanning-for-relevant-tokens scheduler.