microsoft / microsoft/monaco-editor
[Bug] Problem using Monaco 'wordWrapColumn', editor scrolls outside of view
@alexdima is already working on this.
Since Mar 8, 2023.
- Dominant language
- JavaScript
- Stars
- 46.8k
- Forks
- 4.1k
- Avg merge
- 17h 58m
- Merged PRs (30d)
- 1
Description
Edit by @hediet See https://github.com/microsoft/monaco-editor/issues/3587#issuecomment-1441530602 for playground lik.
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
Additional info
I don't know if the cause is using it in a Webcomponent, or some other setting. Also it only is broken in Chrome (and derivates). It works in Safari and Firefox.
I also don't know if it is a Monaco Error, a error of me or a Chrome Bug. Maybe someone can help where we need to look (for example who is responsible for this scrolling).
I already also created a Chrome Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1416178
Reproduction Steps
Much more simple example is now below:
https://github.com/microsoft/monaco-editor/issues/3587#issuecomment-1441530602
has nothing to do with webcomponents nor my designer. It's a problem when "wordWrapColumn" is set and the line is to long.
1.) Go to (the link is only so big, it contains the content of the designer): https://node-projects.github.io/web-component-designer-demo/index.html?html=%3Cdiv%20style=%22box-sizing:border-box;pointer-events:none;display:grid;position:relative;width:1500px;height:900px;background:rgb(255,%20255,%20255);%22%3E%20%3Cdiv%20style=%22box-sizing:border-box;pointer-events:none;display:inline-block;width:1500px;height:712px;position:relative;grid-area:1%20/%201%20/%20auto%20/%20auto;justify-self:stretch;align-self:stretch;margin:0px%200px%20188px%200px;%22%3E%20%3Cdiv%20style=%22box-sizing:border-box;pointer-events:none;display:inline-block;width:1408px;height:104px;position:absolute;left:50px;top:572px;%22%3E%20%3Cdiv%20style=%22box-sizing:border-box;pointer-events:none;display:inline-block;width:148px;height:417px;position:absolute;left:187px;top:-156.500015px;background:rgb(224,%2031,%2031);%22%3E%3C/div%3E%20%3C/div%3E%20%3C/div%3E%20%3C/div%3E
2.) Switch to Code
3.) Go to the End of Line 4
4.) Enterer some characters
See also this Video: https://watch.screencastify.com/v/tnSRGDiFCvSDwALTzio4
Actual (Problematic) Behavior
Editor is moved outside of the screen via Scroll Left
Expected Behavior
Editor should work as expected
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.
Assessment
This issue has not been assessed yet.