2

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?

Bora
  • 143
  • 4
  • 1
    Angular itself is designed to avoid that kind of "traditional" DOM hacking. If your users' data is essentially raw HTML, then Angular supports dynamic components (`ComponentFactory`) which can be used to re-render a component every time its content or structure changes. The difficulty might be that removing a component from the display while the user has it focused then re-drawing could disrupt their UX, so make sure you consider things like element focus and cursor position otherwise your users will very likely notice and it could result in a lot of irritation for your users. – Ben Cottrell Nov 14 '21 at 17:55
  • 1
    On further thought, since DOM editing is your functional requirement and the DOM being altered is your users' data rather than part of the app, then it doesn't doesn't really seem to matter whether you modify the DOM in-place. There are also a lot of Angular libraries out there for Angular WYSIWYG HTML editor components which you could refer to. Perhaps the more important issue is ensuring that whatever you're doing has sufficient automated tests around it. – Ben Cottrell Nov 14 '21 at 18:28

0 Answers0