Ace Editor and meteor for collaborative code editing: Observe hangs app

Question

I am trying to make a basic collaborative code editor in Meteor using the Ace editor. The javascript is as follows: var file Meteor.startup(function(){

        Session.set("file", "fileID");
        var query = Files.find({_id : Session.get("fileId")});

        var handle = query.observe({        
          changed : function(newDoc, oldDoc) {
              if(editor !== undefined){
                console.log("doc was changed from ", oldDoc.contents, "to ",  newDoc.contents);
                editor.setValue(newDoc.contents);
              }
              handle.stop();
            }
        });         

    editor.getSession().on('change', function(e) {
        // update the File collection
        if(Session.get('file')) {
            Files.update({_id: Session.get("file")}, 
              { $set : 
                { 
                  contents : editor.getValue()
                }
              });
        }
    });     

});

The editor is able to update the database without much ado, however, the query that handles observing changes and setting the document to a new value basically just hangs and doesn't do anything. What's the issue? Or in general what's a better way to solve this problem (of making the ace editor collaborative using meteor...assuming I want to code it myself..and not use meteorite or something)

Thanks!

Answer 1

Using the ace editor directly with Meteor will result in laggy operations and clunky interactions between users unless you write and debug a whole lot of code.

Another approach is to attach the ShareJS stack to Meteor, because it integrates really well with ace. In fact, I ended up doing this after looking at other ways to do collaborative editing in Meteor:

https://github.com/mizzao/meteor-sharejs

There is an (out-of-date) demo here: http://documents.meteor.com