Rainbow brackets

[imjordanxd]

Check for existing issues

• [X] Completed

Is your feature request related to a problem?

Having bracket pairs colours helps quickly look at code and understand where brackets/blocks/parens start & end

Describe the solution you'd like

Rainbow brackets similar to VSCode

If applicable, add mockups / screenshots to help present your vision of the feature

https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization

[jrmoynihan]

Might as well include the rainbow indent too: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

[tmaxmax]

I think it's necessary for this to be configurable. Personally I don't enjoy bracket colorization, so I'll look for a way to disable them.

[vbhavsar]

This sounds like it should be an extension (when zed supports extensions).

[JustForFun88]

This sounds like it should be an extension (when zed supports extensions).

As I remember, this feature is built-in to VSCODE, am I wrong? And they did it for performance purposes

[inoas]

This would be awesome to have.

[TimTheBig]

Are their any plans for this to be add, it is a big legibility improvement? If not would it be possible to make an extension for this functionality.

[inoas]

I think this is a good thing for the core.

The specific langs LSPs could/should expose what counts as brackets like do/end for/end fn/end {} () [] #() and whatnot. If they don't just do regular braces ({}, {}, ())

[kiran-4444]

Hey, I’d like to start on this issue if no one’s already working on this.

[TimTheBig]

It's been two years so you should be good to work on it. I would be willing to help test.

[Dageus]

Hey, would it be ok if me and @bcmeireles worked on it as well? We've been analyzing it for a while and would like to pick up this feature if possible.

[kiran-4444]

Hello @Dageus @bcmeireles I don't mind collaborating with you both on this.

[TimTheBig]

@kiran-4444 this would be a good draft pull request.

[Dageus]

Hey @kiran-4444 sorry for the delay in the response Unfortunately we won't be able to work with you on the feature, since this is for a college project, and the professor said since this is a rather simple feature we can't cooperate with other contributers Is it okay with you if we work on this feature? If you've started working on it already we'll open a PR after yours so you'll have priority

[mikayla-maki]

@Dageus It may not be as simple as y'all hope! I suggest y'all both continue and open draft PRs so we can check on them :)

[kiran-4444]

Hey @kiran-4444 sorry for the delay in the response Unfortunately we won't be able to work with you on the feature, since this is for a college project, and the professor said since this is a rather simple feature we can't cooperate with other contributers Is it okay with you if we work on this feature? If you've started working on it already we'll open a PR after yours so you'll have priority

@Dageus @bcmeireles No problem, you can continue on this and I'll work on some other issue. Good luck with your project!

[bcmeireles]

@kiran-4444 Thank you for this. We will be working on it and keeping everyone updated throughout the process.

[bcmeireles]

We've been looking through it and found some interesting things, mainly in crates/editor/src/editor.rs.

We're thinking about doing an approach like the highlight_matching_bracket.rs file does for the highlight but for coloring but unsure if it's the best approach.

We've also looked into the brackets at crates/language/src/language.rs and the handle_input functions at crates/editor/src/editor.rs and think they could be interesting for such an approach, or at least a similar one and would like to get some insights on what everyone thinks or if we're missing any possibly good parts of the codebase to look at.

Thanks!

[Dageus]

After reading a little bit more, I think the render function in the crates/editor/src/editor.rs is the correct place to incorporate and call the rainbow brackets function, since that's where the highlighting and styling functions are called, and if so, we could go ahead and start implementing.

Thanks!

[bcmeireles]

We figured out that the shape_line and shape_text functions of WindowTextSystem inside the gpui/src/text_system.rs file are responsible for painting the text with colors and decorators onto the editor. We are currently building an AST, inspired by VSCode's implementation and it's benefits. We will keep working on this and on linking everything together and will soon submit a draft PR with some of our progress

[bcmeireles]

Is everyone ok with the approach being taken and/or does anyone have any suggestions regarding how to continue?

[TimTheBig]

As long as current themes still work and can add colors with little effort it should be good.

[bcmeireles]

Yes, we plan to not break any themes, we've added the option to customize the colors but that's built upon the current theme implementation. I was referring more to the technical approach itself

[ComplexPlane]

Is there a reason for building a custom AST rather than using the tree-sitter ASTs? If using tree-sitter, I'm not sure if you'd use the per-language ones or maybe some generic one just for pair parsing?

[bcmeireles]

Different languages could have different behaviours for brackets and the logic could be used for more than rainbow brackets, at least that was our thought process. Do you have a different idea for the approach?

[ComplexPlane]

It'd probably be useful for the tree-sitter-involved Zed developers to chime in. As far as I'm aware, tree-sitter already incrementally parses full parse trees from buffers for each language, and is used for syntax highlighting, autoindent, and other syntax-aware features. From my uninformed outsider perspective, the tree-sitter framework sounds like it may be appropriate for rainbow brackets as well? Probably worth checking since it seems like a pretty core part of this editor.

[bcmeireles]

We're also unaware of that implementation for tree-sitter, where is that and how does it work? If any tree-sitter-involved Zed developer could let us know about it if it even is something that we could use for it we'd like to know and colaborate to get the rainbow brackets implemented that way

[inoas]

Imho it would be great for other nesting in languages such as Elixir or Ruby.

[peekxc]

It looks like Zed already supports rainbow (or theme-colored) indent guides in its default settings.

For example, on my editor, changing the background coloring to "indent_aware" on One Light theme yields:

Changing just the color yields:

I realize this isn't braces, but a few people mentioned indents

[inoas]

I like these much more anyway, vscode has them too (background indent rainbows)

[inoas]

great however is a visual guide where a block starts and ends.

see the yellow line below |> prepared_statement.append_sql(...

[AurevoirXavier]

Rainbow bracket is a built-in feature of VSCode now (no longer a plugin). I highly recommend to integrate this into Zed.

[spenat28]

For me, it's decision making change.

Till we have rainbow brackets, i "have" to stay in VS Code, and i would really really like to switch from it.

Zed is superior editor for me in most ways already, but i am faster in reading code with rainbow brackets ... it makes a all the difference in longer HTML, JS, CSS for me, and till then i am still subconsciously switching back to VSCode ... :( ... once you get used to it, it's hard to switch from it.

Can we plan this to some milestone?