Ace-editor example for v13?

Made an issue about this yesterday, but perhaps it’s better to bring up for discussion here? In the FOSDEM talk it was mentioned that there’s current support for ace-editor, but I couldn’t find an example in the current version… only an old reference on y-js.org – but I’m guessing the whole API etc has changed quite a bit since then.

Curious to test Yjs as the collab backend of COCODING on P5LIVE which is currently using the CRDT implementation from peeredit – of which I could imagine both peeredit’s rga.js and Yjs’ CRDT algorithm are based on the HAL paper? Was just listening to the peer-to-peer podcast and dug the idea of hotswapping between webRTC + websockets. Websockets sounds like the more stable system especially if a tool is used in a classrooom setting with 25 peers… but if 1:1 or so and used for live-coding-music-collaboration, sounds like webRTC would produce the least latency = Yjs can do both?? Also interested in being able to completely replace the shared contents/editor with new text and paste large chunks of code between peers. The demo’s on Yjs.dev are really impressive for pasting/syncing chunks of text… curious if one would have the same results using ace-editor??

ps. I’m tracking cursor positions in ace-editor, so perhaps I can help somehow to give that binding a √

Hey @ffd8, sorry for the late answer.

Unfortunately, an ace binding still doesn’t exist for Yjs v13.

The editor bindings for text editors are actually pretty straight forward to implement. Have a look at GitHub - yjs/y-codemirror: Yjs CodeMirror Binding. The hard part is tracking and rendering cursor positions.

There is a bit of documentation on the Yjs approach in the readme.

Websockets sounds like the more stable system especially if a tool is used in a classrooom setting with 25 peers… but if 1:1 or so and used for live-coding-music-collaboration, sounds like webRTC would produce the least latency = Yjs can do both??

Sure, you can use any provider in any combination (even several providers at the same time).

Hi @dmonad – FYI, just published a rough Ace Editor binding for Yjs, y-ace!
I’m not so hip with writing tests etc, so I wasn’t sure it made sense to fork/PR to your empty y-ace repo, or simply provide this as a starting ground for you or others to polish in the way the other bindings have been made? Luckily Federico of room.sh was kind enough to share the binding they had for the very first versions of Yjs v13.0 (which have changed drastically to the now v13.4+), but it offered a great starting point to work with. The past days I’ve managed to sync cursors and selection via custom technique within the ace-binding (probably kinda sloppy). Initially tried to implement the existing ace-collab-ext project, but just couldn’t get it working… nevertheless the awareness protocol worked great for my needs.

The project I’m planning to try and implement Yjs for is built upon socket.io for existing websocket everything… curious if there’s a documented way to continue using it with Yjs? I found your gist on using socket.io but it wasn’t clear at all to me how to implement… Curious if the simplest approach is leaving my user/roles/status/etc logic within the existing socket.io and simply have the editor syncing taking place across y-websockets? Maybe a bad idea to run those multiple websockets? With socket.io, I’m using the namespace’s function within a class for isolating rooms, variables, etc… (P5LIVE COCODING server) – Do you have an example for doing basic emit/broadcast within the y-websocket server or most things are passed through the awarness states? I utilize socket.io’s ability to broacast to all, just the user, everyone but the user, etc… not sure if this can be done within y-websockets? Any tips are appreciated.

Lastly, do you have links/documentation for using combinations of webRTC and websocket providers? I’ve tried searching the forum for ‘toggle, swap, hotswap, switch’ etc – wondering if there’s a technique for using webRTC if less than say 5 peers, but switch provider to websockets the moment it gets to be more? If its more stable to use websockets for larger group size, then I look forward to experiement with having a parallel layer of synced shared values like midi data which def would benefit from webRTC lag (or lack thereof).

Hey @ffd8,

This looks great!

Feel free to open a PR to y-ace in the Yjs organization. I’d be happy to make you a maintainer of that package. Yet another editor binding thanks to you! :partying_face:

Regarding using combinations of WebRTC and Websocket providers, you can simply register several providers to a Yjs document:

const ydoc = Y.Doc()
const webrtcProvider = new WebrtcProvider(ydoc, 'room')
let websocketsProvider = new WebsocketProvider(ydoc, URL, 'room')

// switch to a different websocket provider
websocketsProvider.destroy() // [fixed the type mentioned in the below comment]
websocketsProvider = new WebsocketProvider(ydoc, URL, 'other room')

That is possible because the Yjs document doesn’t even know about the provider packages.

You should be able to port y-websocket to use socket.io instead. If you want to integrate it into your existing application, you probably want to create a custom protocol anyway. You could even start fresh, because y-websocket implements a lot of the existing functionality that is in socket.io (ping, automatic reconnect, event system, …). Everything you need to know about how to synchronize Yjs documents is wrapped in a relatively simple API: https://docs.yjs.dev/api/document-updates

y-webrtc works with larger groups (>50) as well. But it is not as reliable as y-websocket, because there are still some bugs in the y-webrtc repository that I didn’t have to fix yet. y-websocket is definitely better maintained.

Thanks + sounds good. Still need to clean up some things and likely make the cursors its own mini-library so it could be attached in various ways. Will slowly make a PR to get this rolling.

Also thanks for the example of multiple providers = haha creates more questions… for another thread.

FYI, I think there’s a small typo on the:
websocketProvider.destroy() - should be websocketsProvider.destroy() with s?

Here’s a 4up demo with p5js live coding (baby steps for integration with P5LIVE),
working really smoothly!
https://www.instagram.com/p/CPBererhzOb/

1 Like