Integrating Google diff-match-patch with AutoMerge.Text

This post outlines the use of Google’s diff-match-patch library to generate patches that can be translated to operations against an AutoMerge.Text CRDT for situations when deriving the operations directly from user interactions is cumbersome.

Automerge is a so-called Conflict-Free Replicated Data Type (CRDT), which allows concurrent changes on different devices to be merged automatically without requiring any central server.

Automerge.Text provides experimental support for collaborative text editing. Under the hood, text is represented as a list of characters, which is edited by inserting or deleting individual characters. Compared to using a regular JavaScript array, Automerge.Text offers better performance.

However, using the AutoMerge.Text API directly is somewhat cumbersome in practice:

It is of course possible to track every keypress in a text field and translate them to insert/delete operations, but this requires handling of a lot of corner cases like selection tracking, handling clipboard paste etc.

Many javascript text editor components (eg. Quill, Draft etc.) provide deltas in the change events and we can translate them into AutoMerge operations.

An alternative to the above is using Google’s diff-match-patch library to compute patches that represent the change between the source document and changed document, and we can easily translate these patches to changes in AutoMerge Text data structure.

This comes in particularly handly when we don’t have control over the editor component, and deriving change deltas from user interactions is not very straightforward.