Mirroring with Ace Editor. How to Remove Text of Mirrored Editor

Question

I've been stuck on this problem all day. I created two Ace Editors side by side in the browser. The right editor is made read only and is used to mirror the left editor. I then set up some Socket.IO events to basically send the change from the Editor on the left, to the Editor on the right. All functionality in updating the right editor is working perfectly except for when I delete something. I feel like I've tried everything but the closest I could get is when I delete something on the left, it deletes the character in the top left corner on the right.

Here's the code I have so far.

      var oEditor = ace.edit("rightEditor");
      oEditor.setTheme("ace/theme/eclipse");
      oEditor.getSession().setUseWrapMode(true);
      oEditor.getSession().setMode("ace/mode/javascript");
      oEditor.setReadOnly(true);
      var socket = io.connect('http://localhost');
        socket.on('sendFirstChange', function(text){
          oEditor.getSession().setValue(text.val);
        })
        socket.on('sendChange', function (data) {
          if(data.data.action === 'insertText'){
            var start = data.data.range.start.column;
            var end = data.data.range.start.row;
            oEditor.getSession().insert({row: end, column: start},data.data.text);
          } else if(data.data.action === 'removeText'){
            oEditor.remove(); //this is where it's not working
          }
        });

Any ideas?

Thanks so much!

Answer 1

*a user, thanks for the Mirror Class. I figured this out last night but I couldn't post it as an answer until today.

Well I think I finally figured it out. This is for the archives. I'm not sure if this is the most efficient thing but instead of trying to delicately replace the code in the right editor, I'm just sending over all the text in the left one and completely replacing all the code in the right editor. Seems to be working pretty good.

function(scope, ele, attrs) {   
      var oEditor = ace.edit("rightEditor");
      oEditor.setTheme("ace/theme/eclipse");
      oEditor.getSession().setUseWrapMode(true);
      oEditor.getSession().setMode("ace/mode/javascript");
      oEditor.setReadOnly(true);
      var socket = io.connect('http://localhost');
        socket.on('sendChange', function (data, text) {
          oEditor.getSession().setValue(text);
        });
      scope.oEditor = oEditor;
  }