Ctrl+F in editor is only partially working, which is confusing

Describe the Issue

I saw this forum post: https://forum.freecodecamp.org/t/technical-documentation-page-build-a-technical-documentation-page/564364 It seems the camper is confused by the red highlight appeared in the editor.

And I found that I could replicate the red highlight similar to the one in the forum post by pressing Ctrl+F.

After some discussion with the dev team, it turned out that this is Monaco editor’s “Find” functionality partially displayed. The highlight on the code is shown, but the Find panel on top right is hidden.

Affected Page

Any page with fCC editor

Steps to Reproduce

1. Open an editor on /learn
2. Enter some code
3. Place the cursor on any word in the code
4. Press Ctrl+F

Expected behavior

• If we want to enable Monaco editor’s “find” functionality, show the panel properly

• If we don’t, then:

  • Don’t show the red highlight
  • We could also enable the browser’s default search function with Ctrl+F instead?

Screenshots

Demo on https://microsoft.github.io/monaco-editor/

System

• Device: Laptop
• OS: Windows 10
• Browser: Chrome
• Version: 106.0.5249.119

Additional context

No response

[ShaunSHamilton]

We do explicitly disable (hide) it: https://github.com/freeCodeCamp/freeCodeCamp/blob/6f5b372f75a2f98818702d088c4e7bb62834c4a8/client/src/templates/Challenges/classic/classic.css#L14-L16

[ojeytonwilliams]

@CallmeHongmaybe I think this is resolved.

@sidemt now that https://github.com/freeCodeCamp/freeCodeCamp/pull/48241 is in, can we close this?