microsoft / microsoft/monaco-editor

[Bug] Folding controls show inconsistently for long lines

Open
#3,397 2 comments 2 reactions 1 assignee View on GitHub

@aeschli is already working on this.

Since Dec 13, 2022.

bug folding
Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Motivation

Wanting to collapse a very long line representing a base64-encoded image

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
    (havent attempted configuring a custom folding lang on vscode.dev, but could be a bug regardless)
Reproducible in the monaco editor playground?
Monaco Editor Playground Code
monaco.languages.register({
	id: 'foldLanguage',

});

const n = 12_000
const long_line = 'a'.repeat(n)

var value = `1. Hit F1 to bring up the Command Palette
2. Type 'fold'
3. Choose 'Fold All Block Comments' or 'Fold All Regions'

5. ${long_line}
6. comment1
7. comment1

9. unfoldable text
10. unfoldable text
11. unfoldable text

13. comment2
14. comment2
15. comment2
16. comment2
17. comment2

19. foldable text
20. foldable text
21. foldable text

23. region1
24. region1
25. region1

27. region2
28. region2
29. region2`;

monaco.editor.create(document.getElementById('container'), {
	value: value,
	language: 'foldLanguage',
    wordWrap: 'on',
    showFoldingControls: 'always'
});

monaco.languages.registerFoldingRangeProvider('foldLanguage', {
	provideFoldingRanges: function (model, context, token) {
		return [
			// comment1
			{
				start: 5,
				end: 7,
				kind: monaco.languages.FoldingRangeKind.Comment
			},
			// comment2
			{
				start: 13,
				end: 17,
				kind: monaco.languages.FoldingRangeKind.Comment
			},
			// foldable text
			{
				start: 19,
				end: 21
			},
			// region1
			{
				start: 23,
				end: 25,
				kind: monaco.languages.FoldingRangeKind.Region
			},
			// region2
			{
				start: 27,
				end: 29,
				kind: monaco.languages.FoldingRangeKind.Region
			}
		];
	}
});
Reproduction Steps

Visit the playground

Actual (Problematic) Behavior

the long line filled with a's does not have a fold control next to it, despite being a fold region

note that it is still collapsable via hotkeys ie ctrl-shift-[

Expected Behavior

the long line filled with a's has a working fold control next to it

Additional Context

Note that you may have to configure n depending on your viewport size,

also a value of n that is close to the threshold seems to lead to scrolling spuriously showing the fold controls and not

https://user-images.githubusercontent.com/31808950/200408595-35da5381-57b1-498a-a1f9-9cb8ec55b145.mp4

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.