How to determine OT Text Diff

Question

I am trying to implement sharedb operations onto my front end code. I currently have it so that it submits an operation ( https://github.com/ottypes/json0 ), specifically text0 , when my react component triggers its onChange event. For example:

If my text were: Hello World

and I delete l to make it Hello Word

and then i add s at end to make it Hello Words

I want it so that my OT text difference should have the operations to submit to rest of clients (unless this is wrong)

[{p: 9, d: 'l'}, {p: 10, i: 's'}]

What is the best way to generate these operations using a library or by hand? I looked into perhaps using diff library, but it does not give any indices of where the operation took place despite giving what the insertion and deletion operations are.

Answer 1

You could use the browser-provided selection properties and onkeydown events to build the changesets by hand, or use a diffing library, eg https://www.npmjs.com/package/diff_match_patch by Neil Fraser has been very useful to me (disclaimer: I am the publisher of that package.)