9

I have a <div contenteditable="true" /> that the user can write in that is pretty much unlimited in length.
The data in the div is saved on change with a timestamp in a MySQL database.

Now my goal is to have a little note on the left that tells the user when each part of the document has been created (resolution should be in days).

Now, the question is: How can I save the information (what part has changed when) best?

I considered the following options so far which both seem improvable:

  1. Every time the user visits the site at the end of the document I insert a flag (e.g. an emtpy span with a class and a data attribute that stores the start of editing). This flag is then saved into the database when the save script is called. This option would make it very easy to show the date on the side - I would just put them on the same height as the empty span and the span tells me the date. Downsides are: The user might accidently delete the timestamp span and if the user doesn't close the window for a long time no new timespan spans are inserted (this could probably be avoid by inserting new timestamp spans every X minutes so the deleting part is more relevant)
  2. Trying to do a string diff comparision each time the data is passed to the saving script and only save the diff with a timestamp. Then when the page is loaded put all parts together in the right order and in Javascript put the date notes in the right place. This sounds like a lot of overhead for me though + when older parts are changed two parts could become one, etc. All in all this options sounds very complicated.

Any input / ideas / suggestions highly appreciated!

3
  • Is the type of content structured or unstructured? If it is unstructured (like a code base in time), then would I suggest using the solution provided by armel. If it is structured or can be made structured, then the solution(s) provided by MrFishie and me. Apr 14, 2013 at 9:38
  • Is the type of content structured or unstructured? If it is unstructured (like a code base in time), then would I suggest using the merging solution provided by armel. If it is structured or can be made structured, then the solution(s) provided by MrFishie and me. An unstructured document is more complex to handle, because it is quite often difficult to settle the proper hierarchy of changes. (This was always a very problematic issue with replication accross different servers in Lotus Notes.) This is the version of the comment I would like you to take into account. Apr 14, 2013 at 9:49
  • @LoekBergman: The input is user generated and does not follow any specific structure.
    – Horen
    Apr 15, 2013 at 8:11

3 Answers 3

12
+100

What you are trying to implement is the feature called "annotate" or "blame" in the source code control world (though you just want the date of update rather than date+author or simply author).

To do that properly, you need a way to make diffs (php-diff might do the job) and obtain the versions of the text. There are several strategy:

  • store the latest version and keep only deltas (such as unified diffs, my preference)

  • store all the versions and compute deltas on the fly

Once you have your current version and the list of deltas (you can definitely shorten the list if more than say a few dozen delta and let the user ask more if really important). You compose the deltas together, this is where the annotation phase happens as you can do this part remembering from which version comes each line. Composing is pretty simple in fact (start from latest, all lines added in the patch leading to it are from the latest, the other need to be explained, so start again with next patch until you reach the most ancient patch that you want to treat, the remaining lines are from that version or earliest so some flag saying 'at or before ' can be used).

Google has a diff library for Javascript so could do all the hard work on user machine. They have the patch part in this library as well. I did not find an annotate/blame library.

6
  • Thanks - that sounds like a good idea. Just to understand better: Saving: 1) I save the most current version, 2) At the same time I save the diff that came the with the current version. Then loading (you called it composing): 1) Start with the current version, 2) Take the newest diff and apply it to the current version with e.g. google javascript patch, 3) repeat step 2 with next older diff until finished. Did I understand that right?
    – Horen
    Apr 11, 2013 at 18:13
  • yes something like that, during "Saving" be sure to work transactionally (save current+save patch). During "Loading", you'll have to apply the patches to do annotate job. Note that, as patches are lines oriented, the annotate/patch application can be reduced to manipualting an array of "author and/or dates", working only on line coordinates and letting the text in patches alone (though they can be profitable for a restore feature or diff-to-version). Google library won't do the annotate part for you, but you can get inspiration from their code.
    – armel
    Apr 11, 2013 at 20:21
  • He is not requesting about the process of annotation or blame (or praise), because that is the process to find out who commited the code. That has nothing to do with the search for the current version. The process you describe is merging and a good alternative for what MrFishie and I proposed. See the comment on the general question. Apr 14, 2013 at 9:49
  • The OP is about giving the creation date of the various part constituting its "text". The "annotate" process can give this information, in addition to the author. Horen can choose to focus on the date only, he could also add any other annotation of interest. For the structure/unstructured question, Horen indicates that he studied the idea of comparing strings, that's why I propose text oriented patching, but of course XML patching might be more practical if it is for structured data, the idea still applies. By the way, applying patches one after the other is NOT merging.
    – armel
    Apr 14, 2013 at 19:07
  • @koriander Thanks for the link. The example page is broken unfortunately: code.google.com/p/daisydiff/wiki/Examples How does daisydiff work exactly?
    – Horen
    Apr 15, 2013 at 8:16
4

One way that you could do it is by having a table for revisions of the div. Every so often, you can add a new entry into this table, containing the content and the timestamp, and therefore keep track of all the revisions of editing. Then, to find out what is changed, you can simply compare two of the entries to find out what has been added, stayed the same, and removed.

2
  • It's a good idea. The only problem I see is "how" to find what has been added, changed and removed and how to match this with the position of the date it was created which is shown on the left. Any ideas?
    – Horen
    Apr 6, 2013 at 10:22
  • There should be some way to do this with regex, though I'm not very good with it.
    – tomb
    Apr 6, 2013 at 10:25
4

You should save this information when the user submits the information. The moment that the user wants to see the information, there should be hardly any computation.

In the backend you create two tables. In one table, lets call it 'currentdocs', you store always the latest version of the data. When the user loads the document, all the information is coming from this table 'currentdocs'. In the other table, lets call it 'docsintime', you save every new save. It has a foreign key to the table 'currentdocs' and you can find the last row in this table 'docsintime' by selecting the maximum id with that foreign key. A select statement can be something like:

select id from docsintime where cur_key = x order desc limit 1;

In both tables do you store the for each relevant part the latest timestamp that it has been changed.

When a new document is saved, you get that last saved version in the table 'docsintime'. You compare all relevant parts with the data from that record. If it does not differ then you copy the timestamp of that relevant part in the new record to be saved. If it does differ then do you create a new timestamp for that relevant part. After the comparison do you save the new record in both tables 'currentdocs' and 'docsintime'. You update the table 'currentdocs' and insert a new record in the table 'docsintime'. Only with a new document will you make an insertion in the table 'currentdocs'. With the next request for that document will you only have to collect the information from the table 'currentdocs'. And the process starts all over again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.