Collaborative document editor7/25/2023 ![]() ![]() Monaco is the editor being used by VS Code. ![]() For instance CodeMirror and Monaco are specialized for editing code, so if you want to make a collaborative code editor such as VS Code Live Share, you should look into those. Fortunately, Quill.js has good support for this, but there are plenty of options. What you need is for the editor to be easy to work it, as you need to update the document from your model in the background, and be able to separate the changes being made from the local user, and the ones incoming from other users. I found Quill.js to be quite easy to work with. With WOOT, these kinds of concurrent updates are handled, so that the intent of the user is as expected.įirst of all, you need an editor that has good APIs for updating the document, such as ProseMirror, Quill.js, CodeMirror, Monaco among others. This is obviously not the desired outcome. What happens is that both delete the same character, but when they receive the delete operation, both have already deleted that character, so both end up deleting one extra character, since now the indexes has changed. In the following example, both users delete the same character locally first, then they send it to the each other. Still if two users add a character between A and C, then the algorithm will place one of those before the other based on identifier of the user who inserted the character. So B will be described as being next to A and C, and not by any index. WOOT will instead describe a character by the identifier of its neighbors. ![]() A problem appears because they apply the operations in different orders, which makes their copy of the document diverge into different states.Ĭlearly using indexes for dealing with concurrent updates wont work in this scenario. Simultaneously Alice decides to make an insert. Bob wants to remove a character at a position. In the following image you can see two users editing a document together. But you soon would run into problems if two users simultaneously makes an update at the same index. For instance ABC consists of three characters, A comes first with index 0, B after A at index 1 and so on. If you think of text being edited, it's easy to think in terms of indexes. CRDT WOOT is one of those.Ī collaborative editor consists of several components, a text editor, a model which can solve any conflicting updates, and a communication layer that can send updates to and from users. ![]() Conflict Free Replicated Data-types is a collection of data types that makes it possible to solve any conflicting updates. The document is updated in real-time, and if a user loses connection, the document will be synced when a connection is re-established. I have created an editor, where users are able to work on a document together. What makes this type of system interesting from a technical perspective is that conflicting updates are bound to happen, and you have to make sure they don't cause any issues in order to have a functioning collaborative editor. This lets users focus on the content, and not have to worry about resolving any conflicting changes between edits. Users can make changes and the document is being updated and synchronized in the background. The code is in the github repository.Ī collaborative editor allows multiple users to edit a document in real-time. An application that demonstrates how it works can be found here. In this article I look into a particular algorithm called CRDT WOOT, where I describe how it works. A collaborative editor allows users to work on a document together in real-time. ![]()
0 Comments
Leave a Reply. |