From d24da416e9c6b67d68f730318ebdd935cb5cd0ae Mon Sep 17 00:00:00 2001
From: Bohdan Zavhorodskyi <bohdan.zavhorodskyi@kitrum.com>
Date: Thu, 3 Oct 2024 15:38:57 +0300
Subject: [PATCH] feat: changed logic for the ellipsis

---
 .../DevHubHits/DevHubSearchResultCard.tsx      | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/search/DevHubHits/DevHubSearchResultCard.tsx b/src/components/pages/search/DevHubHits/DevHubSearchResultCard.tsx
index 740294139..0eb396ce8 100644
--- a/src/components/pages/search/DevHubHits/DevHubSearchResultCard.tsx
+++ b/src/components/pages/search/DevHubHits/DevHubSearchResultCard.tsx
@@ -3,18 +3,9 @@ import classNames from "classnames";
 import { Snippet } from "react-instantsearch";
 
 import type { DevHubSearchResultCardProps, HitBreadcrumb } from "./types";
-import type { Hit } from "../types";
 
 const DevHubSearchResultCard: FC<DevHubSearchResultCardProps> = ({ hit }) => {
-  // need to manually add an ellipsis cause Typesense doesn`t support this in the config
-  const updateHitSnippet = (hit: Hit<any>) => {
-    if (hit._snippetResult.content.matchedWords?.length) {
-      hit._snippetResult.content.value = `... ${hit._snippetResult.content.value} ...`;
-    }
-    return hit;
-  };
-
-  const updatedHit = updateHitSnippet(hit);
+  const isEllipsis = !!hit._snippetResult?.content?.matchedWords?.length;
 
   return (
     <div className="max-w-[956px]">
@@ -47,9 +38,12 @@ const DevHubSearchResultCard: FC<DevHubSearchResultCardProps> = ({ hit }) => {
         </h5>
         <p className="text-heading-5 h-[40px] text-ellipsis overflow-hidden text-search-primary">
           <Snippet
-            hit={updatedHit}
+            hit={hit}
             attribute="content"
-            className="overflow-hidden text-ellipsis box"
+            className={classNames("overflow-hidden text-ellipsis box", {
+              "after:ml-2 after:content-['...']  before:mr-2 before:content-['...']":
+                isEllipsis,
+            })}
             style={{
               WebkitBoxOrient: "vertical",
               MozBoxOrient: "vertical",