Support folding ranges inside a line

[TomasHubelbauer]

Hey, I have read through the folding-related issues (like #3422, the linked ones and some other ones related to the FoldingRangeProvider API specifically), but I don't seem to have come across a conversation about inline folding ranges.

Has this been discussed - or is it okay to start a discussion on the topic now?

I am interested in these, because I'd like to improve readability of MarkDown documents (using an extension) by collapsing MarkDown link targets (the URLs - which can be quite long) and instead linkifying the text range (using a DocumentLinkProvider).

Researching the FoldingRange API though, I can see it only has start and end lines, not Positions. Is this an immutable deliberate design decision or something open to alternative with enough support behind it?

I think other possible use cases could be folding of ternary expression branches, one-liner if statements and stuff like that. (But I'm mostly interested in my use-case described above.)

[aeschli]

We currently have no plans for inline foldings. It would require some major work on the editor widget side.

[Tiedye]

This would allow js/ts folds to look nicer as well:

if {⋯
}

becomes

if {⋯}

Just have to figure out a UI for the possible multiple folds on one line.

[Will-Wrightwa]

This would enable some Really Awesome language aware functionality. 🔥
Here are some examples.

• markdown
  • fold url link destination
• typescript:
  • hide types
• javascript:
  • fold inline arrow functions
  • fold inline object literals
  • fold function arguments
• python: fold list comprehension
• jsx / html:
  • fold away element props
  • fold away element children
  • fold to self Closing Tag

[jeff-hykin]

We currently have no plans for inline foldings. It would require some major work on the editor widget side.

@aeschli , would it be possible to support this at the token level (rather than character level)? Or could you go into a little more depth about the work that would be required?

Taking the tokens (represented by <span> elements), adding visibility: hidden; position: absolute; to their style affectively collapses them. By inserting a + inline button in front of the first span, this would make for an inline toggle button.

Doing this for the first/last line of a multi-line selection, and then using the existing line-folding would cover both single and multi-line cases with essentially just a CSS class toggle and a button.

This seems pretty straightforward, but I'm not sure what other challenges might be involved, like getting the span elements based on cursor selection.

[aeschli]

If you look at the current implementation you see that we have code to convert from document offsets to view model offsets and vice versa. The view model knows which line (or part of the line) is shown on the screen and is used for rendering but also for things like cursor movement.
To enable hidden ranges that view model needs to be extended too.

[jcarpenter]

Huge +1. I'd love to use VSCode for all my Markdown editing needs, but first need collapsing of URLs and footnotes. Here's a screengrab of a workflow I recently put together in Typora (a web-based Markdown editor). I use a few CSS styles to collapse the contents of ==...== mark tags, then reveal on hover and expand on click.

[michfield]

typescript:

• hide types

I want it :)

[CraftLogan]

This would be awesome. It could allow you to fold up all the utility classes in a framework like tailwind css. It would look something like this with the '...' representing the folded classes.

<div class="...">
      <div class="..."></div>
</div>

This would allow you to see the structure of the html instead of just all the utility classes.

[sawanm9000]

I've been wanting to do this for years.

This might be related to #3352

[moalamri]

I've been wanting to do this for years.

This might be related to #3352

Is this real or just some prototype? I'm trying to do/have the same :)

[moalamri]

Hi @CraftLogan @sawanm9000 There was no available API to implement this, but I used decorator API in a “hacky” way to achieve the experience of inline folding, I published it here:
https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold

@CraftLogan thanks for the motivation, it is really useful with tailwind

[CraftLogan]

@moalamri This is really cool, I think it will be awesome to add a command to show and unshow all classes with a shortcut.

[moalamri]

@CraftLogan Awesome, Thanks for the suggestion, I'll work on it

[bhrutledge]

@moalamri @CraftLogan Could y'all move this discussion to the issue tracker on the extension repo? https://github.com/moalamri/vscode-inline-fold

[fehmi]

Up!

[ihdavids]

Upvoted again.
This is not the first request for this it seems.

I just requested it again here:
#154869

Before I requested it I didn't find anything else, but after I seem to be running into quite a few requests for the same feature. It met the 20 plus votes for this requirement quite some time ago. I sincerely hope this gets implemented.

[mitsukuri]

Please don't outsource this to extension developers, inline folding must be in the core feature set together with selection transposition, alignment and sorting, unicode glyph maps, path autocompletion, pretty printers (well, at least JSON!), insert/overtype switch and other useful little things, because today's extension landscape looks like a park of 18-wheelers whose huge reverberating box trailers deliver a single lonesome cake each.

[aeschli]

Yes, this can only be implemented in core, but there's currently no such work planned.

[starball5]

Related on Stack Overflow: Is it possible to collapse custom regions in the middle of lines?

[argarcia-ottersoft]

Upvoted again for multiline folding

[AphLute]

hide types

@Will-Wrightwa @michfield I've forked @moalamri's to publish an extension that folds types based on the TypeScript AST:
https://marketplace.visualstudio.com/items?itemName=SuncappedGames.typescript-fold