[algolia-pro] Previews/Snippets in CLI and instantsearch are different

[Sogl]

Default pages index.

When I do a search in the console, the snippet shows me the part of the text where the word was found (the word itself is highlighted):

In instantsearch I see the very beginning of a text or paragraph where there is no search word yet (there is nothing to highlight):

How can this be changed?

[rhukster]

@w00fz in the CLI i'm using snippet that contains markup to identify the highlighted words, is the instant search results able to use this?

[w00fz]

Instasearch already implements highlighting the found keyword. This can be confirmed on https://learn.getgrav.org

What am I missing?

[Sogl]

@w00fz If you have a small paragraph it will be in the snippet, but if you are looking for something that is in a large paragraph closer to the middle or end of it, there will be nothing in the snippet.

Examples from Grav Learn:

1. With loadHeaderProperty search word:

The paragraph is large and the word you are looking for is near the end of the paragraph: https://learn.getgrav.org/17/api#class-grav-framework-flex-pages-flexpageobject

2. With the word flex example should be found on page 12 (from 1 to 11 paragraphs are small and snippets immediately have highlighting, I also excluded variants where the word Flex is in the breadcrumbs):

The word you are looking for is at the end of the paragraph, so it doesn't make it into the snippet: https://learn.getgrav.org/17/basics/installation#option-1-install-from-zip-package

---

My project is medical documentation, and there are some pretty big paragraphs in there, so most of the time the snippets don't show what was found at all.

[w00fz]

@Sogl The UI also uses the <ais-snippet> component to display the output highlighted, but because it's missing the key elements on the returned payload for summary, it doesn't highlight anything. The UI just populates the summary the way it's received back from Algolia Pro, missing the highlighted keywords in some circumstances, as you are experiencing.

What you can do is to instead base that content rendering off of the content attribute instead of summary. This will undoubtedly make it a much lengthier context, but this seems to be exactly what you are looking for.

To achieve this, you can override hits_preview.html.twig in your theme and modify the bit that references the summary attribute to instead point to content (at around line 58).

<ais-snippet
  attribute="content" {# <- from `summary` to `content` #}
  :hit="selected"
  highlighted-tag-name="span"
  :class-names="{
    'ais-Snippet': 'leading-normal text-left text-gray-800 dark:text-gray-300 mt-4 m-auto break-words mb-4',
    'ais-Snippet-highlighted': 'bg-transparent text-algolia-pro',
  }"
></ais-snippet>

Note also that the summary is deliberately trimmed to 256 characters from the Algolia Pro Indexing Data logic $data->summary = trim($page->summary(256, true));, which is the reason as to why you do not see highlighted keywords past that amount. (/cc @rhukster)

[Sogl]

@w00fz Thank you! Now the CLI output and the instantsearch snippet look the same, which is what I needed.