Skip to content

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

Open
@yehiarasheed

Description

@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!

Activity

welcome

welcome commented on Mar 14, 2025

@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

raclim commented on Mar 14, 2025

@raclim
Collaborator

@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

yehiarasheed commented on Mar 14, 2025

@yehiarasheed
Author

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!

AtharvSonawale

AtharvSonawale commented on Apr 2, 2025

@AtharvSonawale

Hey @raclim , I’ve created a PR that adds the shortcut for one line move, working on multiple lines as well, I thought that it would be helpful for users! Would love to share the changes and get feedback from the community. Let me know your thoughts!

added
On HoldWork on this issue is paused for now
on Apr 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Feature RequestProposal for adding a new functionalityOn HoldWork on this issue is paused for now

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @raclim@AtharvSonawale@yehiarasheed

      Issue actions

        Add "Move Lines" Feature to p5.js Web Editor · Issue #3393 · processing/p5.js-web-editor