searchkit snippet is showing only one watching word

Question

I am using React/ElasticSearch/SearchKit/ReactMarkdown to make a search engine for a website. The search engine depends on searching for content of articles. I want to snippet or highlight all the matching words in the same article in my search results. I found a problem that when I use SearchKit it highlights only the matching words in only one row. For example: if I have this paragraph as a markdown content:

    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"

If I searched for the word Lorem the Snippet will highlight for me only the word "lorem" in the first sentence like this: [![enter image description here][1]][1]

I don't want this I want it to be something like: 'Lorem Ipsum is simply dummy...Lorem Ipsum has been the .... sheets containing Lorem Ipsum passages....'

this is my React component:

import React, { Component } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
// import { ReactiveBase, DataSearch, SearchBox, MultiList } from "@appbaseio/reactivesearch";
import Client from "@searchkit/instantsearch-client";
import Searchkit from "searchkit";
import { InstantSearch, SearchBox, Hits, RefinementList, Snippet } from "react-instantsearch-dom";

export default function LandingPage(){
  const sk = new Searchkit({
    connection: {
      host: "http://localhost:9200",
  
    },
    search_settings: {
      highlight_attributes: ["title", 'body'],
      snippet_attributes: ['title',"body"],
      search_attributes: [{ field: "title", weight: 3 }, "body", "bibiliography"],
      result_attributes: ["title", "body", "bibiliography"],
      facet_attributes: ['title.key',  'entryOrigin.country.raw', 'entryClassification.theclass.key', 'entryauthor.name.key'],
   
    },
  })
  const searchClient = Client(sk);
  const hitView = ({ hit }) => {
    console.log(hit)
    return (
      <div>
      
        <h2>{hit.title}</h2>
        <p>{hit.body}</p>
        <h3><Snippet hit={hit} attribute="body" /></h3>
        {/* <ReactMarkdown className="SE--markdown--content" rehypePlugins={[rehypeRaw, remarkGfm]} children={hit.body} remarkPlugins={[remarkGfm]} /> */}
      </div>
    )
  }

    return (
      <div>
      <InstantSearch indexName="entries" searchClient={searchClient}>
      <SearchBox />
      <Hits />
      <RefinementList attribute="title.key" searchable={true} limit={20} />
      <RefinementList attribute='entryOrigin.country.raw' searchable={true} limit={20} />
      <RefinementList attribute='entryClassification.theclass.key' searchable={true} limit={20} />
      <RefinementList attribute='entryauthor.name.key' searchable={true} limit={20} />
      <Hits hitComponent={hitView} />
      
    </InstantSearch>
    <div>Theee</div>
      
    </div>
    
    )
}

So is it applicable to snippet or highlight all matched words? and if yes how can I do this?. Also how can I show the Snippet component in ReactMarkdown? [1]: https://i.stack.imgur.com/ZVWlw.png

searchkit snippet is showing only one watching word

0 Answers0