Use Atom to edit in Chrome

https://github.com/tuvistavie/atomic-chrome

by tuvistavie • 10 years ago

269 82 10 years ago

github.com

sambenson• 10 years ago

Interesting concept, but why? Why would I use this?

jedisct1• 10 years ago

Because editing text in a textarea is a horrible and frustrating experience?

bt3• 10 years ago

Very cool, but I'm struggling to see the purpose of this. The time it would take to focus on the textarea/ contenteditable field, then press the icon just to begin typing from a different program seems like a waste. Either that, or it has extremely narrow uses; none of which are readily apparent in my eyes.

weatherlight• 10 years ago

I really like the idea and atom is my editor of choice but I struggling to find a use case where I would use this day to day.

mariusmg• 10 years ago

Wow, this is sooo.....useless. Atom is Electron which is Chrome so you can run 2 Chrome instance and sync some text between them.

princejwesley• 10 years ago

Two instances of chrome is not relevant here. Read first comment for its use.

mankash6662• 10 years ago

The screenshots demo-ing this tool in use shows the native WYSIWYG editors in the respective sites to be more feaure rich and intuitive.

This seems like a fun programming exercise with little real utility.

tedmiston5• 10 years ago

The utility is the lower cognitive overhead of having all the UI that you don't need hidden, responsiveness, and having more lines of text visible on one screen. Similar reasons one might use WriteRoom.

mankash6662• 10 years ago

I'm certain WriteRoom serves a niche. If it indeed was such a pain point in, WriteRoom should've achieved the scale of a .. Evrernote? Just saying that as developers, we tend to believe that our own little quirks is how everyone on the planet likes things to be.

rudolf0• 10 years ago

As others say, there's no use for this.

It would be really cool to have some kind of a bidirectional WYSIWYG for web design. Edit a text field in a Chromium window managed by Atom, and it makes the same change in your template file (or even JSX file). Edit something in your template, and the change is instantly painted to the browser window.

I know this wouldn't be trivial to implement, though.

paulirish• 10 years ago

I believe you were downvoted as its somewhat offtopic, but I wanted to share that your idea is implemented. https://developers.google.com/web/tools/setup/setup-workflow...

this works today, really well. give it a shot.

lyall• 10 years ago

A similar behavior is available with edit-server[1] and the accompanying Chrome plugin[2] in Emacs.

[1] http://melpa.org/#/edit-server [2]: https://chrome.google.com/webstore/detail/edit-with-emacs/lj...

blisterpeanuts• 10 years ago

Thanks, I was about to ask about Emacs.

What a cool idea.

Sir_Cmpwn• 10 years ago

I use this Firefox add-on to edit text in gvim from time to time:

https://addons.mozilla.org/en-US/firefox/addon/its-all-text/...

But I don't see the advantage of editing text areas with atom, which presents an extremely similar text editing experience compared to the experience the text area already provided. On the other hand, moving to Vim to edit a particuarly long comment or what have you makes more sense because I get to use the crazy keybindings I've drilled into my fingers.

SwellJoe• 10 years ago

I use It's All Text! with gvim, as well. It's a great tool when I have a lot of updates to do in large documents. That said, there is a vim mode for Atom, and this seemingly has the minor benefit of live updates to the textarea.

I suspect there are use cases where this makes sense, and, obviously, Atom is a more powerful editor than a browser textarea, though the key bindings may be similar.

CaptSpify• 10 years ago

I do the same as you, and I've never used atom. Maybe it has shortcuts or other similar configs that might be preferable to the standard text-box?

tuvistavie7• 10 years ago

Atom is a full featured text editor, like vim or emacs. The editing experience is therefore way superior to Firefox or Chrome textarea, and you can use all the shortcuts, plugins and goodies you are used to. For a short comment, a basic textarea is of course enough, but when you write something a little longer, I think it is a real gain of time to be able to edit in a real editor.

ben336• 10 years ago

Atom has a very good vim-mode that implements vim key bindings. You can do similar things to get emacs or custom key-bindings

nemoniac• 10 years ago

Atom is a full featured text editor, like vim or emacs.

