Add Keyboard Shortcut Customization Panel

[saismrutiranjan18]

Increasing Access

Feature request details

The p5.js web editor currently has built-in keyboard shortcuts for common operations (like Cmd/Ctrl+S to save, Cmd/Ctrl+Enter to run), but users cannot customize these shortcuts according to their preferences or workflow. Adding a keyboard shortcut customization panel would enhance accessibility and user experience, especially for users who:

Come from other IDEs with different shortcut conventions
Have physical accessibility needs requiring alternative key combinations
Want to optimize their workflow with personalized shortcuts.

Add a settings panel where users can:

View all available keyboard shortcuts in one place
Customize existing shortcuts to their preference
Reset shortcuts to defaults
Export/import shortcut configurations
Detect and warn about conflicting key bindings

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[Nishthajain7]

Is there a list of how many keyboard shortcuts are currently implemented. Based on the number we could implement either of these designs.

[saismrutiranjan18]

Is there a list of how many keyboard shortcuts are currently implemented. Based on the number we could implement either of these designs.

Hi @Nishthajain7,
Great question! We don't currently have a comprehensive list of all implemented keyboard shortcuts documented in one place, which is actually part of what makes this feature request valuable.
From what's currently in the codebase, the editor supports:

Basic editing shortcuts (Cmd/Ctrl+S to save, Cmd/Ctrl+Enter to run)
Standard text editing operations
Code editor shortcuts inherited from CodeMirror/the underlying editor

However, I don't have an exact count off the top of my head. The best approach would be to audit the codebase to create that list, which could actually be our first step in implementing this feature — documenting what exists before adding customization options.

[Nishthajain7]

I would love to take this up. As you mentioned, I'll make a list of all the current keyboard shortcuts. They are obviously gonna be a good number if we include global shortcuts (like ctrl+c) as well. Since that is the case, we can make a separate section in the settings

If you like the idea, could you please assign it to me.
Thank you

[raclim]

Hi, thanks for raising this issue @saismrutiranjan18 and for your interest @Nishthajain7! We do have a list of shortcuts if you go to Help > Keyboard Shortcuts, which opens up a modal with a list of command keys that are tailored to the user's OS.

At the moment, we don't have customization for command keys, which are currently being implemented in the Editor component. I think it could be great to have, but further development on this may have to come after the current CodeMirror 6 conversion is completed, which brings significant changes to the Editor component and how CodeMirror is integrated. I'd recommend checking out the CM 6 feature branch and potentially investigating from there!