It’s All Text!

Posted on by

Have you ever had to fill in a form on a web page and wished you could open it in an editor? If you use lots of blogs, post lots of comments or file many bugs then you probably get annoyed at the lack of true editor commands.

I’ve seen some solutions that embed a JavaScript editor into a textarea on demand. Generally, I don’t like them. They are re-inventing a wheel. Especially since I like my particular flavor of wheel, Emacs, though I have no problem with other flavors.

So when I discovered the Firefox extension MozEx I was a very happy hacker indeed. But as time went on I didn’t like the way the extension was going. It was trying to solve a problem I didn’t have; it wanted to add handlers for things like ssh://, etc. and I didn’t need that. I needed an external editor!

When Firefox 2.0 came out, I MozEx didn’t work. I waited for an update and it didn’t come out. Since my new job used a lot of editing stuff via web forms, I really really needed an editor. So I reached for External Editor. It seems to have gone since then, replaced with Editus Externus which seems to be an improved version by someone else.

External Editor had a huge problem. When you edited a file it would freeze up all of firefox till the editor quit. Yikes! However, it let me do things that I needed to do, so I use it.

I started poking around in MozEx to figure out why it wasn’t working in Firefox 2.0 and discovered that in an effort to support pre-1.5 versions of Firefox, it did a lot of work in JavaScript that could now be done in Firefox (md5sums) and it did these sums way too many times for my liking.

It also had some potential security flaws where the browser could be tricked into fetching the contents of a file from one site into their site. Even more annoying, if a second user used MozEx and edited the same site, the files would collide.

So I started thinking… how hard could it be to write an extension?

So I did. :-)

It’s called It’s All Text! and is available for download today.

If you have any suggestions, feel free to post here. I’ll keep this open until I get to version 1, at which point I start a new post someplace…

My current todo list:

  • [idea] dropdown list for charsets (utf-8, western-iso, default)?
  • [low] getDocumentIdentifier should sort arguments and append the post data.
  • [security] Detect collisions using the raw key.
  • [idea] Pass in the line number to the editor, arbitrary command?
  • [high] On edit, let user pick the file extension.
  • [idea] allow the user to pick an alternative editor?
  • [med] Profiling and optimization.
  • [med] If the textarea is focused, we should refresh it.
  • [low] When the editor quits, we should refresh the textarea.
  • [idea] support for input elements as well?
  • [high] Confirm that we find textareas inside iframes and frames.
  • [med] Have gumdrop fade in and out on mouseover

Things marked as ideas, may or may not happen. Everything else will either happen or the issue will be addressed in some other way.

And yes, I edited this blog post with it. :-)

Ciao!

Download: It’s All Text!

