Stealing a great idea

It’s been almost two years since my last post about Dr. Twoot, my personal Twitter client. And if the gang at the Iconfactory hadn’t come up with the brilliant idea of adding an “Edit Tweet” button to Twitterrific for iOS, that two-year streak would’ve continued. So blame them.

My guess is that every Twitter client developer had two reactions to “Edit Tweet”:

  1. Why didn’t I think of that?
  2. I need to add that right away.

The value of being able to edit tweets is obvious to anyone who’s winced at seeing a typo fly out in his or her Twitter stream. Because the Twitter API has no provision for editing, your only recourse is to delete the original and post a corrected version. Behind the scenes, this is what the “Edit Tweet” button does, but it cleverly makes it seem as if you’re editing, not replacing.

The implementation in Dr. Twoot was pretty simple, and I had it working a couple of days after the Twitterrific update was released. I added an edit (✍) button to my tweets just before the delete (⌫) button.

Dr. Twoot with tweet editing

The function triggered by the edit button is editTweet:

384:  function editTweet(msg_id) {
385:    // Stealing an idea from Twitteriffic, we're going to delete the tweet
386:    // and put the original content in the status field for editing.
387:    // Get the original content.
388:    $.getJSON(CGI, {url:'https://api.twitter.com/1.1/statuses/show/' + msg_id + ".json"},
389:      function(data){
390:        orig_content = undoShortening(data.text, data.entities.urls);
391:        // Delete it.
392:        $.post(CGI, {url:'https://api.twitter.com/1.1/statuses/destroy/' + msg_id + '.json', id:msg_id});
393:        $("#msg-" + msg_id).css('display', 'none');
394:        // Fill the status field with the original content.
395:        $("#status").val(orig_content);
396:        $("#status").focus();
397:        $("#status").caret(orig_content.length, orig_content.length);
398:        charCountdown();
399:      }
400:    );
401:    return;
402:  }

It grabs the text of the tweet to be “edited,” replacing any shortened URLs with their unshortened original versions. It then deletes that tweet from Twitter, hides the local copy, fills the status field with the just-deleted content, and puts the blinking caret at the end of the tweet. I can then edit the content and press the Update button as usual.

The undoShortening function, which replaces the shortened URLs is pretty simple, too:

375:  function undoShortening(text, links){
376:    // Return the text of a tweet with the shortened URLs relengthened.
377:    var lengthened = text;
378:    $.each(links, function(i, link) {
379:      lengthened = lengthened.replace(link.url, link.expanded_url);
380:    });
381:    return lengthened;
382:  }

It works because Twitter stores both the shortened and expanded URLs as entities that can be retrieved through the API. Images are also entities, and you’ll note I haven’t included a provision for handling them. That’s because Dr. Twoot doesn’t have a way to tweet images—I use a different method to add images to my tweets. This isn’t the most satisfying situation, but I can live with it.

The “Edit Tweet” button reminds me of Birdhouse’s drafts feature: a clever idea that you just knew would be added other apps in short order. I got my stealing done early.