microsoft / microsoft/monaco-editor

[Bug] Undo / Redo does not account for decorations

Open
#4,949 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

As it is, undo / redo is completely unusable when applying decorations.

Here is an old issue that essentially requested the same thing from a couple of years ago, but was marked as something the team did not plan to address.

https://github.com/microsoft/monaco-editor/issues/2933

The decorations have evolved quite a bit over the past couple years and this would be a worthwhile addition for anyone using decorations.

Also, the Undo / Redo functionality as it is does not have many helpful API's available. We cannot look at the undo/redo stack at all (unless I'm missing something?), so any custom undo/redo functionality is impossible without completely overriding the action, which is what I currently plan to do for my use case.

Monaco Editor Playground Code
var jsCode = [
	'"use strict";',
	'function Person(age) {',
	'	if (age) {',
	'		this.age = age;',
	'	}',
	'}',
	'Person.prototype.getAge = function () {',
	'	return this.age;',
	'};'
].join('\n');

var editor = monaco.editor.create(document.getElementById('container'), {
	value: jsCode,
	language: 'javascript'
});

var decorations = editor.deltaDecorations(
	[],
	[
		{
			range: new monaco.Range(3, 1, 5, 1),
			options: {
				isWholeLine: true,
				linesDecorationsClassName: 'myLineDecoration'
			}
		},
		{
			range: new monaco.Range(7, 1, 7, 24),
			options: { inlineClassName: 'myInlineDecoration' }
		}
	]
);
setTimeout(() => {
	editor.getModel().deltaDecorations(
		[],
		[{
			range: new monaco.Range(7, 27, 7, 35),
			options: {inlineClassName: 'myInlineDecoration'}
		}] 
		)

}, 5000)
Reproduction Steps
  1. The code is set up to do a deltaDecoration call on the word "function" after a 5 second timeout
  2. Type anything in the middle of the word "function"
  3. Let the decoration apply
  4. Undo
Actual (Problematic) Behavior

Your text edit will be undone, and the decoration will be applied only to the text before you started typing

Before appyling decoration:
Image

After applying decoration:

Image

After undoing:

Image
Expected Behavior

Undo should revert the deltaDecoration call, the text should remain as "fun123456ction", and should have no decoration

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 Monaco Editor Playground reproduction and trace how deltaDecorations interacts with the editor's undo and redo actions. Compare the current behavior with the expected sequence: undo should preserve “fun123456ction” while removing the later decoration. Done means the reproduction no longer leaves the text or decoration in the wrong state, with relevant undo/redo behavior covered by tests if the existing test entry point is identified.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.