I have to take issue with your notion of "full featured". Atom is a fine editor with plenty of features but it's orders of magnitudes short of emacs.

omaranto2• 10 years ago

atom, which presents an extremely similar text editing experience compared to the experience the text area already provided

Well, that's just rude. Atom is a customizable, programmable, featureful text editor. You can certainly believe that Vim is better, but you shouldn't think that on the spectrum from browser textarea to Vim, Atom is close the textarea side.

rickycook• 10 years ago

OP never said better though. I think the point was merely that vim is always a very different editing experience, where atom by default is not

JoshTriplett• 10 years ago

I use and recommend It's All Text as well, but Atom is a programmer's editor, and if someone prefers Atom as their editor of choice, they'd find it a massive improvement over a browser textarea.

crucialfelix• 10 years ago

I have vim-mode in Atom, so its just about exactly like editing in Vim.

If you are editing a gist or inserting a code snippet in a comment then editing in Atom would be nice because you get syntax highlighting, snippets, auto-complete.

marbletiles• 10 years ago

I love this. There used to be a TextMate plugin for Mac browsers that did the same thing (well, without the live sync).

Am going to use this for some aged web forms at work that have pretty hostile UX and that I often c&p into rather than bother trying to type.

uxcn3• 10 years ago

I'm still sad Pterosaur [1] is no longer maintained.

[1] https://github.com/ardagnir/pterosaur

wangman• 10 years ago

What about Vimperator or Pentadactyl?

uxcn3• 10 years ago

The textareas are close, but it's not the same as having the actual editor. I use UltiSnips a lot, which without the actual editor you can't use. It's the same with a lot of Tim Pope's plugins (abolish, surround, etc...).

tuvistavie7• 10 years ago

To answer the questions of the use case, here is mine. I spend quite a lot of time editing in Chrome, especially Github and StackOverflow, and found myself doing the following:

* Start editing in Chrome

* It becomes long so copy-paste to Atom and edit there

* Copy-paste back to Chrome

To avoid this, I have then be using https://chrome.google.com/webstore/detail/wasavi/dgogifpkoil... to edit directly in Chrome but thought that it would be better to use a real editor rather than a subset, which is why I created this package.

I have an editor opened almost all the time, so pressing a shortcut and being able to edit directly there without copy-pasting around is actually saving me some time compared to my previous workflows.

spudfkc• 10 years ago

Cool, but not sure I'd use this. The only reason I could see this being used is if you're writing code into a textarea that isn't syntax-aware, or if you just really want vim keybindings when you're typing a long email.

sridca2• 10 years ago

It would be even cooler if HTML input can be edited using markdown source.

For eg., you compile an email in Gmail, but edit it using Markdown in Atom (or whatever editor); the final content gets rendered as HTML. Effectively you are sending HTML email that was composed and edited in Markdown.

uxcn3• 10 years ago

There are python scripts to do this. Adding a mapping to do it in Vim/NeoVim would be fairly straightforward.

tedmiston5• 10 years ago

It would be so great to have that for Jira and its obscure formatting conventions.

softawre• 10 years ago

Yeah. For me, not just Jira, but it's brother Confluence...

tuvistavie7• 10 years ago

Totally agree. I am going to give it a try. Thank you for the idea.

tuvistavie7• 10 years ago

Thanks for the proposal. This would indeed be nice to have. I am going to give it a try and if the result is good enough I will add this feature.

bgar• 10 years ago

Try this: http://markdown-here.com/

sridca2• 10 years ago

I have tried this extension in Chrome; it doesn't quite do what I'm getting it, as the extension converts the markdown once and doesn't let you edit it afterwards.

thekevan• 10 years ago

HTML email that was composed and edited in Markdown

I never understood the appeal of markdown. Why would this be beneficial to you?

sandisk5• 10 years ago

Use cases I thought of and I haven't even used it or similar plugins:

You want to use Atom's Markdown preview of a reddit comment or a github issue or anything else that takes Markdown.

You want autosave of a comment/input in case you accidentally close the tab, navigate away, or restart your browser.

You want to write code in a comment/email.

You want to use more advanced editing commands, things like undo-tree.

