[Bug] CTRL+F / Find does not work for offscreen content

[chadsowald]

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

1. Visit
   https://microsoft.github.io/monaco-editor/playground.html?source=v0.52.0#example-extending-language-services-configure-javascript-defaults
2. Press CTRL+F (or find in page, etc)
3. 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?

[qirong77]

Why is this a bug?
As far as I understand, the Monaco Editor typically renders only about 30 lines of code to the DOM tree, depending on the size of the editor container. Consequently, the browser cannot search all the results because the full text is stored as a JavaScript string (or piece tree specifically). Only the portion of the text that is rendered to the DOM tree can be searched by the browser.

[chadsowald]

@qirong77 It's a bug in the sense that the browser search is incomplete / inaccurate and it doesn't make sense for individual apps that embed Monaco to all have to separately fix/support search within Monaco.

Is your thinking that users can press CTRL+F within Monaco if that's where they expect the text to be that they're looking for? If so, I would say that works for more advanced users and only in some situations. Additionally, some apps may embed multiple Monaco editors on a single page and it might not be obvious even to an advanced user which editor may have the text they're searching for.

[qirong77]

@qirong77 It's a bug in the sense that the browser search is incomplete / inaccurate and it doesn't make sense for individual apps that embed Monaco to all have to separately fix/support search within Monaco.

Is your thinking that users can press CTRL+F within Monaco if that's where they expect the text to be that they're looking for? If so, I would say that works for more advanced users and only in some situations. Additionally, some apps may embed multiple Monaco editors on a single page and it might not be obvious even to an advanced user which editor may have the text they're searching for.

I got you , Monaco editors are designed to work with vscode, which operates with just one instance of the Monaco editor. Therefore, this issue may be beyond their usual scope of responsibilities, I guess.
Additionally, there's a known bug that many users, including us, encounter: having multiple editors with different themes on a single page, which still remains unfixed. 😂