microsoft / microsoft/monaco-editor
[Bug] Guidelines not rendering in correct positions
Open
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
No response
Monaco Editor Playground Code
No response
Reproduction Steps
- Get the latest source from the repository. The follwing will download the package as a
.tgzfile into your working directory and extract it:
npm pack monaco-editor
tar xvf monaco-editor-0.52.0.tgz
- Paste the code below into an
index.htmlfile in the same directory where you downloaded the code to:
<!DOCTYPE html>
<html>
<head>
<title>Monaco Test</title>
<link rel="stylesheet" type="text/css" data-name="vs/editor/editor.main" href="package/min/vs/editor/editor.main.css">
<style>
/* In our codebase this is set globally and cannot be changed */
* {
font-family: arial, serif;
font-size: 14px;
}
/* I used this to reset all styles that might colide with editor.main.css. This worked beautifully. */
.monaco-editor, .monaco-editor *, .monaco-diff-editor, .monaco-diff-editor * {
all: revert;
}
</style>
</head>
<body>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script> var require = {"paths": {"vs": window.location.origin + "/monaco-editor-0.52.0/dev/vs"}};</script>
<script src="package/min/vs/loader.js" language="javascript" type="text/javascript"></script>
<script src="package/min/vs/editor/editor.main.js" language="javascript" type="text/javascript"></script>
<script>
var editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '\t{', '\t\tconsole.log("Indentedline");', '\t}', '}'].join('\n'),
language: 'javascript',
});
</script>
</body>
</html>
- Open the
index.htmlfile using VSCode LiveServer. - Then the problem should already be appearent.
Actual (Problematic) Behavior
The guideline is drawn in the wrong spot:
Expected Behavior
The guideline should be drawn like this:
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 supplied index.html reproduction, especially package/min/vs/editor/editor.main.css and package/min/vs/editor/editor.main.js, and compare the guideline position with and without the global font rules and all: revert reset. Reproduce it through VSCode LiveServer, then trace how those styles affect guideline placement; done means the guideline matches the expected position without breaking the reset scenario.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100