Myztiq2• 10 years ago

The only real use-case I can see here is getting access to multi-select, and find/replace utilities, or perhaps other custom shortcuts you might use. Overall a neat little trick. Atom is not my usual editor of choice but I could see a few small potential use cases.

ericfrederich• 10 years ago

I wind up copying text into Sublime all the time to do my formatting then paste it back into my browser.

Things like GitLab, GitHub, Bugzilla, Wikis, etc. You have a comma separated list of strings like "one", "two", "three", "four" and need to turn them into Markdown bullets - one - two - three - four

... an easy task for sublime or Atom

jakub_g2• 10 years ago

I usually copy-paste longish things to the text editor (or at least to clipboard) to avoid data loss in case the webapp crashed / browser crashed / HTTP request failed / I mistakenly pressed backspace when out of the textarea (which navigates to previous page)

It happens rarely but when it happens, it hurts.

Myztiq2• 10 years ago

A browser extension I didn't know I wanted. Keeps history of textfields when I navigate away, and gives me an option to restore.

niij• 10 years ago

Try the Lazarus extension. It keeps a history of form fields. It saved my butt more than once.

tedmiston5• 10 years ago

Another benefit is being able to use Sublime snippets as email templates.

faizmokhtar• 10 years ago

Yup, neat little trick. Also, I think this might be useful for answering or asking question on StackOverflow. Gods knows how hard it is to format your codes properly on those sweet little box.

juandazapata• 10 years ago

Can somebody explain why would one ever want to use this? No trolling, I might be missing something here. I just don't see any use for it right now.

AustinG08• 10 years ago

Aside from some of the other mentions, this could be pretty neat for someone who manages many WordPress sites, or any other CMS' for that matter.

tuvistavie7• 10 years ago

Take a look at my comment, for my actual use case. https://news.ycombinator.com/item?id=11022768

tedmiston5• 10 years ago

Does anyone else jump into an editor to write emails or essays?

I find myself wanting simple, distraction-free plain text with no UI cruft for any writing more than a few sentences.

Personally I'm using either the Write Space extension for Chrome or Sublime today, but it seems like the author has the same use case, and with the added convenience of auto sync.

krisdol• 10 years ago

Yes. For one, I don't trust myself to not accidentally hit a keyboard shortcut I'm used to using on my native editor, but happens to collide with an important function in the email client. I also despise gmail's interface in general these days.

laurent123456• 10 years ago

If I need to edit outside my browser, I would normally just press Alt+Tab to switch to my text editor, type the text, then Ctrl+C, Alt+Tab, Ctrl+V. It feels about as fast and works with all web browsers and text editors.

profeta4• 10 years ago

plus you can have locally saved backups with http://vim.wikia.com/wiki/Quick_save_to_a_temporary_file_bef...

tuvistavie7• 10 years ago

This is also what is used to do, and I found it added some unneeded overhead, so I thought it would be easier to simply sync it.

bduerst• 10 years ago

Damn, I thought this meant Atom support on Chrome OS :(

There still isn't a good text editor that does regex find and regex replace (caret doesn't).

profeta4• 10 years ago

if you can't install/compile vim on your computer it is not a computer

kuschku• 10 years ago

Maybe you’ve seen the terminals T-Mobile/T-Online put up everywhere instead of payphones, which are basically payphones with WiFi hotspot and a touchscreen with webbrowser.

Every time I see a chromebook, I am reminded of those "Smart payphones", because they are as much of a computer.

omaranto2• 10 years ago

I don't know if I could install Vim on my father's Chromebook (probably yes), but I do know it came preinstalled! That makes it a computer too, right?

purplerabbit• 10 years ago

