Multiplayer Tip Editing With Course Builder
This guide explores how to employ a multiplayer markdown editor, powered by CodeMirror and PartyKit, allowing multiple users to code collaboratively in real-time. The process begins by setting up a designated workspace, termed a 'room,' and establishing the editor's parameters. Users then join the PartyKit server to facilitate interaction.
The system employs both CodeMirror and Yjs, providing real-time updates and boosting cooperative functionality. The documentation also recognizes room for enhancements, like the potential integration of custom gutters and chat capabilities. The object of the exercise is to optimize the interactive features of CodeMirror, PartyKit, and Yjs to construct a user-friendly, cooperative coding environment.
Test stuff.
Transcript
[00:00] This is a multiplayer markdown editor. It's driven by CodeMirror and PartyKit. CodeMirror is the editor itself. It's an extensible, robust, in-browser, IDE-like code editor. So you get all sorts of great stuff like this and just really functions and gives you kind of a nice editing and typing experience which is what I am looking for here.
[00:24] PartyKit gives you the connection so under the hood it's using Yjs and CodeMirror and we're getting this connection with PartyKit and Sockets through their infrastructure and we end up with a collaborative experience. You can see cursor highlighting on both sides or if you type in text you can edit it from either window, like so, and you get that real-time updates, which gives a very nice experience if you're editing content with two different people, ten different people, you get a really great way to get in there and do that and have a mutual typing experience that is fantastic. One of the things that I want to do is add custom gutters in here and add chat and really extend it that way, and I think that'll be cool. The implementation itself, so this is down in the page and there's a form here, and inside the form is the CodeMirror box. So this is all kind of self-contained, the editing and real-time nature of it.
[01:32] So it sets up, what happens is we set up a room, and the room is based on the current object that we're looking at. So in this case, our room name is tipedit with the tip ID. So you pass a room name in, so The editor is in the context of basically this page. Whatever the slug is, easy tip, whatever here, that's the context and that's the room. If I join this page, if I go edit this lesson, I join a room on the PartyKit server.
[02:06] I'm joining the party. This is a use effect. There's two, the element and the room name, where the element is set as a ref. Element gets set here. We're using state.
[02:22] We're setting element. That node is this ref to the div here, and basically just telling CodeMirror where it is set up. So this sets up the party kit, just y party kit provider, and this is the y here is yjs, so this is a connector between PartyKit and yjs. We pass it a ydoc, the document format that yjs uses to speak, and down here you can actually see it getting the text specifically for CodeMirror. It supports several other editors like the popular ones, but now we have this text and we're able to move that to a string and then we pass that into the current state basically of CodeMirror in this create.
[03:04] They give you a bundle of extensions. CodeMirror's all about extensions, so when you're adding different languages or different kind of... And then YCollab, which comes from the YCodeMirror.next. This is for, I think, CodeMirror 6 is what the .next is all about. But YCollab is the YJS collaboration adapter for CodeMirror, which then feeds back into PartyKit to give us that multiplayer.
[03:32] The example I used, which was this great one from the LiveBlocks blog. LiveBlocks is another real-time service giving you that kind of multiplayer. So we set up the view, The view gets added to the element down here and now we have a socket connected CodeMirror editor in the browser, which is what is running over here.