microsoft / microsoft/monaco-editor
Fold label
Open
Nobody has claimed this yet.
feature-request
folding
- Dominant language
- JavaScript
- Stars
- 46.8k
- Forks
- 4.1k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 1
Description
This is a feature request:
- it would be great if there were a way to define the 'label' for a folded line
For example when folding imports instead of showing the first import I would like to just show 'import ...'.
Here is some code to help visualize
monaco.languages.register({
id: "foldLanguage"
});
var value =
`package com.androidpal.host;
import android.app.Activity;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.app.NavUtils;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;
import com.google.android.gms.auth.api.signin.GoogleSignIn;
import com.google.android.gms.auth.api.signin.GoogleSignInAccount;
import com.google.android.gms.auth.api.signin.GoogleSignInClient;
import com.google.android.gms.auth.api.signin.GoogleSignInOptions;
import com.google.android.gms.common.api.ApiException;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.AuthCredential;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;
import com.google.firebase.auth.GoogleAuthProvider;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;
import org.greenrobot.eventbus.EventBus;
import org.greenrobot.eventbus.Subscribe;
import org.greenrobot.eventbus.ThreadMode;
import java.lang.reflect.Field;
import java.util.Map;
public class AndroidPalActivity extends AppCompatActivity {
private boolean mIsProfiling;
private DrawerLayout mDrawerLayout;
private FirebaseAuth mAuth;
private ActionBarDrawerToggle mDrawerToggle;
private GoogleSignInClient mGoogleSignInClient;
public void someMethod() {
// this is the method body
}
}`
monaco.editor.create(document.getElementById("container"), {
value: value,
language: "foldLanguage"
});
monaco.languages.registerFoldingRangeProvider("foldLanguage", {
provideFoldingRanges: function (model, context, token) {
const ranges = [];
const lines = model.getLinesContent();
let rangeStart = -1;
let currentLine = 1;
for (const line of lines) {
if (rangeStart === -1 && line.startsWith('import')) {
rangeStart = currentLine;
}
if (!line.trim()) {
currentLine++;
continue;
}
if (!line.startsWith('import')) {
if (rangeStart !== -1) {
const foldingRange = {
start: rangeStart,
end: currentLine - 1,
kind: 'imports'
};
ranges.push(foldingRange);
rangeStart = -1;
}
}
currentLine++;
}
return ranges;
}
});
When folded it shows:

(the yellow highlight is mine)
I would like it instead to show:

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the registerFoldingRangeProvider example and its foldingRange object, then trace how the editor renders the returned range. Determine where a custom label could be represented and exposed; done means folded import ranges display the requested text without changing their range behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100