Embed semantic markup in paragraph nodes - which tool to use?

Suppose I have a paragraph like so:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

I’m looking for a way in which I can allow a user to select a word in that paragraph and then subsequently create a reference for it to something else. The markup in that case would become something like this:

<p>Lorem ipsum dolor sit amet, <section-ref='123' show='title'>consectetur</section-ref> adipiscing elit.<p>

My initial though was to use Marks for this. However I want the editor to provide an interactive view on top of this. Things that I’m thinking about are:

  • select a word, right mouse click: popup menu to search and select the reference (ref=123)
  • select a word (that has a reference), left mouse click: popup menu to set ‘show’ value

That led me to believe that I need some kind of nodeview functionality.

Bottom-line: what is the appropriate tool(s) in the PM toolbox that could be useful here?

You can implement interactive elements like that without node views, by handling events on the entire content and checking whether it applies to some ‘active’ part of your document.

Thanks @marijn for the feedback.

In your opinion do you think that an approach like that could be made performant and scalable? ( Obviously this is also depending on how knowledgeable the developer is :grinning: )