Highlight and surround a word with angled brackets in languages `typescript` and `tsx`

[jlarmstrongiv]

Check for existing issues

• [X] Completed

Describe the feature

I would like to highlight a word and press < to surround it with angled brackets, similar to how you can highlight a word and surround it with braces by pressing {.

TypeScript makes heavy use of Type<Generic>, so having that autocomplete would be nice

These settings are defined in:

• https://github.com/zed-industries/zed/blob/f60bebb93ba9cce6e17949450cdba56a1e14dc7c/crates/zed/src/languages/typescript/config.toml
• https://github.com/zed-industries/zed/blob/f60bebb93ba9cce6e17949450cdba56a1e14dc7c/crates/zed/src/languages/tsx/config.toml

And may be a relatively simple change

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

No response

[jlarmstrongiv]

Related to

• https://github.com/zed-industries/zed/issues/4815
• https://github.com/zed-industries/zed/issues/5267

[Moshyfawn]

This comment contains the source links, but it is already a language-dependent feature.

You can open a markdown file right now and press shift-< or shift-{ with some text selected to see it in effect.

[jlarmstrongiv]

@Moshyfawn that’s a great feature! I noticed it worked in markdown, but not typescript, tsx, or astro. Is there a way to enable that language-dependent feature in other languages?

[notpeter]

Hi @jlarmstrongiv. I dug into this. This appears to be controlled by the close = true line for < > in the config.toml brackets section for each language. For example compare typescript to markdown:

https://github.com/zed-industries/zed/blob/c20a1ee03275379e61df8345a826dabd8e34134d/crates/languages/src/typescript/config.toml#L10-L10

https://github.com/zed-industries/zed/blob/c20a1ee03275379e61df8345a826dabd8e34134d/crates/languages/src/markdown/config.toml#L9-L9

Currently this setting controls two behaviors:

1. Nothing selected: Inserts closing > after you type <
2. Something selected: Wraps selection in < and > when you type <.

This means if we enable the behavior we're looking for (great!) we also get autoclosing <> (not great), because then any expression with a less than < operator will get an extraneous closing tag.

I'll leave this open as an enhancement request. In the future we may to support enabling the second behavior without the first, but at the moment that's where we're at.

You can see this behavior by building from source with the following diff:

diff --git a/crates/languages/src/typescript/config.toml b/crates/languages/src/typescript/config.toml
index ca115622c..2fdc007ec 100644
--- a/crates/languages/src/typescript/config.toml
+++ b/crates/languages/src/typescript/config.toml
@@ -7,7 +7,7 @@ brackets = [
     { start = "{", end = "}", close = true, newline = true },
     { start = "[", end = "]", close = true, newline = true },
     { start = "(", end = ")", close = true, newline = true },
-    { start = "<", end = ">", close = false, newline = true, not_in = ["string", "comment"] },
+    { start = "<", end = ">", close = true, newline = true, not_in = ["string", "comment"] },
     { start = "\"", end = "\"", close = true, newline = false, not_in = ["string"] },
     { start = "'", end = "'", close = true, newline = false, not_in = ["string", "comment"] },
     { start = "`", end = "`", close = true, newline = false, not_in = ["string"] },