[Custom Language] Default Behaviour of Auto Indentation without Configuration

v6
1

Hello,

I am writing a Svelte language pack for codemirror and I am trying to understand how does the auto indentation work.

I am aware that I can configure the indentation behaviour with indentNodeProp.add(...) method, this works as expected. Yet, I found that even if I don’t add any configuration, CodeMirror still able to auto indent HTML-like tags (e.g. {#if} block in Svelte). I dig around and found that this might be related to the openedBy and closedBy prop for the node. According to the docs:

CodeMirror Language Pack Example:

The information added by @detectDelim would already allow the automatic indentation to do a reasonable job

Lezer Docs:

If you put a @detectDelim directive at the top level of your grammar file, the parser generator will automatically detect rule delimiter tokens, and create openedBy and closedBy props for rules where it finds them.

I suspect that as I have used openedBy and closedBy prop for my nodes in the grammar file (I did not use @detectDelim) CodeMirror is able to do the auto indentation for HTML-like tags. I would like to know if this is the case, if yes, what is the expected behaviour (i.e. when exactly will it do the indentation automatically without configuration)?

Any links to the docs that will be helpful are also appreciated. Thanks.

2

Basically the editor will apply the strategy used by delimitedIndent for nodes that start with a token that has a closedBy prop, using a single indentation unit and using the node from the prop as the closing token.

See also this blog post for some general information on the indentation system.

2 Likes
3

Thanks for the information! The blog post made the behaviour more clear :slight_smile:

How do I configure this for my editor? I’m not sure how to configure delimitedIndent . Thanks!

4

You get this automatically for delimited nodes when using a language that provides a parse tree. If you want to customize the indentation of specific nodes, use indentNodeProp. You can look at existing language packages for examples.

1 Like