Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: vi in your browser - edit files directly from Dropbox, etc (mit.edu)
206 points by tagx on June 21, 2012 | hide | past | favorite | 77 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()


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.


[deleted]


Decent, but really the context shift is too intrusive for everyday use. I use vim on command-line (with set -o vi), so it's not like a regular textarea is too small for it to be useful either.

EDIT: Deleted parent link was http://gpl.internetconnection.net/vi/


"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?


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.


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!


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


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?


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


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


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


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!


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.


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.


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.


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.


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.




Consider applying for YC's W25 batch! Applications are open till Nov 12.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: