Snippets code from my daily experience

January 4, 2010

VisualDiffer 1.2 beta 1

I spent the Christmas holidays working on VisualDiffer, the Komodo visual folders/files comparison extension.

Now I want to migrate VisualDiffer from extension to standalone application using XULRunner because the folders comparison feature is mature and using it from an extension can be a bit complicated.

The migration requires some intermediate steps

  • Remove dependencies from Komodo code (especially the unified diff algorithm)
  • Remove dependencies from unified diff algorithm!!
  • Complete the file comparison feature allowing in-place editing using Bespin.
    Bespin can greatly simplify syntax highlight for different languages, search in file and so on
    Honestly I’m considering also to stay with Scintilla (actually used by Komodo) but I love Bespin
  • Use a cool graphic layout, especially toolbar icons
    I’m not a GIMP guru so if somebody would to help me he/she would be welcomed🙂
  • Allow user defined fonts and colors (low priority task)

I hope to release the VisualDiffer V1.2 for Komodo in a couple of weeks but also not Komodo aficionados can take a look to it installing the beta version on Firefox 3.5.x (also 3.6b5) and SeaMonkey 2.x.

Under Firefox and SeaMonkey the “files differ” feature isn’t implemented (Komodo dependencies) but you can test the folders differ feature that is totally based on standard Gecko interfaces, you can find the VisualDiffer item under the Tools menu.

Obviously VisualDiffer on Firefox is a nonsense because it isn’t a browser oriented extension I distribute this version with Firefox support with the hope a larger community can try it and give me feedback before I jump on the XULRunner world.

The V1.2 beta 1 can be downloaded from here.

VisualDiffer is inspired by the fantastic Beyond Compare but this isn’t a mystery😉

August 17, 2009

Experimenting with Bespin plugins

Filed under: bespin — dafi @ 11:38 am

code_square I’ve started to use Bespin intensively, long editing sessions to test how much it fits my needs.

Bespin is very good and I’m really satisfied to use it as general purpose collaboration editor but I’m a very lazy developer and I need many little features, not yet present on Bespin, making my coding life easier.

Bespin supports plugins allowing users to write Javascript code that is easily “plugged” into editor so I started to study its programming model.

There are hundred of APIs but I focused my attention to the specific sections shown below, discovering an excellent support.

  • General text handling (unicode support, cursor position and so on)
  • Text selection
  • Undo/Redo groups of text operations
  • Clipboard

More details about installing and using plugins are available at Bespin wiki

A brief survey of Bespin architecture

When plugins interact with the editor soon or later they must use some core components.

  • editor itself; It holds reference to all editor structures
  • edit session; The current file buffer user are editing
  • model; The most important component, it allows to access to text abstracting internal character representation (eg unicode), you see anything as rows and columns
  • actions; move cursor, handle history (undo/redo) and many other text actions

It is possible to access to components using the Bespin singletons

bespin.get('editor') // access to the editor component

or navigating the data structure (ok you must use always a starting singleton😛 )

bespin.get('editSession').editor // access to the editor component starting from editSession

The “Comment Selection” plugin

To understand how Bespin APIs work I’ve written a stupid but useful (at least for me) plugin used to comment out a text selection based on file language, so CSS selected lines are commented using /* … */, HTML using <!– … –> and so on.

The “comment selection” is treated as a single text operation, if ten lines are commented and user makes undo all lines are undone, user doesn’t need to make ten times undo!
Grouping operations for undo/redo it is possible thanks to beginEdit()/endEdit() methods


Stop blah blah blah, I want to read code!

The plugin code is very easy.

We get the selection info (not the text) and then use the model to insert characters, this allows to take benefits of history manager (undo/redo) and character internal representation.

exports.commentSelection = function(instruction) {
    var currPath = bespin.get('editSession').path;
    var extFile = bespin.util.path.fileType(currPath);
    var commentDelimiters = exports.getCommentDelimitersByLang(extFile);

    if (typeof (commentDelimiters) == "undefined") {

    var selection = bespin.get('editor').getSelection();
    var model = bespin.get('editSession').editor.model;
    var editor = bespin.get('editSession').editor;

    var startRow;
    var endRow;
    if (selection) {
      startRow = selection.startModelPos.row;
      endRow = selection.endModelPos.row;
    } else {
      startRow = endRow = editor.getCursorPos().row;
    instruction.addOutput(startRow + "," + endRow + " model" + model);
    for (var r = startRow; r <= endRow; r++) {
      var modelPos = {row : r, col : 0};
      model.insertCharacters(modelPos, commentDelimiters.begin);
      modelPos.col = model.rows[r].length;
      model.insertCharacters(modelPos, commentDelimiters.end);

You can view the full plugin code following me at, do login and from command line type

follow dafi

SVN aficionados can browse the code here

Create a free website or blog at


Get every new post delivered to your Inbox.