Vscode: 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.