Show HN: vi in your browser - edit files directly from Dropbox, etc | Hacker News Reader

Show HN: vi in your browser - edit files directly from Dropbox, etc

mit.edu

206 pointstagx77 comments

Cool. Emacs fans wanting their fix in the browser can checkout ymacs:

http://www.ymacs.org/demo/

Does ymacs open files from Dropbox yet? Github, if you're reading this please make both vi and emacs interfaces available through your web ui :)

[Shameless plug] They could if they use Filepicker.io! Anyone know someone on the project that I could contact?

This person is the originator of the ymacs project . https://github.com/mishoo

Awesome. I'll see what I can do

Dammit Chrome, Y U capture C-n ? :(.

We'd have to convince the chromium powers to reverse their stand on issue 33056 to enable C-n to be captured by a script:

http://code.google.com/p/chromium/issues/detail?id=33056

It's marked "WontFix" but I have it starred anyway.

Hmm, there's also the related issue 119881:

http://code.google.com/p/chromium/issues/detail?id=119881

It's marked "Assigned" so maybe there's still hope.

Here's what I really, really, want:

$('textarea').vim()

"JSVim provides Vim in any textarea"

http://ostatic.com/jsvim

so, the links provided on that page don't work. There's a sourceforge project by that name, with some ancient code that won't work in Chrome... do you have a link to a version / repo of that that works in modern browsers?

You can get something similar to that with the Firefox vimperator plugin. Press ctrl-I in a textarea and a vim pops up. When you close it the text gets copied back. I use it a lot!

that is one of the best things in pentadactyl as well. unfortunately it still tries to use gvim for me. but this can surely be changed somehow.

set editor=(command line here), if you were curious. I've found you can easily check if an option for something exists by using :set and its nice autocompletion.

Cloud vi was my side project last week. FYI: I didn't build the editor. I took it from http://gpl.internetconnection.net/vi/ but modified it a bit and integrated it with https://www.filepicker.io to make it much more useful.

was just about to mention http://gpl.internetconnection.net/vi/

Thank you for this. Many people will remember early browsers were also editors; Mosaic and Nexus (or confusingly WorldWideWeb as its earlier name) both had document editing features.

Yum. Though the biggest thing I liked about this was learning about the service 'filepicker'. Smart integration.

Thanks! Filepicker was a joy to use and really made this

Pretty darn nifty, but vim stuff like 'ciw' doesn't work, and also 'C' leaves you in an insert state where your next keystrokes are entered just before the last letter in the line, rather than after the last letter in the line.

Yeah that was literally the first thing I tried, and I was disappointed it didn't exist.

I just fixed C. ciw doesn't work since I've only implemented vim stuff for now but I may slowly add in vim features if there is demand for them

Oh well, if you're fixing them, I've a couple more issues:

'^' goes to the first character in the line, not the first non-whitespace character

'o' is not undoable using 'u' (those most other things are, strangely)

Thanks!

Has anyone tried compiling the real vi/vim with Emscripten?

Somehow online vi clones never bother with implementing ^[ (does the same as escape), which seriously impairs me.

Is this impossible to implement?

This is implemented. It works for me in chrome

You're right, thank you.

At least it works on chrome on osx. It didn't work when I tested it earlier in dev channel chrome on windows.

Just in case you're still scanning the comments:

It works on OSX because it appears the operating system automatically creates a keypress of scancode 27 (escape) when you press "^[".

The special code in term_keypress_inner to handle this combination of keys is never hit, because no keypress event is created for ^[, but it isn't necessary on OSX due to the above feature.

You could expand your handling of keyup/keydown to handle it. For example, change your keyup handler to the following:

$(document).keyup(function(e) { if(e.keyCode === 27 || (e.ctrlKey && e.keyCode === 219)) { do_escape(); } });

Same for ^C, which also does the same as Esc and is extremely convenient to type. (There is a slight difference with Esc though: VjjIblah^C does not do the same as VjjIblah<Esc>.)

I always get confused when I run apps like this and they don't work initially. If you use Vimium, press i when this starts up.

This appears to be completely static, which is awesome (no server-side required for oAuth thanks to filepicker.io?)

It is completely static. I can do everything purely from javascript using filepicker.io to do all the I/O

Slight issue: counts do not work in combination with insertion commands. (in other words, you can't use 5i to have something inserted 5 times, or for a more useful example you cannot use 5o or 5O)

It's an easy to overlook, for a long time BusyBox's vi didn't like combining counts with o/O either.

As well, non of the screen movement commands and some miscellaneous commands aren't working. It really took out almost all of the flow I have when I'm editing files.

Vi commands: ^D ^E ^B . J and probably more that I haven't tried.

Possibly Vim commands: * #

U is functioning completely incorrectly. Try dd, U on line 3 in the example.

It also wasn't allowing me to hit <ESC> (OSX 10.6, Chrome 19)

(All this isn't Filepicker's fault. It's whomever's that wrote the choppy JS version of Vi. But if you want to show off Vi in the browser, you can't make me feel like a broken machine when I try to use it.)

Also, some yanking commands don't work: yiw, yaw (it goes into insert mode)

Why I can't use this:

"This app will have access to your entire Dropbox."

Which still happens with pretty much every Dropbox app, despite fine-grained permissions many months ago. Dropbox, love the app, but the company needs a strong developer relations programme to get messages like this out.

Is there any other way to get an arbitrary file from your dropbox into a text editor?

https://www.dropbox.com/developers/announcements/11

"We've introduced App folders: app-specific folders that Dropbox will automatically create and keep track of, even when users move or rename them."

I assume that means a fine-grained folder instead of the scary "entire Dropbox" situation. It was introduced on 8 months ago, but there's little detail on it.

but this would mean you wouldn't be able to share work from say an iPad app to this one, which to me is kind of a hassle if I couldn't

Sorry to barge into this thread. There seem to be a lot of vi experts reading it. Perhaps you might consider contributing to this thread also:

http://news.ycombinator.com/item?id=4145060

Aah MIT nerds. Pretty cool though - any plans for Github support?

There already is Github support

Sorry should have been more clear. I meant for saving back a commit after opening from Github

Strike this. My bad.

(Original: First thing I tried: dG to delete everything, didn't work. So, it still needs improvement. Now, I'll admin I'm not 100% sure if G is a vim command or a vi one.)

dG works for me

Hah, I just realised what caused it. I have one of those vim-browser plugins and it apparently caught some of my keypresses and didn't pass them on.

Sorry about that, it's definitely cool.

I'm having trouble with this too.. Deleting everything causes

    file[cursory+base];

to return undefined, and any calls to it e.g. as xx..

    2171
    _calcy(gg, xx.substr(zleft, xx.length-zleft), xg.substr(zleft, xg.length-zleft));

Will give errors.

    Uncaught TypeError: Cannot read property 'length' of undefined

Chrome 19.0.1084.56 on Windows.

If I leave the first line alone, it appears to work great!

Funny story, the early version of Heroku was an in-browser editor, roundabout October '07. They're vim guys - but it didn't feel much like vim.

Cool! You should add ctrl+c mapping to <ESC>. Thats how I switch out of modes so that I don't move my left hand out of position.

I'm not sure it would be such a good idea to implement a hodgepodge of random peoples' mappings.

> I'm not sure it would be such a good idea to implement a hodgepodge of random peoples' mappings.

Ctrl-C is not a (user-defined) mapping. It will leave insert mode, but will not trigger things like abbreviations and autocommands (in Vim), so it's not a good idea to use it over Ctrl-[ (which is supported) or <esc>.

Ah, right. Thanks for clarifying.

Re map your caps lock to esc. How often do you use that stupid button anyways?

I would miss caps lock. As soon as I see >2 upper-case letters in a row, I use it. I don't know how people bother to type long acronyms and other words in caps without it.

Nice!

Too much vim in my browser at once. Vimium didn't like interacting with the window, and interpreted my typing with a back-button action.

Pentadactyl (Firefox) has a "Pass Through" mode (ctrl-z) for this reason.

but it does not interact nicely anyway. try to use esc to break out of something. (ctrl-] does not work either as it is (rightly so) also captured by pentadactyl.)

Implement text objects and Vim-style fFtT (character searches are repeatable via ; and ,) and you'll have me as a user. :)

This looks really cool. Any plans on sharing/open sourcing the code and going through the process of how you built it?

It already is open sourced but I do plan on writing a blog post about it sometime in the future

Any documentation on the restrictions? Commands like :set nu to display line numbers are not available...

Not at the moment. It supports most of the standard unix vi commands but not the enhanced vim ones as of yet.

Ability to edit files off Box / DropBox is a big plus. Is there a mailing list or something like that (some RSS feed for a development blog) where I will be able to see when updates are made? I would like to start using this as soon as features like vertical column selection / yanking and pasting as well as line numbers are put in (the nature of the files I have on DropBox call for those features :|)

Feel free to join this google group https://groups.google.com/group/cloud-vi

Can I embed this as an iframe?

I haven't tried it, but feel free to use it if it works. It's open source.

Nice, I'm not a developer, but I could find myself using this a lot.

Thomas... don't you have a startup to be working on? :)

Pressing tab in insert mode doesn't work for me :(

Finally, I've been waiting for this for ages.

so cool. super awesome as-is. if you add evernote support i will go crazy w/ happiness.

Sign up for the google group I created here https://groups.google.com/group/cloud-vi and I'll let you know when I add evernote support

awesome! will do

Should you help Uganda?

This conflicts with my pentadactyl plugin haha!

Awesome, it's 1987 all over again.

Works in Android better than hn's textareas.. /me wonders how can you screw up a text area

Only draw back is having to give up Swype for hackers keyboard, thanks to Swype lack of esc key.

Reply on news.ycombinator.com