microsoft / microsoft/monaco-editor
[Bug] Undo / Redo does not account for decorations
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?
- Not 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
- The code is set up to do a deltaDecoration call on the word "function" after a 5 second timeout
- Type anything in the middle of the word "function"
- Let the decoration apply
- 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:
After applying decoration:
After undoing:
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
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 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