Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support folding ranges inside a line #50840

Open
TomasHubelbauer opened this issue May 30, 2018 · 21 comments
Open

Support folding ranges inside a line #50840

TomasHubelbauer opened this issue May 30, 2018 · 21 comments
Labels
editor-folding Editor code folding issues feature-request Request for new features or functionality
Milestone

Comments

@TomasHubelbauer
Copy link
Contributor

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.)

@vscodebot vscodebot bot added editor editor-contrib Editor collection of extras labels May 30, 2018
@octref octref added editor-folding Editor code folding issues and removed editor editor-contrib Editor collection of extras labels May 30, 2018
@aeschli
Copy link
Contributor

aeschli commented Jun 6, 2018

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

@aeschli aeschli changed the title Inline FoldingRange Support folding ranges inside a line Jun 6, 2018
@aeschli aeschli assigned alexdima and unassigned aeschli Jun 6, 2018
@alexdima alexdima added the feature-request Request for new features or functionality label Jun 11, 2018
@alexdima alexdima added this to the Backlog milestone Jun 11, 2018
@Tiedye
Copy link

Tiedye commented Feb 21, 2019

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
Copy link

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
Copy link

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.

@alexdima alexdima removed their assignment Aug 5, 2019
@aeschli
Copy link
Contributor

aeschli commented Aug 19, 2019

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
Copy link

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.

references-workflow-1

@michfield
Copy link

typescript:

  • hide types

I want it :)

@CraftLogan
Copy link

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
Copy link

sawanm9000 commented Dec 12, 2020

I've been wanting to do this for years.

autofoldclasses

This might be related to #3352

@moalamri
Copy link

I've been wanting to do this for years.

autofoldclasses

This might be related to #3352

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

@moalamri
Copy link

moalamri commented Jun 3, 2022

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
Copy link

@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
Copy link

moalamri commented Jun 4, 2022

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

@bhrutledge
Copy link

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

@fehmi
Copy link

fehmi commented Jun 24, 2022

Up!

@ihdavids
Copy link

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
Copy link

mitsukuri commented Aug 11, 2022

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
Copy link
Contributor

aeschli commented Aug 26, 2022

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

@starball5
Copy link

@argarcia-ottersoft
Copy link

Upvoted again for multiline folding

@AphLute
Copy link

AphLute commented Jan 19, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
editor-folding Editor code folding issues feature-request Request for new features or functionality
Projects
None yet
Development

No branches or pull requests