88 thoughts on “It’s All Text!”

  2. docwhat says:

    @prasun
    It sure does! That was definitely one of the requirements. As someone who has an umlaut in his last name, I insist on Unicode wherever I travel.

    Now, it may not work on pages that don’t set their charsets correctly. This is because IAT converts from the page charset to UTF-8 for editing (see the preferences) and then back again. So if the page is in (for example) telugu, but has a charset of ascii, then the IAT cannot figure that out that the page is lying.

    Do you have a specific failure case? I’m happy to take a look.

    Ciao!

  3. Benct says:

    I use a Swedish version of Firefox 2.0.0.2 on Windows XP.

    After upgrading to It’s All Text! 0.4.2 it didn’t work for me anymore, so I had to downgrade. What’s up, or rather down?

    /Benct

  4. docwhat says:

    @Benct:

    Interesting. One of the big changes between the previous version and 0.4.2 is that I now have localization, but only a translation for en-us. Can you tell me more about the failure? You only say it doesn’t work anymore.

    Thanks!

    Ciao!

  5. John says:

    This extension absolutely rules. I had an extension which allowed me to resize textareas, but it didn’t always work right. This just works.

    If I may propose a feature request. Today I was working on a website and the layout was kind of blown out. I switched over to safe mode and the layout was fine. Turns out the “edit” graphic was off to the side about 300 pixels from the textarea causing the layout issue.

    Perhaps you could implement a toggle. Where I could switch it off temporarily while I test websites and then back on when I need it. That would so very much rock!

    Thanks, and keep up the good work.

  6. docwhat says:

    @John: Thanks for the feedback! The next version will have a preference to turn off the “edit” button. Unfortunately, addons has been busy with their upgrade and aren’t scheduled to be done till the 15th.

    Ciao!

  7. Martin Polley says:

    Re: jEdit/Flock

    Yeah, that worked, invoking it from a .cmd file. Thanks for the tip.

    As for Flock, I tried it again just now and it worked fine…. Strange.

    Thanks,

    Martin

  9. docwhat says:

    @prasun: Hmmm…. I am able to get it to work using the string below. gmail.com is correctly set for UTF-8.

    I think the problem must be your editor. It must not be saving as UTF-8. Perhaps it is using one of the other charsets for saving? If you know what charset it is using then you can set it in the preferences. Alternatively you can get your editor to save in UTF-8.

    I know some of the non-arabic speakers use non-unicode charsets because they are rather verbose. If Firefox understands that charset, it should be able to convert it correctly to UTF-8.

    Example:

    Hindi: मैं काँच खा सकता हूँ, मुझे उस से कोई पीडा नहीं होती.

    I don’t know what it says, but it is pretty. source

  10. Giuseppe says:

    Fantastic add-on! Until updated to 0.4.2 …
    [using Firefox 2.0.0.2 under XP]

    This is somehow related to previous postings about using It’sAllText
    (IAT) with moinmoin wiki. That’s in fact my main use of IAT, and the
    main reason why I moved from mozex. Mozex was fine until I upgraded
    firefox to 2.0, when it stopped updating across ‘previews’. So I
    moved to It’sAllText 0.4.1 and it was fantastic. Mind you, there is a
    little trick to make it work with moinmoin: if the URL of the page
    open for editing is “XYZ”, the URL after the first preview changes to
    “XYZ#preview”, so with mozex (before it broke) as well as with IAT
    0.4.1 I needed to click on the preview button *before* starting the
    external editor. I could then save changes any number of times and do
    any number of previews without need to restart the editor.

    The problem is now that this does not work any longer in IAT 0.4.2. After
    clicking on ‘preview’, the text field is no longer updated. This
    is a real pity, since this feature (being able to edit wiki pages with
    an external editor) is the main reason I was using IAT, but as it is
    now it’s easier to just do cut&paste from an editor into the text
    field…

    If you want to try the ‘preview’ feature yourself, go to

    http://moinmoin.wikiwikiweb.de/WikiSandBox

    or to

    http://trac.edgewall.org/wiki/SandBox

    This last site also shows another problem, the little ‘edit’ icon is
    displayed far below the bottom edge of the text field. I am not sure
    if this is a problem with IAT or with the html layout of the
    particular page.

    Best regards,

    Giuseppe

  11. docwhat says:

    @Guisepee:

    There are two things that broke this behavior:

    1. I started using the #hashpart of the url to uniquely identify a url. This is probably the wrong thing to do, so I changed that in the next version.
    2. IAT starts looking for the file on disk only after the user clicks edit.

    The second change is the harder to deal with one. Previously I had this flow:

    1. Load page
      1. delete all files for textareas in this page
    2. If file updates on disk then refresh the textarea
    3. If user clicks edit:
      1. If file doesn’t exist, then create it
      2. Open editor on file

    However, this causes problems because if a user visits the same page twice, then they can end up deleting already done work.

    If I remove the delete all files on page load, then if you visit a page you already visited then it’ll update all your textareas with stale information.

    So I changed the flow to not delete files on the disk, but it doesn’t start looking for updates on the disk until you click the edit button.

    I think what I’ll do is add a dialog when the user clicks edit asking the user what they want to do. This should eliminate confusion and prevent accidental deletion of data.

    Any suggestions are welcome, though. :-D

    Ciao!

    PS: regarding the edit button being in the wrong place, I fixed it for Trac, but it’s broken in other places. It’s very annoying. I’m not sure what I’m doing wrong. Sigh.

  13. docwhat says:

    @prasun:

    Yeah, Wordpad is definitely not what you want to be using. It doesn’t understand UTF-8 at all.

    I usually use notepad++ when I work with Windows. It supports UTF-8.

    Ciao!

  14. Giuseppe says:

    Christian,

    > The second change is the harder to deal with one. Previously I had
    > this flow:
    >
    > 1. Load page
    > 1. delete all files for textareas in this page
    > 2. If file updates on disk then refresh the textarea
    > 3. If user clicks edit:
    > 1. If file doesn\u2019t exist, then create it
    > 2. Open editor on file
    >
    > However, this causes problems because if a user visits the same page
    > twice, then they can end up deleting already done work.

    I don’t understand this. The first time you visit the page you open
    your editor by clicking on ‘edit’. This creates a new file when you
    save (since all previous files have been deleted.) Then you go
    somewhere else and after a while come back to the page you were
    editing. OK, IAT removes all previous files, but you still have your
    editor open with the latest contents. Whenever you save the next
    change, IAT will update the text field. I don’t see how this can
    cause loss of data, unless you close your editor without saving or you
    save but you move to a different page before the field gets updated.
    Unless I am missing something.

    Ciao,

    Giuseppe

  15. docwhat says:

    Giuseppe:

    I think what you say makes sense and matches much what I had originally. I’m trying to remember why I changed it. I think one of the reasons is that there are a lot of stat() calls happening because every textarea is monitored. In the newer code there is also a problem with file extensions; the user can change the file extension at will.

    I’ll need to think about it some.

    Maybe something like this:

    1. Load Page
    2. Walk through all files, looking for ones that match this base-name (host + hash), stripping off extension.
      • If none are found, continue. Don’t monitor for changes until edit button is pressed.
      • If one is found, set the textarea to match that extension, delete the file and start monitoring for changes.
      • If more than one is found, pick one and do the above.

    One problem I do remember is that some editors, like gedit, will empty the buffer for a file that is deleted, which made the original behavior annoying.

    Ciao!

  16. Florin Andrei says:

    Very nice extension!
    Couple of observations:
    1. The fact that the extension can be selected is somewhat “hidden”. It took me a while to discover that I could force a .php extension (*) to the file (to enable syntax highlighting in Gedit). If it could be made a bit more obvious, that would be great.
    2. Would be nice to allow parameters to the editor command-line. E.g., to allow running mcedit in gnome-terminal or something like that.

    (*) – Oh, and I had to add .php to the list. ;-)

  17. docwhat says:

    Florin Andrei:

    Thank you for the complement and for taking the time to give me feedback. :-)

    Regarding the extension changing being hidden. I agree. I originally wanted a right-click on the gumdrop to popup that menu. At the moment, there is a menu, but it is control-click not right-click. This is due to the way the context menu works in browser context in Firefox. I don’t seem to be able to override it. Other developers confirmed it, unfortunately. I have another idea, but I’m not sure it’s a good one….

    Regarding parameters: It would be nice, but because it works across multiple platforms (Windows, Linux, MacOSX) and because firefox doesn’t have execl*() type functions, only the exec() like nsIProcess, I would have to write my own parameter parser and quoter for every platform. This is a very trick and hard to do in a cross-platform way. I may yet do it, but it will be a late addition.

    Meanwhile, you can create a shell script (sh, bash, cmd, bat or whatever your platform handles well) to do what you want. In your example, you could do something like:

    #!/bin/sh
