Add completion info previews to autocomplete suggestions

[skyash-dev]

Increasing Access

this feature would make the p5.js api more discoverable for beginners and learners by providing contextual documentation directly within the editor. users could quickly understand what a function does without needing to leave the editor and search the reference site, reducing context switching.

Feature request details

currently, autocomplete suggestions display function names and signatures, but provide little information about what the selected item actually does. users often need to open the p5.js reference in a separate tab to understand unfamiliar functions.

i propose adding completion info previews to autocomplete suggestions.

proposed workflow:

1. start typing and autocomplete suggestions appear.
2. navigate suggestions using the keyboard.
3. when a suggestion is selected, pressing the right arrow key opens a documentation preview.
4. esc closes the preview.
5. or pressing enter opens the reference in new tab.
6. tab or enter inserts the selected completion as usual.

why this approach

• encourages beginners to learn the api while writing code.
• reduces the need to switch between the editor and reference site.
• builds on existing keyboard navigation patterns.
• whole long documentation maybe intimidating for beginners.

design mockups:

---

additional notes

codemirror allows to show completion info through an "Info Pane" that displays extra details when a suggestion is selected.

[yashgoyal0110]

@ksen0
can i work on it?

[ksen0]

Hello! Please look for issues that are not labeled as "Awaiting Maintainer Approval", thanks for the understanding. @yashgoyal0110

[yashgoyal0110]

Hello! Please look for issues that are not labeled as "Awaiting Maintainer Approval", thanks for the understanding. @yashgoyal0110

ok @ksen0