How the collaborative editing function of the text editor is implemented

A developer of CKEditor, an open source text editor that can easily be embedded in a Web page, posts on the official blog about commitment and ingenuity in implementing the real-time collaborative editing function.

Lessons learned from creating a rich-text editor with real-time collaboration
https://ckeditor.com/blog/Lessons-learned-from-creating-a-rich-text-editor-with-real-time-collaboration/

CKEditor is a visual tool like the following.


In implementing the collaborative editing function, CKEditor stuck to the following points.

· Do not lock content <br> Allow multiple people to edit same paragraph, table, list, etc at the same time.

- Automatically resolve conflicts <br> Automatically resolve conflicts when the same place is edited.

· All functions can be used <br> There is no such thing that the table can not be used during collaborative editing, only the basic functions can be used, such as the list can not be nested.

· Conflict resolving intention: Conflict is resolved as intended by the user.

According to the blog, "What to do with multiple people editing the same part at the same time" is almost all of the problem of collaborative editing function. For example, suppose two users deleted part of the same paragraph. In the figure below, it shows how user A deleted "ORE" from user original "LOREM IPSUM" and user B deleted "IP". When deleting which character is deleted "in the form of deleting 3 characters from the 2nd character" or "deleting 2 characters from the 7th character", since it is deviated from the original sentence by editing, another sentence Will be displayed.


Two methods, " operational transformation (OT) " and " conflict-free replicate data type ", are effective candidates for resolving the above conflict . By using these methods, the editor can be made the same regardless of the order of operations. Of these, CKEditor said that it adopted the former "OT". However, the basic OT is assumed to be used in a linear data model used to express plain text, and it seems that it was necessary to devise a method to use OT in tree-based sentences such as HTML .

The linear data model is as follows. Ordinary text files are decorated somewhat like bold or paragraph.


The text of the tree structure is as follows, it can handle more advanced structure.


When applying OT to sentences in a tree structure, a problem occurred in the following cases.

1. User A changes the list item type from bullet to number and at the same time B breaks the item


2. When two or more users simultaneously line-break in the same paragraph


3. User B applies " quote " to the paragraph and B performs a line feed at the same time


4. When user A links the sentence and B inserts a character in the meantime


5. When user A links the sentence and B deletes the character in between


In order to deal with these problems, the development team has added "insert", "delete", "set attributes" in addition to OT's basic operations, "rename elements" such as changing the paragraph to a new list, It is said that the operation of "split / join / comprehensive / discharge" for clarifying the operation was introduced to OT. In addition, he added that the insertion of elements and the insertion of text into separate operations, and also introduced the "marker" operation.

By introducing a new operation, it became possible to respond to minor differences in operation, and sentences were changed as intended by the user. In this way CKEditor could add collaborative editing functions without compromising the user experience.