Add completion info previews to autocomplete suggestions

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.

No implementation files or tests are named. Start by tracing the editor's CodeMirror autocomplete integration and reading how its Info Pane handles selected suggestions. Done means a selected completion opens a documentation preview with the proposed keyboard controls, Escape closes it, and Enter can open the reference in a new tab without breaking insertion.