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

1

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?

2

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.

3

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: )