Trying To Display Comments Near Appropriate Doc Range In Vue Component

I am attempting to emulate Medium style comments in an html document. This answer has gotten me nearly there: How to implement Medium-style commenting interface in VueJS With that

Solution 1:

Wherever you want to enable commenting, try giving those elements a class and a unique ID.

A class would help you identify that it has commenting enabled whereas an ID would help you uniquely identify it.

In your logic, you can access the list of classes on that element as

sel.anchorNode.parentElement.classList

and ID as

sel.anchorNode.parentElement.id

With the help of this combination, you can surely associate a comment to your elements.