fix: reset search match counter when switching files (issue #3361)

[kammeows]

Fixes #3361

Changes:

I have added a new function named watchFileChanges:

• It monitors changes in the currently opened file within the editor.
• It uses a MutationObserver to detect changes in the file name (.editor__file-name span).
• If a change is detected while the search dialog is open, it calls the startSearch function again to ensure that the search results are updated for the new file.
• If the search dialog is closed, the function stops observing file changes to improve performance.
• To manage this, I implemented a setInterval check to continuously track whether the search dialog is open or closed.

I have also modified the startSearch function:

• The function now checks if the search dialog is open before executing any search-related logic.
• The first few lines (that I have added) retrieves the file name from the UI; if the last filename and current file name are different, then state.lastFileName is updated to the new file name, the stored search query is cleared and the search results are updated.

Another change I have made is in the SearchState constructor function where I have added the following to ensure that lastFileName is always set to the current file opened:

• this.lastFileName = document.querySelector('.editor__file-name span')?.innerText || null;

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[dsaw]

Based off my limited understanding of the codebase, changing the file causes a action update called SET_SELECTED_FILE.
Is it feasible to trigger the clearSearch/ find/replace command of the Editor instance from where the file change events are dispatched?
I could be off here as the issue seems to be mainly code mirror functionality being outside the realm of React, just curious if this is possible.

Using state events instead of mutation tracking is simpler and more performant (if at all feasible that is) , and considering the design tradeoffs would be great here. Mutation is mostly intended for tracking changes in low level DOM nodes, as updating the file is a well defined state transition, hooking the search functionality on change of state would be preferable.

[kammeows]

Yes, initially my approach was to trigger the clearSearch function, but turns it out it wasn't that straight forward because the clearSearch function needs access to the right cm instance, and the function should ideally be called when the user switches to a different file.

@raclim if there’s another reliable and better way to solve this problem, I’d be happy to refine my approach accordingly.

[raclim]

Thanks for your work on this! I removed a few extra comments that I feel could be self-explanatory from the code, but I think this overall feels good to me!

[Jatin24062005]

@raclim ,I noticed that issue #3367 was closed, but the features we discussed in my PR #3368 haven't been updated yet. Since the issue is still present, do you think we should reopen this PR and make those changes there, or should I submit a new PR /Reopen to address them?