Check out crouton (https://github.com/dnschneid/crouton). you can tab back and forth between chromeos and (l/x/k)ubuntu. Fully Atom-compatible

banjobob• 10 years ago

Could be cool to add this to a webapp with socket io. Make collaborative coding.

darkvertex• 10 years ago

Like Floobits for Atom?

https://floobits.com/ https://floobits.com/help/plugins/atom

They also support Sublime.

profeta4• 10 years ago

i'm more interested in the screenshots window manager.

having been forced on a mac recently... just the fact i can't move my windows with <one key>+<mouse left button> is driving me crazy. and to add insult, the title bar that i have to hit to move windows is smaller then anything on browsers such as chrome and firefox.

jhasse• 10 years ago

I think that's i3. But it's Linux anyway, why would you be interested if you have to use Mac?

profeta4• 10 years ago

i'm a moron. noted.

i guess i saw something that reminded me of the cocoa/whatever-osx-UI on the the screenshots. but looking closer now, there is nothing other than atom and chrome, both have custom inconsistent UIs that do not hint the OS they are running on. you are right, it can be linux or anything else.

tuvistavie7• 10 years ago

It is xmonad[1] running on Arch Linux[2].

[1] http://xmonad.org/

[2] https://www.archlinux.org/

chiliap2• 10 years ago

This is a really cool idea, accidentally pressing my Sublime shortcuts on website forms is definitely a very common mistake for me.

hudell• 10 years ago

There are similar plugins for sublime out there.

docwhat2• 10 years ago

I like this idea. As Firefox tightens its sandbox security eventually things like It's All Text! won't work anymore.

I have some bugs open on the project and maybe someday I can switch from Vim to Atom comfortably.

I also hear that the It's All Text! author is lazy... every time I go home to the family. ;-)

lftl• 10 years ago

Just wanted to say thanks for It's All Text, it's been a huge timesaver for me.

josteink• 10 years ago

Hm. I love It's all text and use it all the time with my Firefox and Emacs setup.

Are you saying that you're its developer, and that you're not going to maintain it anymore?

That would certainly make me sad :(

docwhat2• 10 years ago

I'm glad you like IAT! I am indeed the developer.

I'll continue to maintain IAT! as long as it can work in Firefox.

Firefox is changing its security model for extensions to make it more like Chrome's. Eventually, it will be impossible for IAT! to work as a pure extension anymore.

Over the years, I've been working on IATED (https://github.com/docwhat/iated) which was meant to be a replacement for IAT! -- a sort of IAT! next generation.

IATED would be two parts: a server to open the editor and an extension that talks to it.

But I've become distracted and disheartened by figuring out how to make it as simple to install and use as IAT! yet remain secure.

Some issues:

* I know enough security practices to know I'm not even close to being an expert. IATED has the potential to do really bad things if insecure. Letting a malicious page read random files on your file system (or worse, write them!) is the obvous vector.

* I would want to support the same platforms: Linux, OS X, and Windows. But each platform has very different requirements. Windows users are going to be confused if IATED is purely command line driven, for example.

* What language should I write it in. I have several false starts, with the current 'master' branch being JRuby. But depending on the JVM seems horrible. 'golang' is pretty new and maybe the way to go. I'm not sure.

* I work on IAT! mostly alone, though xOneca has been a great help. Writing IATED by myself is discouraging. I'd love to have someone who knows about golang or Windows or security help me write IATED.

Anyway, that's roughly the state of IAT! and IATED at the moment.

Ciao!

scotty79• 10 years ago

If you build it they will complain. ;-)

nickysielicki• 10 years ago

I'd be more interested in a generic solution that makes a live mapping from webkit internals to files via FUSE.

(I have zero experience with webkit to know if this is a reasonable undertaking.)

boksiora• 10 years ago

nice work :) i will use it

radarsat1• 10 years ago

It would be cool if browsers simply created easy-to-find temporary files on disk that mirror the contents of the text box, and can be copied or edited externally. Then you could use whatever editor you want, or simply copy the file to edit later. Hm.. maybe a FUSE filesystem could be used for this.

haiwenchen• 10 years ago

nice!

bsimpson• 10 years ago

Sounds like GhostText:

https://chrome.google.com/webstore/detail/ghosttext-for-chro...

unfamiliar• 10 years ago

I used Automator on OS X to create a system service to do something like this. Creating it was really simple - just a "Run Bash Script" action with "/usr/local/bin/subl" in it. Right clicking text anywhere in the system and choosing "Edit in Sublime" will open it in ST and replace the original text once you save the file.

Use Atom to edit in Chrome

Related Stories