How to escape HTML in highlight (vanilla JS implementation)?

[thecristen]

Instead of emphasizing the matched text, the <em> tags are rendered in the result.

I can't figure out what I'm doing wrong. Here's my template basically. I've tried using the html thing, I've tried a more elaborate JSX snippet that includes ${components.Highlight(...)}, they all produce this result. What am I missing?

          templates: {
            item({ item, components }) {
              return components.Highlight({ hit: item, attribute: ["name"] });
            }
          },

[sarahdayan]

Hey @thecristen, this should normally work (see example), so I'm suspecting a version issue. Can you share a CodeSandbox reproduction so I can see what's wrong?

[Haroenv]

Are you sending a manual highlightPreTag and highlightPostTag to getAlgoliaResults? If you do that you override the special markers that are used by the Highlight component. To customise the tag names, you can use the tagName prop to Highlight

[thecristen]

I'll work on the reproducible example, just wanted to answer that I'm not using getAlgoliaResults in my case -- I've got my backend querying and returning results.
Also I tried changing the tagName, it's reflected in the dropdown but still as a plain text :D was wrong on this

[thecristen]

Ahh I think @Haroenv had the best clue. I'm using my backend to query Algolia via the REST API (POSTing to https:/${appId}-dsn.algolia.net/1/indexes/*/queries) and was working directly with its response (returning data.results.flatMap(i => i.hits); in getItems to get a list of the hits). So the results are coming in with a _highlightResult property with an object containing those <em> tags. So I suppose that's conflicting in some way -- is that more or less an accurate assessment of why the Highlight component might not work?

Is this use case (bespoke fetches of the Algolia REST API) not supported when using the built-in components?

[Haroenv]

You’ll need to make sure you’re sending all the same parameters to Algolia in your backend as getAlgoliaResults would. For highlight to work as expected that’s highlightPreTag/PostTag the same values as used (__aa-highlight__/__/aa-highlight).

I’d recommend you use the built-in functions though, there’s a lot of differences between fetching done by the api client and getAlgiliaResults (caching, deduplication, retry strategy and SLA to name just some)

[thecristen]

Thanks @Haroenv. This did the trick - adding the %{ "highlightPreTag" => "__aa-highlight__", "highlightPostTag" => "__/aa-highlight__" } parameters in my current call to the Algolia REST API, combined with adding the attributesToHighlight, allows the highlighting to work!

[thecristen]

I'm pretty sure there's also user (my) error going into this though. Here's an example sandbox showing code that I would expect to display bolded matched text, that doesn't.