How do I implement co-editing with the Google Drive real-time API?

I am developing a web application that uses the realtime google drive API . The API is used to store document data and to synchronize all changes between active employees.

Now I want to add support for rich text boxes (just some basics like bold, underline and links) for this application. The text box must include co-authoring text similar to Google Docs . I have searched and experimented a few times but cannot find the right solution for sharing data or how to create a suitable data model that will work with the Drive Realtime API.

There are several ways to exchange HTML (or similar markup) in CollaborativeSting . But that won't work because it will probably break the markup sooner or later.

Another (probably much better) starting point is to use a more abstract data model like the Quill Editor . (I would like to use this editor later if possible, but it shouldn't be.)

Rich Text Model for Hello! Here is the link: "looks like this:

var doc = [
    { insert: "Hello!", attributes: { bold: true } },
    { insert: " Here is a " },
    { insert: "link.", attributes: { href: 'http://example.org' } }
];

      

        
        
        
      

    

I could convert the top example document to " Hello! This is a link. " With these instructions:

var operation = [
    { retain: 7 },
    { insert: "That's", attributes: { italic: true } },
    { delete: 1 }
];

      

        
        
        
      

    

But keeping this model in the CollaborativeList doesn't seem to be a solution either if more collaborators are typing or formatting at the same time. Especially since I cannot influence the server side behavior.

Can anyone think of a suitable model or data exchange process that will work with rich text? It shouldn't be the best solution (if it's somewhere in between). Plain text exchange is incredibly easy with this API, but it seems to me that this text is not possible for me.

Thanks for any help!

Update

I can clarify my question with the new information Cheryl Simon provided me below . Using IndexReferences Im it is now possible to isolate plain text from format information.

I've added code that saves the user's local text selection (which can be a single position or range) and restores it after changing the text. This works great. I could also add support for multiple text options for the same user - because each user can only change their own selection.

But I cannot define a model where multiple users can add and remove ranges at the same time, eg. thumbnail. If I use CollaborativeList for bold text with multiple arrays [start, end]

in it, I end up with a split dataset if two users set an overlapping range at the same time, or if two users want to edit the same range at the same time (by deleting and re-entering ranges, or by moving the range markers existing range).

Below is a snippet of pseudocode. All indexes are saved as IndexReferences:

Model:           
[                User1: makeBold([8,20])
    [ 0, 10]     => removeValue([0,10]), removeValue([15,36]), push([0,36])
    [15, 36]       
    [77, 82]     User2: removeBold([0,5])
]                => removeValue([0,10]), push([6,10])

      

        
        
        
      

    

If both users start with the dataset shown on the left, and the actions of the first user are applied first, the second user can no longer delete [0,10]

(because it has been replaced), so the text remains bold and clicking [6,10]

into the list results in duplicate data. How can I prevent these problems?