JavaScript library for dealing with merging two conflicting changes to an underlying text file (like git)? [closed]

I am imagining sort of recreating the Wikipedia edit experience, but in Next.js/React/JS. According to ChatGPT, when two users are editing a Wikipedia page at the same time and save close together:

MediaWiki will detect the conflict and generate an “edit conflict” page. This page will display both versions of the text, highlighting the conflicting parts. Editors can then manually merge the changes or choose one version over the other. They can also make further edits to resolve the conflict.

The only UI example I can see of that currently is this:

enter image description here


How can this be implemented in JavaScript-land? Is there a library for doing this? I have seen jsdiff, for generating visual text diffs in JS, but the “resolving the conflict” part I’m not so sure how to accomplish that. Maybe that is kind of a UX question.

I would only really like to have a simple solution as follows (not a full git alternative): multiple users are editing a file. When you start editing, it creates a “fork” or “branch” of the file, in draft mode. When you are complete, you try and merge your branch draft into the original file. If changes were made since you last branched, then it does a diff, and shows you the diff. The question is, what should be done to allow for resolving the diff?

One solution would be a “take one or the other” solution. Another solution would be to do like git does and how I fix merge conflicts in git manually in the text editor, with the >>>>>> etc. boundaries. Is there a tool to do that in JS? Or could I hack git on the CLI to do that against two files somehow (that would be fast)?

What are the options here basically?

Sidenote: The more I think about this, the more I’m considering just having users add their blog posts directly into a “blog post git repo”, and deal with it that way. There are barriers to entry and also problems with that approach, but at least then I wouldn’t have to reinvent the wheel on this complex problem so much.

  • …I’m considering just having users add their blog posts directly into a “blog post git repo”…” What would you gonna do with conflicts in Git (during merge)?

    – 




So this explains slightly how the editor interface works on Wikipedia:

  • For lines that are the same, they are shown in grey stretching full width.
  • Lines that differ are shown in pairs. On the left is the yellow other, and on the right is the blue yours.
  • You can edit either one, and then click publish.

I think this json-diff-patch library might be the ticket, then building on top of it this sort of interface. If you know of anything better, please post an another answer.

Leave a Comment