Implement Text Highlighting Feature for Improved User Interaction

[apsinghdev]

Increasing Access

This Feature aims to highlight all the occurrences of the similar text when a particular text is highlighted in the editor

Feature request details

currently, editor highlights the selected text only

idea is to make it like this ( it would be way more helpful in larger files ) -

Adding a text highlighting feature like this to the p5.js Web Editor can increase access in the following ways:

• Improved Usability: Text highlighting makes the editor more user-friendly, attracting users who may find code editing intimidating.

• Enhanced Learning: Beginners can understand code structure and syntax more easily, making the editor a valuable educational tool.

• Reduced Errors: Highlighting helps users spot and correct mistakes quickly, encouraging them to use the editor confidently.

• Increased Productivity: Users can code more efficiently, completing projects faster, which may lead to more frequent usage.

• Broader Audience: The feature accommodates a diverse range of users, from novices to experienced programmers, expanding the user base.

@raclim , @lindapaiste please share your thoughts on it? I would be happy to add this feature.

[lindapaiste]

We should look into the CodeMirror documentation and see if they have an addon for this. FYI we are currently using CodeMirror v5 and will be updating to v6 at some point in the future.

[apsinghdev]

We should look into the CodeMirror documentation and see if they have an addon for this. FYI we are currently using CodeMirror v5 and will be updating to v6 at some point in the future.

Currently, there is match-highlighter as addon in codemirror v5

p5.js-web-editor/client/modules/IDE/components/Editor/index.jsx

Line 30 in 42924b9

import 'codemirror/addon/search/match-highlighter';

So I think using this the functionality of highlighting all occurrences of selected text can be built .

for that I would have to configure highlightSelectionMatches using showToken and annotateScrollbar

p5.js-web-editor/client/modules/IDE/components/Editor/index.jsx

Line 118 in 42924b9

highlightSelectionMatches: true, // highlight current search match

There may be some other configurations as well to build this; it's just a high-level overview of what could work.

I'm up for working on this issue. please assign me

[apsinghdev]

hey @lindapaiste ! sorry to ping you. just wanna ask can I work on it?

[raclim]

Thanks for sharing your thoughts on this! I personally don't use text editor features like these too often, so I'm not sure how well this might be used generally. However, I definitely could be the odd one out here and would love to hear more thoughts about this—I'm going to move this to 'Discussions' for now!