microsoft / microsoft/monaco-editor
[Bug] Font size changes after I destroy and create editor instance
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
Monaco Editor Playground Code
let localStorage_fontSize = '';
function createEditor() {
const options = {
value: '<div>Some text goes here</div>',
language: "html",
fontSize: 12,
};
const fontSize = localStorage_fontSize;
if (fontSize && /\d+(\.\d+)?/.test(fontSize)) {
options.fontSize = parseFloat(fontSize);
}
const editor = monaco.editor.create(document.getElementById("editor"), options);
// listen font size change and save new value in local storage
editor.onDidChangeConfiguration((e) => {
if (!e.hasChanged(monaco.editor.EditorOption.fontSize)) {
return;
}
localStorage_fontSize = editor.getOption(monaco.editor.EditorOption.fontSize).toString();
});
return editor;
}
let editor = createEditor();
document.getElementById('create').addEventListener('click', function () {
editor = createEditor();
});
document.getElementById('destroy').addEventListener('click', function () {
editor.dispose();
});
Reproduction Steps
- Open playground
- Increate/decrease font size once
- Click destroy button
- Click create button
Actual (Problematic) Behavior
Font size changes twice. Instead of 13.2px (lets assume we are increasing font size and default value was 12px) it becomes 14.52px.
Expected Behavior
The font size does not change after instance re-creation.
Additional Context
It's easy to reproduce when you use any client router and monaco editor at the same time. In my case it's react-router. When I change font size, navigate away from the page and come back - font size changes one more time.
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 linked Monaco Editor Playground reproduction and run the destroy/create sequence after changing the font size. Trace the editor lifecycle and configuration-change listener shown in the playground code, especially how the saved font size is read and updated. Done means recreating the editor preserves the selected font size without applying the change twice, including after navigation-like disposal and recreation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100