Web[js, php] - creation, storage of annotations and comments to documents, as well as migration of annotations between document versions. How is it better?

Question

PHP

It is necessary to make such a feature, as in Google docs, that you can select text and write a comment to the selected text.
Documents are uploaded by users and are html code that is drawn as is. If a new version of the document is loaded, then you need to determine those places with comments where the text has not changed, and transfer the comments. And where the text has changed, comments do not need to be transferred.

What were the options:
1) modify the dom tree on the client, framing the selected text in a span with a unique id, and sending the entire document to the server along with the annotation. Cons: high traffic
2) transfer the selected text, offset from the beginning of the document and comments to the server. Insert spans on the server and on the client. Cons: duplication of code on the server and client, not sure that all browsers and parsers will allow finding the correct text by offset.

I would love to hear ideas on how best to store annotation data on the server so that it is easy to find it in the text, how to compare pieces of text to accurately determine that the changed text has a comment from the old version!

Answer 1

Look towards DOMDocument. It will allow you to use the closest interfaces for working with dom on the server and on the client.
On the client, we select the text, find the nearest child, calculate the xpath and offset for it, send the xpath, offset and comment to the server.
Hope it helped.