Web Vi

Web Vi(code.google.com)

86 points by robertmrangel 14 years ago | 25 comments

thristian 14 years ago |

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.

tmhedberg 14 years ago | |

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.

mahcuz 14 years ago | | |

I can't live without pentadactyl.

haridsv 14 years ago | | |

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

dredmorbius 14 years ago | | |

Nice. I swear by Vimperator myself.

ElbertF 14 years ago | |

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();})();

thristian 14 years ago | | |

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. :(((

rix0r 14 years ago | |

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.

super_mario 14 years ago | |

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).

arnorhs 14 years ago | |

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

nddrylliog 14 years ago |

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.

growt 14 years ago |

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.

Aga 14 years ago | |

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.

jarek-foksa 14 years ago |

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

geocar 14 years ago | |

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.

cdelahousse 14 years ago |

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"

geocar 14 years ago | |

Hi there.

I'm the author of that vi.

What are "text objects"?

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

friggeri 14 years ago |

Keybindings are way off on non-qwerty keyboards.

norswap 14 years ago | |

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).

william42 14 years ago | |

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

masonforest 14 years ago |

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

ByteMuse 14 years ago |

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

rnadna 14 years ago |

0 (zero) does not work.

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();})();

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();})();

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();};})();