Add "Move Lines" Feature to p5.js Web Editor

[yehiarasheed]

Increasing Access

This feature enhances accessibility and usability by allowing users to move lines up or down using a shortcut, similar to modern code editors (eg., IntelliJ, VSCode and Processing 4) . It streamlines the editing experience, making it easier for users—especially beginners and those using keyboards for navigation—to organize their code efficiently.

Feature request details

I previously implemented this feature in the Processing 4 repository (PR #964), where it was approved. I'd like to port same functionality to the p5.js Web Editor to ensure consistency across Processing-related projects and improve the user experience.

Additionally, if this feature is added, I’d be happy to contribute documentation to ensure users can easily discover and use it.

I'm also interested in contributing to the p5.js Web Editor for Google Summer of Code 2025, and this would be a great opportunity to get familiar with the codebase while making meaningful improvements. Looking forward to feedback!

[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.

[raclim]

@yehiarasheed Thanks so much for opening this! I think this would be a great addition to have!

We're currently in the process of updating CodeMirror to v6, so I think it might be best to work on any kind of implementation until that's been complete, which will probably be sometime by the end of the month. In the mean time, I think it'd be great to attach any screenshots (it can reference the PR from Processing) within this thread that help visualize what it might look like or thoughts on how you might plan to implement this!

[yehiarasheed]

Hi @raclim,

After reviewing the documentation for CodeMirror v6, it appears that while the Sublime keymap has been removed, the "move line" shortcuts have been integrated into the defaultKeymap. This means we can use them by making sure that they're included in our setup without additional configuration.

This change introduces the opportunity to enhance the p5.js Web Editor by allowing users to select their preferred keybindings directly from the settings. Offering presets like VSCode, Vim, or Emacs would enable users to customize the editor to their workflow. CodeMirror supports custom keymaps, so we can build upon that functionality.

Replit has developed extensions that provide keybindings for VSCode, Vim, and Emacs within CodeMirror. These extensions could serve as a resource for implementing similar features in the p5.js Web Editor, or we could even make use of these extensions ourselves.

Regarding fully customized keybindings, discussions have occurred in previous issues, but it was thought to be a bit complex for the audience. Therefore, focusing on user-selected presets might be a more practical approach.

I'll follow up on this with some screenshots soon.

Looking forward to your thoughts on this!