Ctrl+F glitchy when switching between files

[greenStone83]

• p5.js version: 1.5.0

• Web browser and version: Chrome, Firefox, and Edge, most recent

• Operating System: Windows 11

1. Go to this link and go to sketch.js
2. Ctrl+F and type "test". Notice there are 4 instances of "test"
3. Switch to new.js and press the "next" (down arrow) on the Ctrl+F bar
4. Notice it always says 0/4 (it should say 1/2 and 2/2 I assume)
5. Type another "test" in new.js and hit the down arrow
6. Notice it says there are now 7 instances of "test" (it should say 3 I assume)

https://editor.p5js.org/greenStone83/sketches/IQMmFIkYv

[lindapaiste]

This a great bug report!

I found where in the code the "0/4" gets set:

p5.js-web-editor/client/utils/codemirror-search.js

Lines 456 to 459 in 9073487

	var next = cm.state.search.annotate.matches
	.findIndex(s => s.from.ch === cursor.from().ch && s.from.line === cursor.from().line) + 1;
	var text_match = next + '/' + num_match;
	cm.display.wrapper.querySelector('.CodeMirror-search-results').innerText = text_match;

I'm kind of surprised that none of it is React. The text of the DOM element is manually changed when the findNext function is called. I would have to dig into this more to fix it, as I'm not familiar with CodeMirror. I suspect that some of these issues of outdated state could be resolved by generating the search bar markup in React, even if we still have to use react-dom/renderToString() to pass it the CodeMirror openDialog. But I'm not sure that it's even necessary to handle the dialog through CodeMirror, vs. passing the CodeMirror instance as a prop to a React component.

Possibly related to #2081