Vi editing mode addon for Firefox
For better or worse, I find myself typing more and more text in textarea/input elements in web apps these days. Especially now that I’m writing most emails in the mox webmail client. It was high time to enable vi editing mode in Firefox.
One problem: Firefox doesn’t seem to implement vi-style editing?!
I still can’t quite believe it. I searched the web, looked in about:settings, tried various GTK-setting incantations (though I think Firefox renders widgets itself nowadays), but nothing turned up. I did find setting devtools.editor.keymap=vim, but it that’s only for viewing code in the debugger. How is everyone getting vi editing modes for their textarea and input elements?
The only solution I found were various vi-related addons for Firefox. I tried a few, but didn’t like any of them… Most are about adding a vi-like mode for navigating the web. That’s not what I was after. I just want to have a vi editing mode in textarea and input elements. Others are about integrating full-blown vim(-like) editors into web pages. They literally turn textarea/input elements into a vim instance. That’s too intrusive for me, modifying page layout, and it has to be enabled for an element explicitly. I want a solution that is always available, more seamless, and works with the web.
I couldn’t find an existing add-on, so I wrote a new one: Vi Editing Mode. It is not a port of vim or another popular implementation, but newly written in TypeScript, though the code is modeled after earlier vi implementations I wrote. It compiles to JavaScript, and can run standalone, but I wrapped it into a Firefox add-on for convenience. It has most of the functionality I regularly need, like insert/command/visual(line) mode with lots of commands implemented, multi-level undo/redo, repeat, a basic ex-mode.
What I like most is that it’s very unobtrusive. It enables vi-style editing on all textarea/input elements on a page. For command mode, just hit escape or ctrl-{ (unfortunately, ctrl-[ is taken by Firefox). The DOM element stays intact. It just gets some key/mouse/blur handlers. It isn’t temporarily replaced by a full-blown editor. There are no layout changes/reflows. The mode is indicated with a colored box-shadow and outline around the element (which don’t change the dimensions).
The second-best feature is the ability to insert literal tabs after having entered vi mode. I found myself copy-pasting tabs from other editors into web forms. That makes me feel ridiculous, and I’m wondering how others are coping… To move focus to the next input element with Vi Editing Mode, use tab while in command mode.
Wrapping up some JS code into a Firefox add-on was relatively easy. You need an account at the Mozilla add-on pages and publishing a new version is done in a few minutes. The code works in Chromium too, so it could be worth it to package it up in a Chromium extension.
I still expect someone to explain me which one weird setting I have to change to make vi editing mode available in all input elements in Firefox. Please do.
For reference, the code to vi.js and the Firefox addon glue, is at https://github.com/mjl-/vijs.