add class to gutter of line

I need to add class to all gutters of a line. This seems to be the right one gutterLineClass. But how should I use it. Can I use it just like how gutter is used i.e. add it to extension.

Another solution could be to use gutter.class. But class is scalar var not a function, while i need class to be generated on demand.

Any suggestion?

Yes, gutterLineClass is what you need. See for example the source for highlightActiveLineGutter.

1 Like

I tried this (do exactly the same hightlightActiveLineGutter but the class only apply to the number marker not to other gutters on the same line. Specifically here I want to increase the margin-top of certain lines. But turned out the only the margin of line number is increased, other gutter’s margin stayed the same.
The document say this Facet used to add a class to all gutter elements for a given line.
What am I doing wrong here?

It looks like there is some other class that dictate the margin of other cluster.
Step back one level. The problem i want to solve is: I want to create space between a group of lines. I can do that with code line using margin. I need to do that with gutter markers too but failed. Any suggestion on how best to create space/gap (for both code line and gutter) between two different group of lines? Thanks.

Creating space between lines should definitely not be done in the gutter — the gutter element positioning is based on the heights of the block elements in the content, not the other way around. A line decoration should be able to add extra padding to a line (margins on block elements are not supported), or, possibly cleaner, use a block widget decoration to add an element between the lines.

Thanks. This is probably what I want.
So I tried to modify a version of a decoration’s line widget that I have.
But if I set the block to true, I will get the following error:

Unhandled Runtime Error
RangeError: Block decorations may not be specified via plugins

Which is understandable because I use .range(num) to create the Decoration like this:

let widgets = [];
return Decoration.set(widgets);

But if I remove the .range(num) then it would not work either. Any advice on how to create a block widget?

See the decoration example—decorations that modify the block structure of the editor must be provided directly, not as a function of a view.

Yes i am able to do it through EditorView.decoration facet. But still have some issue with the gutter.
If I want to add the block widget in front of line numbered n, what value of var should i use in this this widget.range(var)

doc.line(n).from (and side: -1 to Decoration.widget)

When I add the block widget in front of line 10 I got this. what I want is there is no line number in the first line. Any advice?
Screen Shot 2022-06-27 at 7.44.26 AM

Can you share simplified code? That shouldn’t happen.

1 Like

Ok I have it working. Thanks.

I create a new folding service for each group. Something like this foldService.of(getGroupedLineFoldRange). It worked fine without the above widget.
Now with the widget, I got duplicate folding icons like the picture below. Do you know what is going on?

Screen Shot 2022-06-27 at 8.00.05 AM

I debugged a little bit more. Looks like when I add the block decoration widget, the folderService is called few more times on the line where the block widget being added on top.

That sounds like a bug—but when I add a block widget above a foldable line I don’t see it. Can you help me reproduce it? Preferably with a minimal bit of code that sets up an editor that produces the effect? (This is what I tried.)

Indeed it seems to be a bug in v0.19.2. I am not able to reproduce it with 6.0. Unfortunately, it will take a while for us to move to 6.0. Wonder if you have any suggestion for us to remedy this in the meantime. Thanks.