jsdiff | A javascript text differencing implementation

Forgive me if this question has been asked before. I'm sure it has since a classic problem. But nevertheless, I will ask it since I couldn't locate a solution.

• I have a mongo/mongoose/node stack API for a note taking application.
• Users of the app can open it up in different devices or browser tabs and sometimes end up overriding their own notes.

Here is a time-linear example of a single user with different mediums which encounters the problem:

1. User opens app in phone (offline)
2. Later, User opens the app in browser and edits a specific note.
3. User goes back to app in phone and edits same note. Now the phone app. overrides the edits made in #2 because phone was "out of sync".

There are two main problems:
1. The app does not initiate a sync. It remains out of sync unless the user manually clicks refresh.
2. Merging of the two notes is difficult because it's not as simple as the last one being the authoritative one but rather, I think that it needs to merge the two together elegantly (think github diff)

What is a known strategy for handling such problem? My initial research points to something like jsdiff which highlights differences but it does not take into account syncing and revision resolution with mongoose.

TLDR; I got multiple notes. I need to merge them. They may vary.

I'm using the npm library jsdiff, which has a function that determines the difference between two strings. This is a synchronous function, but given two large, very different strings, it will take extremely long periods of time to compute.

How to implement diff-match-patch or jsDiff in Angular 4?

I've tried

After all unsuccessful tries I had to ask for the help. The thing is I want to make script which will automatically login, go to specific tab ("WAN"), click appropriate check box (to disable NAT) and log out. (It's actually Huawei GPON router HG8245)..

My code goes fine until the check box, so...

I need a textbox, where everytime the text changes, I know what exactly has changed. I'm currently using a JQuery's listener for changes in my input element, and what I do is:

1. When the text changes
2. Get the text from the box a1 and compare to what I have in box a2.
3. If there are changes, log them into output textarea

Here is a Sample https://codepen.io/nikolaevra/pen/eeWWbo

I'm currently using the following diff library https://github.com/kpdecker/jsdiff, and it has O(NM) efficiency, which is a lot.

Is there a way to get the exact change that was made to the textarea using JQuery or anything like that? For example, if I had test in both a1 and a2 and then changed a1 to be testing, I want to see ing as the change that was made.

EDIT: I tried playing around with the method a little bit and this is one problem that I found. When I run diff = "testing".replace("test",''); => ing just as required, but when I try diff = "testing a potato cannon".replace("testing potato cannon",''); => testing a potato cannon, where I only changed one character. This is a lot of overhead that I wanted to avoid. In that case, I would only want to know where the value has been changed and what it has been changed to. Not the entire tail of the string.

I was trying to install this npm package from its github repo using this command: