indentation guides

stu · December 10, 2021, 1:52pm

I’m working on indentation guides in the codemirror 6 and I have an implementation that works well(ish).

It uses the Decoration.mark at various indents.
so If I have an indent of 8 on a particular line.
I might include an indent mark at range 0, 4 and 4, 8. (offset by line.from)

But indentation marks should also be visible on empty lines when it’s part of indentation block.
With the Decoration.mark I can’t put those on empty lines so I’m a bit stuck.

Any suggestions much appreciated!

marijn · December 10, 2021, 2:36pm

Does putting a widget decoration holding the styled spaces at the end of lines that aren’t long enough work?

stu · December 11, 2021, 8:25am

Perfect - thanks @marijn - just what I was looking for. Works great.

mgmeyers · December 23, 2021, 8:49pm

@stu Would you be willing to share your code for indentation guides? I’m looking to implement something similar.

wuxuweilalala · December 30, 2021, 6:03am

@mgmeyers

here is my implement.
Hope to help you.

stu · January 13, 2022, 10:44am

@mgmeyers sorry for the delay - needed to check whether I was able to share the code - and because of the holidays it took a while to get the all clear.

Below is our python indentation guides extension.
We only show the second level indentation or greater (easily changed to show the first one).
We also don’t do any highlighting of the current indentation guide (like vs code might - though that might not be too difficult to add).

gist.github.com

https://gist.github.com/s-cork/898cd7c21e55a4963132cb9d9e2c6615

indentation_guides.ts

import { getIndentation } from "@codemirror/language";
import { RangeSetBuilder } from "@codemirror/rangeset";
import { Extension } from "@codemirror/state";
import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate, WidgetType } from "@codemirror/view";

export function indentationGuides(): Extension {
    return [showIndentations, indentationTheme];
}

// markers can be used at positions on a line over a range

This file has been truncated. show original

wcrichto · May 19, 2022, 9:14pm

Thanks for releasing this @stu! I’m going to adapt this for Nota and you’ve saved me a lot of time

aiqc · July 6, 2022, 4:47pm

Hello CodeMirror folks,

I’m inquiring about indentation guides on behalf of Project Jupyter. Right now, there are no indentation lines in JupyterLab, so any basic functionality would be an improvement here. The team is in the middle of upgrading to CodeMirror v6.

Taking a look at the official list of CodeMirror extensions and the indent service, I do not see indentation guides explicitly called out:

Have people been generally satisfied with the behavior of either @stu or @wuxuweilalala 's implementations?

marijn · July 7, 2022, 8:50am

The library does not come with a built-in indentation guides extension (mostly because I find them an exceedingly pointless feature), but it should be possible to build them as an extension (view plugin that adds the appropriate 1px border, -1px margin widgets after whitespace at the start of each viewport line), so I do hope someone publishes a package for this at some point.

programingjd · July 7, 2022, 12:31pm

I think the repl.it team already made such extension and it works quite well.

https://github.com/replit/codemirror-indentation-markers