For a major school project I am implementing a real-time collaborative editor. For a little background, basically what this means is that two(or more) users can type into a document at the same time, and their changes are automatically propagated to one another (similar to Etherpad).

Now my problem is as follows:

I want to be able to detect what changes a user carried out onto an HTML textfield. They could:

• Insert a character
• Delete a character
• Paste a string of characters
• Cut a string of characters

I want to be able to detect which of these changes happened and then notify other clients similar to "insert character 'c' at position 2" etc.

Anyway I was hoping to get some advice on how I would go about implementing the detection of these changes?

My first attempt was to consider the carot position before and after a change occurred, but this failed miserably.

For my second attempt I was thinking about doing a diff on the entire contents of the textfields old and new value. Am I missing anything obvious with this solution? Is there something simpler?