We're building a new feature for an online editor that the user will not edit the document, but will be able to highlight & propose edits on the document. Very similar to google documents' commenting feature, rather than a typical editor. The comments don't change the text of the document contents, but the view is different because we change the background of the commented (highlighted, marked) substring. To do that, we replace the highlighted string from the html with something basically like
<mark bacground="bar" id="foo" (onClick)="onClick($event)"> [Highlighted Inner Text Contents Here] </mark>.
On another part of the page, we show the comment's contents when user clicks on a mark element, but that's out of the context of this question.
We must use Angular 12 due to customer's request, so we can't assess other technologies. We also use highlight.js to catch highlights and mark.js to replace text with mark elements. My question is, how to design this software?
Should we destruct the document and re-create its contents (and the mark elements) every time there's a new highlight event raised? Because if we just modify the document on each highlight change, it's easy to screw this up. I'm a backend dev in .NET stack and that wouldn't be my way of doing things if it were a backend task, so maybe that's why I feel intimidated about this method.
The code is basically a single element and consisted by a single object (component). Is this the right approach? Or should we divide it into more components when we acquire the document contents from the backend? The number of lines in the document might be 1 line, 1000 lines or maybe even more.
Since we have a single Angular component object and multiple comments on the text with html elements, we must code in pure js and look for those nodes with matching id most of the time. Which feels like a bad practice.
What would your approach be for this problem?