React Instant Search does not take Algolia Highlight prefix tag and Highlight suffix tag into account

Hi

I had set up Highlight prefix tag and Highlight suffix tag on Algolia interface

However, the hit._highlightResult[“categories.lvl1”].value returns ais-highlight-0000000000 as Highlight prefix tag and Highlight suffix tag. I’m using connectHits to return the hit

Why please ? I expect the tag to be as set up in Algolia.

Best regards.

Hi Thierry,

In React InstantSearch, this is done so there’s a known tag to split up between highlighted and non-highlighted items in the string, so that then a safe output can be created by creating wrapping tags, instead of relying on dangerouslySetInnerHTML. You can change the tagName to b if that’s what you’d like to display, although I recommend leaving the tag name as mark (the default), and styling it to bold with css, to keep the semantics of the highlighting enabled.

Hope that makes sense!

Hi

The problem is that the tagName is < ais-highlight-0000000000 > instead of < b >.

I set up < b > as tag name in algolia and I got < ais-highlight-0000000000 >.

I precise that I do not use the Hightligh widget.

You can override the highlight tag using a configure widget if you are planning to display the html directly, but the way to go is the highlight widget, why does it not fit your use case @thierry.lau?

Thx for pointing to the Configure widget !

My use case is display the result which is a list of article grouped by category. Below is the ui :

I cannot see how to use Highlight component to highlight the category “COVID-19 > Autres questions”

Below is my source code for the results which use connectHits

const SearchResults = ({ hits }) => {
	const results = groupBy(hits, hit => {
		return hit._highlightResult["categories.lvl1"].value;
	});

	const nodes = [];

	for (let [category, articles] of Object.entries(results)) {
		nodes.push(
			<div className="search-results__item">
				<div
					className="search-results__subcategory"
					dangerouslySetInnerHTML={{ __html: category }}
				/>
				<div className="search-results__articles">
					{articles.map(article => {
						return (
							<div key={article.objectID} className="search-results__article">
									<div className="search-results__title">
										<Highlight hit={article} attribute={"title"} />
									</div>
							</div>
						);
					})}
				</div>
			</div>
		);
	}

	return (
		<div className="search-results">
			{nodes}
		</div>
	);
};

As you can see I use dangerouslySetInnerHTML to display the category with the hightlight tag.

Do you see a cleaner and proper way to do that ?

Following your recommandation, I use Configure component to set up the highlightPreTag and highlightPostTag

<Configure
	hitsPerPage={4}
	attributesToHighlight={["categories.lvl1", "title", "content"]}
	highlightPreTag={"<b class='faq__results--highlighted'>"}
	highlightPostTag="</b>"
/>

I manage to highlight the category in blue. However, the article title now display the unescaped html tag

AS you can see in my source code above, I use <Highlight hit={article} attribute={"title"} /> to display the title.

I’m confused now.

Hey @thierry.lau, those were two separate recommendations, sorry for being unclear

  1. using Highlight and tagName without changing the higlightPreTag, will keep the html safe
  2. using Configure to force the highlightPreTag & highlightPostTag, when using dangerouslySetInnerHTML

Do you have what you currently have (working but wrong tag for example) on a sandbox? it will help with playing around to find how to replace it with Highlight

Here is a sandbox : https://codesandbox.io/s/lucid-swanson-ixpqm

You can type : “voyage” in the search box

Hey @thierry.lau

Thanks for providing the sandbox.

Here’s the modified version.

  1. I removed some from Configure component.
  2. I added “tagName” prop to Highlight component.

Will this work for you?

Hi

Sorry but the category is not highlighted anymore.

I expect the word “voyage” to be highlighted in both category and the article title

I missed it. I’ll get back to you with a working sandbox soon.

@thierry.lau

Here you go:

One thing you might find weird is,

<Highlight
  hit={articles[0]}
  attribute={['categories.lvl1']}
  tagName="b"
/>

...

<Highlight hit={article} attribute={'title'} tagName="b" />

['categories.lvl1'] is an array and 'title' is a string.

Highlight component accepts both a string or an array of strings. When your attribute includes . like categories.lvl1, then it will try to find lvl1 attribute inside categories object. To avoid it, I put it in an array.

Let me know how it goes!

2 Likes

Thx you It works as expected !

Maybe add a note on the documentation for Highlight component

Best regards

1 Like