How to tag text, to keep track of unique edits

Question

So, for example in database I have three users: Peter, John and Sara. There is a specific field, in which all three users can write. Peter writes:

"I like apples"

, after that John appends with

" and I like bananas"

. Now I have field which says

"I like apples and I like bananas"

, so If I would like to display, which part was writen by whom, my approuch would be to create html tags: The field would be:

<span class="text-sequence-1">I like apples</span><span class="text-sequence-2"> and I like bananas</span>

and then, from database I would pick the sentences by its order and using CSS on hover on display additional content, on each part of hover on.

1. 1st problem. The problem is if, the third user, Sara, comes and updates the text, which belongs to both original. Which can be overcome if I allow to edit one by one Johns and Peters tags. Then I get edited span inside of original spans and could track which part was edited and how. If I did like this, I would still face a second problem:
2. 2nd problem. If Sara decides to edit, for example Johns part, a few times. I would still get nested badly. I could use something like #number tags instead of spans, so I can track where each edition ends, but then I couldn't apply CSS code to them to color which part belongs to who and apply additional effects on hover, like showing a box, who edited it and when. Any ideas how could I implement it? Sorry for my bad english.

Answer 1

Since you are using a database, keep track of the edits in a separate table. For each edit, keep the following fields:

• row-ID of this edit (primary key)
• the parent row-ID (the row-ID of the "current edit" when the edit was started/confirmed; see below for how to use)
• the author that edited things
• the time-stamp
• an optional short text describing what was changed (for example, "fixed spelling")

When showing the field, you can then display a link to a "history", that would show who edited what when. You can show individual differences between any two versions such as Wikipedia does when you look at the history of a page - there are many libraries to do that, with highlighting and all. This library seems nice, but there are many others, in all sorts of languages.

When someone starts to edit, let them modify the then-current version (highest time-stamp). When they commit their edit (click accept or similar), check again to see that nobody else has changed things while they were editing (the time-stamp of the parent edit is still highest). If someone did change something, show them the difference between your parent-row and the edit, and tell them to fix things before committing (there may be several edits to take into account). This is the "wikipedia way", and it amounts to a sort of lightweight version control (much easier to implement than, say, Git)