Vim bindings in code cell editor

[ghing]

Is your feature request related to a problem? Please describe.

Using Observable as part of a data an analysis pipeline that often involves working in other environments, it's frustrating to have to do the mental switch of which key bindings will work in one environment or the other. My team consistently uses vim key bindings in various editors when working with code that relates to Observable notebooks and it would be great to support this when editing code in notebooks as well.

Describe the solution you'd like

I would like to be able to enable the ability to edit, delete and navigate text in cells using vim keybindings similar to how the feature works in Colab notebooks.

Describe alternatives you've considered

Writing code in an editor and copying and pasting it into Observable is too much friction to be a viable solution. Similarly, browser extensions that add key bindings seem to be more focused on navigation than editing.

[mbostock]

You might find our tips on navigating cells helpful, since we do provide a number of vim-inspired shortcuts already known as cell selection mode (or “cell shortcuts”):

https://observablehq.com/@observablehq/pro-tips-navigating-cells

Also related #382.

[CobusT]

We have enabled an experimental feature for you which allows you to set the cell editor to “vim mode”. 🎉

In vim mode, the editor emulates a subset of the Vim editor. It uses a Codemirror extension and is not based on real Vim code, but it has most of the interactive keyboard shortcuts (no the settings or scripting capability). You can enable Vim mode along with other editor options on your user settings page (all the way at the bottom).

Try it out and give us feedback!

[ghing]

I've spent a little time with this feature today and so far, I like it and it really addresses the context switching problem between my everyday editor and Observable that I voiced when I opened this issue.

I also like how some of the idioms from vim are mapped on to Observable. E.g. it seems like :w executes the cell, which I was pleased to find just work.

I also liked how deletion, copying and pasting behaviors worked as I would expect between cells and with the system clipboard.

I'll share additional feedback as I use this feature more, but so far, this is really helpful. Thank you for being responsive to my feature request.

[CobusT]

Thanks for the feedback. We are looking at tweaking the way the Esc key works a bit. I often hit the escape key twice (or more!) and that takes me out of the cell editor (and into cell selection mode). We are trying to keep you in the cell editor when hitting Esc multiple times.

[oluckyman]

thank you for vim support! I missed it. I noticed that when I create new cell, it's in command mode so there is always +1 keystroke before I can start typing in the empty cell.

[CobusT]

Quick update...

When in Vim mode, you can now hit the Esc key multiple times and you will not exit to the node selection mode. Yay! I seem to like hitting the Esc key :-)

To enter node selection mode if you have Vim mode enabled, you now have to hit Mod-Escape (Command-Escape on Mac) to enter node selection mode.

Please let us know if this helps!

[ilica]

Thank you so much for the vim keybindings!!! They are wonderful and have dramatically improved my life. I was wondering if I could ask for the option to have a common remap for my tiny hands of jj for escaping.

(I think codemirror supports remaps and it could be cool to have a place to specify some custom remaps if you have "enable vim" selected, but also I swear I'm not trying to add too much to y'alls plate!!)

Thank you again!!

[CobusT]

Closing this issue as the original request seems to have been addressed.