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.
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 = [];
...
widgets.push(widget.range(line.from));
...
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?
Can you share simplified code? That shouldn’t happen.
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?
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.