microsoft / microsoft/monaco-editor
[Bug] CTRL+F / Find does not work for offscreen content
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
The existing code in this existing sample demonstrates the issue:
https://microsoft.github.io/monaco-editor/playground.html?source=v0.52.0#example-extending-language-services-configure-javascript-defaults
Monaco Editor Playground Code
The existing code in this existing sample demonstrates the issue:
https://microsoft.github.io/monaco-editor/playground.html?source=v0.52.0#example-extending-language-services-configure-javascript-defaults
Reproduction Steps
- Visit
https://microsoft.github.io/monaco-editor/playground.html?source=v0.52.0#example-extending-language-services-configure-javascript-defaults - Press CTRL+F (or find in page, etc)
- Type 'jscode' (no quotes)
It seems that anything off screen isn't considered for built-in browser search. My React app has embedded Monaco editors too and I found this same bug. I don't think each app that embeds Monaco should have to hook into the browser find-in-page and try to do custom code.
Actual (Problematic) Behavior
Actual:
Only finds 1 instance of 'jscode'
Actual screenshot:
Expected Behavior
Expected:
Should find 2 instances 'jscode'. If I scroll just a bit lower down and repeat, it finds both:
Additional Context
Please refer to this blog post that has some commentary on find-in-page support these days:
https://textslashplain.com/2024/07/15/browser-features-find-in-page/
I noticed it pointed out https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility as one way to address this. Not sure if Monaco can make use of that?
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
Open the linked Monaco Editor Playground sample and reproduce the issue by pressing CTRL+F and searching for "jscode" before and after scrolling. Trace how the embedded editor's offscreen content is exposed to browser find-in-page; done means the search finds both instances without requiring the user to scroll first.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100