Live Loading of 'Find' Results

[apsinghdev]

Increasing Access

Currently, Editor's Find functionality doesn't show results live. Results are shown only when the user clicks on one of the buttons. This not only confuses the User but also make the accessibility of the editor Difficult.

The aim of this Idea is to make the 'Find' functionality more User Friendly by making it load the Number of search results Live.

The Current functionality is -

2023-11-17.17-15-01.mp4

The idea to enhance it is ( something like this ) -

2023-11-17.17-16-03.mp4

Feature enhancement details

This will -

• Instantly highlight search matches and provide users with real-time feedback for quick code navigation.
• Navigate through code seamlessly as live loading updates 'Find' results in real time, allowing swift identification and jumping to relevant sections.
• Dynamically update highlighted matches, reducing cognitive load and offering immediate visual cues for improved code comprehension.
• Improve accessibility by offering beginners immediate visual feedback, facilitating effective code exploration and attracting a broader audience to the p5.js Web Editor.

if @lindapaiste @raclim agree? I am down to work on it

[mhsh312]

I suppose the way to go by is adding functionality to the startSearch function (function that is called on the change of input):

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

Lines 321 to 335 in c448094

	function startSearch(cm, state, query) {
	state.queryText = query;
	state.lastQuery = query;
	state.query = parseQuery(query, state);
	cm.removeOverlay(state.overlay, state.caseInsensitive);
	state.overlay = searchOverlay(state.query, state.caseInsensitive);
	cm.addOverlay(state.overlay);
	if (cm.showMatchesOnScrollbar) {
	if (state.annotate) {
	state.annotate.clear();
	state.annotate = null;
	}
	state.annotate = cm.showMatchesOnScrollbar(state.query, state.caseInsensitive);
	}
	}

Currently, only the findNext function (that gets called on pressing Enter) has the functionality to update the UI:

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

Lines 463 to 467 in c448094

	var num_match = cm.state.search.annotate.matches.length;
	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;

So adding this functionality to startSearch should do the trick. There might be edge cases to this approach that would need to be taken care though as I have not looked into this deeper.

I would be happy to be assigned this issue.

[lindapaiste]

@mhsh312 Looks like you are on the right track!

For the current v5 version of the editor we copied the CodeMirror search plugin code and modified it, which is the file that you are looking at. What you are proposing is what I would do. It seems like they are already computing the number of matches and we just need to be modifying the HTML in the right function.

FYI the "total results" count was actually one of the hurdles that I ran into when trying to migrate code to v6 because they no longer calculate this at all, for performance reasons. So we need to come up with our code for that.
https://discuss.codemirror.net/t/getting-search-matches-count/6628
https://discuss.codemirror.net/t/get-number-of-hits-of-searchquery/3939
https://github.com/processing/p5.js-web-editor/pull/2367/files#diff-709e14fb2cb0dd34e14c8185bc8a986010fc7e2bd9d995df3f6c413ecb7ee6cd

[mhsh312]

FYI the "total results" count was actually one of the hurdles that I ran into when trying to migrate code to v6 because they no longer calculate this at all, for performance reasons. So we need to come up with our code for that.

Seems like trouble. The first thread that you mentioned actually has a way around this that uses a loop to count the results in case you didn't see it.
https://discuss.codemirror.net/t/getting-search-matches-count/6628/7

Although I should probably read into documentation about v6 before brainstorming a fix because I didn't even know about Codemirror before I started contributing here so I only understand the amount that has been used in the p5 editor. 😅

I'll work on the current issue for now.

[mhsh312]

hey @lindapaiste I finished the code but there seems to be something wrong with the repository.
Apparently the origin code has not been formatted by Prettier. So there are bunch of code changes that are just code formatting done by Prettier. Is there an issue from your side? If not, should I just make the pull request with formatting changes? Note that this only seems to be happening with the codemirror-search.js file.

Refer this closed PR for more context: #2617

[lindapaiste]

@mhsh312 That sounds familiar. Definitely that file has never been formatted by Prettier. If you want to put in a PR which just applies Prettier to that file (without your code changes) you could do that. Otherwise I think I can figure out where to look. You added a bunch of lines starting at 369. Is that all?

[mhsh312]

Yes my changes are from Line 369 to the end of the startSearch function. And I can't push a PR rn so I'd be grateful if you take care of it. Otherwise I'll push one later.