I can answer at least to your questions regarding pigments implementations.
though I can’t tell whether their implementation can place them arbitrarily vs. in-line
I’m not sure what you mean by
arbitrarily versus inline, but if by
arbitrarily you mean inserting the dots within the text, that’s not possible as it would require to impact the layout of the text editor’s lines.
but hopefully overlines are possible to
Sure, I just thought it wasn’t required.
Do you have a sense re: how much work it might be to do this myself?
If you want to have the same kind of implementaton as I did in pigments, it’ll probably take some time. The basic implementation to render a highlight is quite simple, but that’s how to deal with the amount to highlights to not penalize the editor that is tricky. In Pigments’ case, when you’re using all decoration types except gutter’s ones I’m using an objects pool to avoid touching the DOM too much and limiting the cost of the garbage collector passing to collect the destroyed DOM elements. Another downside to not using the native decorations is that you have to keep up-to-date with every API changes that could break your own implementation. It can be non-trivial depending the change.
Gutter decorations are the only type of decorations that uses Atom’s native decorations. All the other types use custom code due to the current limitations in how Atom deals with highlight and overlay decorations. Typically, highlight decorations can’t receive additional data or markup, and can’t change the text color, and overlay decorations are always present in the DOM, even when the region they’re attached to is outside the visible range (unless it changed recently, but I didn’t checked).
As for your case, based on the screenshot you provided, I think only the yellow line linking several annotations together would require custom decorations. Annotations themselves could be made with a mix of highligh decorations and overlay decorations (for the small red or green rectangle in the top left corner of annotations), even the outlines version could be made with highlight decorations (just use a different CSS style). The last kind of decorations, for the scrollbar, you can take inspiration in the scroll-searcher package as it looks much more closer to what you’re looking for.