Web Vi | Hacker News Reader

Web Vi

code.google.com

86 pointsrobertmrangel25 comments

I had a brief play around with the example, and pretty quickly came across bugs and unimplemented commands (for example: 'b', 'e' and 'O' are missing, but 'o' acts like 'O'). I like the way the cursor changes colour to hint at the current mode.

However, what I'd really love would be a bookmarklet I could click to Vi-ify every <textarea> on the current page. I've got "It's All Text" set up in Firefox to open <textearea>s in gvim, but it's still clunkier than editing right there in the page.

+1 on that bookmarklet. Would be very helpful in a lot of cases.

The Pentadactyl plugin for Firefox (http://dactyl.sourceforge.net/pentadactyl/), which is a better-maintained fork of the well-known Vimperator, allows you to hit <C-T> in any textarea or text input to enable Vim-style keybindings inline. <C-I> opens the text for editing in an actual Vim instance, like the plugin you mentioned.

Of course, Pentadactyl changes a lot about how the browser works beyond just text editing, so it may not be for everyone.

I can't live without pentadactyl.

Nice. I swear by Vimperator myself.

You can use jVi plugin that automatically enables vi bindings on text boxes.

Bookmarklet:

  javascript:(function(){var d=document;var s=d.createElement('script');var t=d.getElementsByTagName('textarea');s.setAttribute('src','http://webvi.googlecode.com/svn/trunk/lib/webvi.js);d.body.appendChild(s);for(var i in t){if(typeof t[i]=='object')t[i].setAttribute('class','webvi');}webvi_init();})();

Thanks for that!

I had to make some changes to get it working on my machine:

  javascript:(function() {var d=document;var t=d.getElementsByTagName('textarea');for(var i in t){if(typeof t[i]=='object') t[i].setAttribute('class','webvi');}var s=d.createElement('script');s.async=false;s.setAttribute('src','http://webvi.googlecode.com/svn/trunk/lib/webvi.js');d.body.appendChild(s);webvi_init();})();

In particular, you missed a ' in the .setAttribute() call, and I had to set .async=false on the script element so that it would load and execute it before trying to call webvi_init().

EDIT: No, that doesn't work either. It runs in Firebug if I paste it into the console and remove the "javascript:" prefix, but it doesn't run as a bookmarklet: it just complains about webvi_init() not being defined, even though the async flag is cleared. :(((

I got it working on Chrome by executing webvi_init() on s.onload():

  javascript:(function(){var d=document;var t=d.getElementsByTagName('textarea');for(var i in t){if(typeof t[i]=='object') t[i].setAttribute('class','webvi');} var s=d.createElement('script');s.setAttribute('src','http://webvi.googlecode.com/svn/trunk/lib/webvi.js');d.body.appendChild(s);s.onload=function(){webvi_init();};})();

That got it working, thanks!

Then I tried to write a comment in HN using WebVi in the reply box, and after I hit 'Submit', the comment that actually got posted was just 'M' instead of what I (thought I) wrote. Ah well, early days yet. :)

No kidding. The first thing that I tried immediately wasn't supported (capital 'C' to start typing over the first line).

Would be very nice once it gets more mature, though.

I use Pentadactyl with Firefox. It allows you to use familiar vim commands to navigate the web completely without mouse. It's really fast way to search for things and lookup information (which I do a lot), but it also supports limited set of VIM commands in text areas, about 60 or so commands. It's useful when you don't want to edit in external VIM process (which you can do as well, this is configured out of the box).

Wait, are you kidding? It looks a hell of a lot less convincing than, say, jim: https://github.com/misfo/jim

edit: For example, 'A' doesn't work.

The one thing that most vi-mode implementations don't get is that vi(m) is really about the possibility to configure every keystroke. Its not about "j" is "up" and "dd" deletes the current line.

Absolutely not, as "j" is down.. ;-)

But in seriousness, although I agree about the importance of configurability, I still find that things like "j is down" and "dd deletes the current line" are an important, integral part of the vi-philosophy.

Placing the most common tasks behind the easiest key-bindings for maximum efficiency and ergonomy is the idea that got me to try out vim in the first place.

I like that someone (Bill Joy and Bram Molenaar) has solved the most common issues in editor-usage in a great way leaving me to configure only some special cases.

I'm rather skeptical about text editors implemented on top of the canvas element. Mozilla has already tried that with Bespin project and it failed miserably (huge code base, poor performance, limited accessibility).

Wouldn't it be easier to just use div element with contentEditable attribute? Currently contentEditable has limited API and a lot of inconstancies across browsers, but in the longer run it seems to be the way to go: http://ehsanakhgari.org/blog/2011-08-31/future-editing-web

contentEditable isn't very cross-platform, comes with its own set of keybindings, and it's difficult to decorate the text you're working on as you type without glitching things.

I'm also skeptical about canvas, so when I implemented my own jsvi years ago (at http://src.internetconnection.net/vi and now at http://geocar.sdf1.org/vi ) I didn't use canvas. It works everywhere but chrome (which won't let me capture escape), and it produces the same results all the way back to MSIE6.

In retrospect, I would've had an easier time overriding keystrokes on a textarea.

Here's another example of vi being completely exported to Javascript, but without the canvas element.

http://gpl.internetconnection.net/vi/

What disappoints me about all these implementations is the absence of text objects, though. I love getting edition words or parentheses using commands such as caw and ci"

Hi there.

I'm the author of that vi.

What are "text objects"?

PS: "caw" and "ci" aren't in vi.

Keybindings are way off on non-qwerty keyboards.

Second that. With my belgian-french keyboard, some keys are correct, some aren't. I can't even refer to an online picture of a qwerty keyboard. Very confusing.

I also tried switching to a qwerty keyboard layout on my computer, but then I'm told that ':' is not a valid command (this might have to do with my lack of vi-savyness, so I'm taking tips - but using ':' to enter some commands is how it works on my linux box anyway).

Using vi keybindings in dvorak is an exercise in pain anyways...

The the ACE editor behind cloud9ide.com seems to be undergoing pretty active development (https://github.com/ajaxorg/ace).

There is also a vim mode under development. https://github.com/Gozala/vice

This is neat. Although, I can't get by without some VIM commands and is there a way to export text?

0 (zero) does not work.

Reply on news.ycombinator.com