Remote users' cursors not moving in self-hosted Ace example

Hey everyone,

I came across Convergence in my search for an easy way to implement a live code editor to allow students using our in-house IDE to share their code with instructors to get help by having instructors directly look at and edit the code. The full code editor example was really helpful and easy to deploy on our server, with a Convergence Omnibus Docker container running behind a node.js proxy, which itself handles all user authn/authz and the actual IDE.

However, I started having issues when trying to merge the Ace-specific example into our IDE.

I’m attaching a GIF showing what happens when I try to run the example code with our Docker Convergence Omnibus container + node.js proxy (which I determined was working with the help of the other code editor demo I linked above).

As you can see, when I move the other person’s cursor around, my remote cursor is not following the other one. Making edits works just fine, but the entire time, the remote cursor on both sides just remains at the top of the editor, and selecting content also starts from that point.

I have spent quite a few days trying to pinpoint the part of the code that’s not letting cursor position get updated, but to no avail. The only changes I made was to copy over the index.html from the Convergence example itself, stripping it down to the basic Ace editor used, changing the paths to locally hosted versions of the Convergence libraries (that I got by installing via npm as per the instructions) and changing the ace.js file in that folder to use a specific username and convergence ID.

Here are the pastebins for the modified index.html and the ace.js files. The “convdemo/ace_example” folder in the index.html links is the javascript-examples repository, from where I used the Ace-specific example.

Where should I look to fix my issue? I know it’s not the server because as I mentioned it works with the full-fledged code editor demo, just not the Ace-specific one, so it has to be in the client-side code for the example.

Greetings. I haven’t had a chance to look at the code yet, will look in the morning. Most of the time with this particular example it’s usually the CSS. We have seen that if the CSS is not right, that the cursor won’t move. Usually the position attribute is not getting to absolute by the CSS file…

I can’t believe that was it! I’m so sorry to have wasted your time. Thank you so much!

I just had to add the CSS from the ace_collab_ext NPM module:

<link href="/convdemo/ace_example/node_modules/@convergence/ace-collab-ext/css/ace-collab-ext.css" rel="stylesheet">

I’m really grateful. Thank you so much!

1 Like