p5.js-web-editor
p5.js-web-editor copied to clipboard
Feature Request: Vim Mode
Nature of issue?
- New feature request
New feature details:
This feature request together with a working implementation proposes a new user preference to enable Vim Mode on p5 Codemirror editor.
I did some search about any discussion related to Vim on p5 web editor, but I couldn't find any, so I ended up with a working implementation which wasn't that difficult as I thought, since Codemirror already supports Vim Keymap, I just had to change the Keymap from codemirror/keymap/sublime
to codemirror/keymap/vim
and add a preference option to the UI.

One small concern is the slightly increase on the bundle size, since codemirror/keymap/vim
is about 220 KB, (although I ended up with 4.2MB on my app.[hash].js on my local build and 4.1MB without keymap/vim
, but on the live p5 editor is just 1.1MB, I am a bit confused 🧐).
Another concern to keep in mind is with underlying issues with Codemirror Vim Keymap implementation itself, which apparently does not have an active maintainer, although I didn't had any problems.
I am not sure if this is a such demanded feature, but would love to hear some feedback.
Code: https://github.com/cesardeazevedo/p5.js-web-editor/commit/03fe75b3d60c5f52375758993e565441929ebfa7
Implementation: https://p5-vim.herokuapp.com/ (I don't know how to fix the PREVIEW_URL
)
Codemirror vim issues: https://github.com/codemirror/codemirror/issues?q=is%3Aissue+is%3Aopen+label%3Avim