microsoft / microsoft/monaco-editor

[Bug] ExecuteEdits inserts code into folded/collapsed area making it invisible when appending at the end of editor

Open
#4,819 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
Monaco Editor Playground Link

Editor link: Monaco Playground

Monaco Editor Playground Code
const value = /* set from `myEditor.getModel()`: */ `for(let x = 0; x < 5; x++){
	const demo = () => {
	for(let x = 0; x < 5; x++){
	const demo = () => {
	const obj = {
	}	
	}
}
	}}`;

// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
	value,
	language: "javascript",
	automaticLayout: true,
});

setTimeout(() => {
	const editor = myEditor;
	const editorModel = editor.getModel();
 const lineCount = editorModel.getLineCount();

   const range = new monaco.Range(lineCount + 1, 0, lineCount + 1, 0);

      editor.executeEdits("", [
        {
          range,
          text: `${"\n"}      if (hideEditorLoadingMessage) {
        dispatch(EditorLoadingMessageActionsEnum.SET_MESSAGE, undefined);
      }`,
          forceMoveMarkers: true,
        },
      ]);
    // const selectionRange = new monaco.Range(0, 0, ((editor.getModel()?.getValue() || "").split("\n").length) + 1, 0)
    //   editor.setSelection(selectionRange);
    //   editor.revealLine(editorModel.getLineCount());
    //   editor.focus();
window.alert("Done")
}, 5000)
Reproduction Steps
  1. To reproduce, please use the code set the "JavaScript" part of the playground as provided above
  2. Insert following snippet into the editor instance (right section) - please ignore the "no sense" kind of code :)
for(let x = 0; x < 5; x++){
	const demo = () => {
	for(let x = 0; x < 5; x++){
	const demo = () => {
	const obj = {
	}	
	}
}
	}}
  1. Collapse / fold the 2nd area at line 8 (BEFORE 5s when setTimeout kicks in, before you see modal window) - see attached screenshot for how it should look after this step 3

Image

  1. Let the controlling JS code do the operation declared in setTimeout:
setTimeout(() => {
	const editor = myEditor;
	const editorModel = editor.getModel();
        const lineCount = editorModel.getLineCount();
        const range = new monaco.Range(lineCount + 1, 0, lineCount + 1, 0);

      editor.executeEdits("", [
        {
          range,
          text: `${"\n"}      if (hideEditorLoadingMessage) {
        dispatch(EditorLoadingMessageActionsEnum.SET_MESSAGE, undefined);
      }`,
          forceMoveMarkers: true,
        },
      ]);

window.alert("Done")
}, 5000)
Actual (Problematic) Behavior

As seen from the controlling JS code, I'm appending new line and then some JS code. But because the last folding area is collapsed BEFORE this execution, the appended code is invisible - it is part of the collapsed area and there is no indication to user that something was inserted into the editor. So the editor looks like if nothing has changed.

If I expand the collapsed section, the appended code is visible

Expected Behavior

Newly appended code should be visible even if it is appended after collapsed section

Additional Context

No response

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.

Research direction

Start with the linked Monaco Editor Playground and reproduce the behavior using the provided JavaScript code, folded region, and executeEdits call. Trace how appending at lineCount + 1 interacts with the collapsed folding region. Done means newly appended code is visible, or its insertion is otherwise indicated, without requiring the folded section to be expanded.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.