Can we use highlight pre and post tags without having to (un)escape?

[nlambert]

Hello, please help!

I'm facing an issue with the following bit of code:

<Configure highlightPreTag='<em>' highlightPostTag='</em>' />

This requires one of these configurations:

<Hits escapeHTML={false} />

useHits({ ...props, escapeHTML: false })

Without escapeHTML={false}, the default highlight pre and post tags take precedence. I suspect this behavior originates in the getWidgetSearchParameters function of connectHits.js. This was not easy to pinpoint.

Further down the call stack, React does its usual thing: escaping strings containing HTML! To render the highlight tags properly, I also do the usual dangerouslySetInnerHTML.

This workflow feels cumbersome and unintuitive. There must be a better way to avoid this. Am I approaching this wrong? Any guidance would be appreciated!

[Haroenv]

In the Highlight component, you can pass the highlightTag to specify which type of element to use for the highlighted parts. By default indeed there's a couple layers of escaping / preventing the default tags that makes it harder than just passing parameters to configure.

[nlambert]

I see you can pass that in now:

<Highlight highlightedTagName='em' attribute='title' hit={hit} />

But I think this may not work because:

• Highlight Widget unconditionally calls:
• getHighlightedParts Util

It looks like the util always gets its tag replacement from the constant TAG_REPLACEMENT.

[Haroenv]

yes, I may not have been clear but when you pass highlightedTagName, you don't change the tags in configure, and you'll end up with the tags you want in the dom

[nlambert]

I was making this so complicated. It couldn't have been easier! Thank you sir.

[Haroenv]

glad you found the configuration in the end, sorry that there are many options related to this