gnome-terminal -x someeditor "$@"

    Thanks again!

    Ciao!

  19. docwhat says:

    PZ: Not currently. I know that Mozex added that feature in the last year or so.

    You’d have to click on the textarea or select it via keyboard before you used the key-combination to fire up your editor. Since you can pick the extension, I’m not entirely sure how this’d work.

    I’ll add it as a future item. Right now, getting the kinks out of the basic system comes first.

    Ciao!

  20. era says:

    Installed this today and love it already. However, it seems to leave the temporary files behind in ~/.mozilla/firefox/i4q7b44rf.default/itsalltext/

    Not a big problem yet, but I expect it will be …

  21. docwhat says:

    era: I’m glad you like it! It does indeed leave temporary files around. However, they should be cleaned up by one of two processes:

    • On exit, they should be deleted by Firefox (assuming it doesn’t crash or something).
    • If the file hangs around more than a certain time (I think a week), then It’s All Text! will delete it on it’s own, assuming your clock isn’t jumping around like crazy.

    Thanks for checking on that though. :-D

    Ciao!

  22. Hugh says:

    For some reason, I don’t see the edit button when composing an email in gmail. The edit button is visible on the “To:” text area where I can type in email addresses, but not in the main text area.

    I can send you a gmail invitation if you want to debug it ;-)

    Thanks for an excellent extension.

  23. Hugh says:

    Too get this working in MacOS X, I had to make a symlink to my editor (in my case emacsclient), then I browsed to the symlink and selected in the “It’s All Text!” preferences.

    For example, in Terminal I found the emacsclient program in /Applications/Aquamacs Emacs.app/Contents/MacOS/bin/emacsclient and made a link like this:

    $ cd ~
    $ ln -s /Applications/Aquamacs Emacs.app/Contents/MacOS/bin/emacsclient .

    Then I switched to Firefox and selected Tools -> Add-Ons, then selected “It’s All Text” and clicked Preferences, then clicked Browse and selected the emacsclient link in my Home directory.

    You can substitute any editior for emacsclient.

  24. docwhat says:

    Hugh: You’re welcome! :-D I’m happy people are using It’s All Text!

    Thanks for describing this strategy for MacOsX users. It’ll be helpful, I’m sure.

    Regarding the button in the wrong place in gmail: I’m still having troubling getting the button in the right place. It’s very irritating. I had a strategy that worked some places, but not others. I now have another strategy that works in other places, but not in some… *sigh* I don’t seem to be able to win.

    Ciao!

  25. Mario Grgic says:

    This is a neat idea. However, edit icon is often not rendered at all for textareas (e.g. gmail compose new mail, slashdot.org comment etc). Sometimes the edit image is rendered “off screen” (for example blogspot comment text area) etc.

    Extension is also supposed to work with entire web pages? In my case context menu is available only on about:blank, and as soon as I load any other page, context menu is not there?

  26. Hugh says:

    Christian: perhaps you could have a special case for sites like gmail that need a different button placement strategy. I know it would be ugly, but it might work.

  27. docwhat says:

    Mario Grgic:

    I finally, finally, finally have fixed the edit button for all the places it has been broken. I think this was the correct fix, I understand new things, etc. etc. The next version should be fixed. Alas, addons.mozilla.org is not yet done migrating. When they do, I’ll submit a new version.

    Re: the context menu. It is one of the last things I am still fixing before version 1. It currently only works when you right-click on a textarea.

    Ciao!

  28. docwhat says:

    As a temporary measure, until addons is back again …

    It’s All Text! Version 0.6.0

    Get the latest at Addons

    I’ll delete this comment once addons is back.

    EDITED: I fixed the above URL. Somehow it got an extra ‘/’. :-/
    EDITED: A newer version is available on addons.

  29. jon says:

    Christian,

    Thank you so much for this – I have it running beautifully on my
    MacBook Pro, with Firefox 2.0.0.3 and Aquamacs, and am using it to
    type this message :-) I couldn’t figure out how to get Darwin Emacs to
    work, but Aquamacs worked first time. Thanks also to Hugh for nice
    clear instructions on how to make that work.

  30. katy says:

    mozilla launched their new, read crappy, addon site and its all text is gone. would you pretty please post it… pretty please & thank you.

  31. docwhat says:

    They have rolled back to the older (working) addons site now. So it’s not an issue at the moment. They had my extension in “the sandbox”. Which I think is a polite way of saying purgitory. If you disliked that experience as much as I did, then sign up for bug 374406.

    Remember to be polite. They made a couple of bad choices, but they have worked really hard on this stuff.

    Meanwhile…

    I posted (about 3 posts above) a temporary link to a newer version, since addons isn’t accepting updates.

  32. Hugh says:

    Hi Christian,

    0.6.0 is working well on my Mac too. I like the context menu.

    I notice that I still can’t edit the main textarea in the GMail compose screen,
    the button doesn’t appear and the context menu is all gray except for the
    Preferences item. So it seems to me that It’s All Text! is not recognizing the
    main textarea as a text area. I guess Google might be doing something funny.

    I also notice that if I bring up the preferences dialog from the context menu,
    there are no buttons that I can use to dismiss it (no OK or Cancel buttons). I
    have to hit Escape to get out. This is probably an OSX thing as the preferences
    dialog is displayed as a drop down sheet attached to the current window, rather
    than in a separate window. See http://flickr.com/photos/vanessahugh/434243324/

    If I launch the preferences dialog by clicking on the Preferences button in the
    Add-ons manager, then I get a normal dialog with a close button. See
    http://flickr.com/photos/vanessahugh/434254886/

    If there is anything I can do to help with these bugs, please tell me.

    Thanks again.

  33. Thomas says:

    Hi,

    I really would like to use this gadget, but, alas, when trying to download it today (26 March, 8.00am CET) from Firefox extensions page it says “Couldn’t install. Bad file hash”.

    Any idea?

  34. docwhat says:

    Hugh:

    Hi! Thanks for trying it out. I’ll take a look at gmail again. :-/ I’ve had a strange bug where in the wordpress admin screen the button won’t show up sometimes. It’s very strange.

    I knew about the Mac OS X problem but have been having a hard time searching for what the problem is. Obviously, I must be using an incorrect call to openDialog(). Your information should help me narrow that down.

    Thanks again for the feedback.

    Ciao!

  36. Dave says:

    ItsAllText (IAT) is one of my favorite plug-ins, and I’ve got plenty. Too many, honestly.

    But it has one behavior that I don’t quite understand. I can live with it, but it makes me think that something’s slightly amiss with the interaction of IAT and Firebug…

    I use the fabulous Firebug web development extension (http://getfirebug.org/) every day. It has a fine feature that makes it easy to inspect a specific element on a page: control-click the element of interest and select “Inspect Element” from the context menu, and it opens Firebug with that element selected in the HTML pane on the left, and its styles showing in the CSS pane on the right. Beauty.

    With IAT installed, however, that selected element has two new properties added to it:

    id=”itsalltext_generated_id__1″

    and

    itsalltext_uid=”1i22272h2135352u2p1k2w1z2x1b1w2d3b1k261i1y3b1p1p”

    These are present no matter what element I select on the page. I guess it’s part of IAT’s inner workings, but it is somewhat distracting.

  37. Pingback: It’s All Text! v0.6+ « Archive « The Doctor What

Comments are closed.