Feature request: show popup only for first match on page

[mauritsvanrees]

It would be nice to be able to configure that only the first match on a page gets a popup. The old Products.PloneGlossary had this option in the control panel.

I had a go at this last week, but failed. At some point I had it partially working: only the first match per text block got a popup. But to work over all blocks, it seems we would need to have some state so we remember which terms already have a match. Problem is that the code gets called multiple times per text block, I guess because the blocks get re-rendered a few times, and the state does not keep up, so at the end no terms at all get a popup... That is how far I got in this commit:
zestsoftware@61ce54f

Any idea on if this is feasible and how to do it?

[ksuess]

Well, this is tricky. The blocks do not know about each other. You suggested to use a state. A state could be global, via action/reducer or a component state. In each case the block components would re-render on state change.

What this request needs is a reference ( see 'useRef') or context (context provider and useContext)
A reference is no option as it would mean to pass this reference down to Slate leaf.

The use of a context provider would mean to hook in an ancester component per location (not RenderBlocks cause RenderBlocks is used nested in for example a 'Grid'.
One option would be to change View.jsx and introduce a context provider. Then update the context in each block according the matched glossary terms.
A customization of components/theme/View/View.jsx should be well thought as this could break a project which does also customize the same component.

I think it's an interesting request. Also for the question how to improve the override of an atomic component without interfering with a customization of an important component like components/theme/View/View.jsx.
I was curious and gave it a try: https://github.com/rohberg/volto-slate-glossary/tree/renderblocks
One more topic to think about: How to customize components/theme/View/View.jsx only if config.settings.glossary.matchOnlyFirstOccurence== true