From 69df2bc5368fefae1fc0418febb5d032fac58dab Mon Sep 17 00:00:00 2001
From: Leire <leire@argilla.io>
Date: Thu, 7 Nov 2024 15:19:21 +0100
Subject: [PATCH] [BUGFIX] visualisation of highlighted text (#5678)

This PR fixes the visualisation of highlighted text in text and chat
fields adding an id
---
 argilla-frontend/CHANGELOG.md                               | 1 +
 .../annotation/container/fields/chat-field/ChatField.vue    | 1 +
 .../annotation/container/fields/text-field/TextField.vue    | 2 +-
 .../annotation/container/fields/useSearchTextHighlight.ts   | 6 ++++--
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/argilla-frontend/CHANGELOG.md b/argilla-frontend/CHANGELOG.md
index 20ddc9d992..b7a18e38f7 100644
--- a/argilla-frontend/CHANGELOG.md
+++ b/argilla-frontend/CHANGELOG.md
@@ -23,6 +23,7 @@ These are the section headers that we use:
 ### Fixed
 
 - Fixed redirection problems after users sign-in using HF OAuth. ([#5635](https://github.com/argilla-io/argilla/pull/5635))
+- Fixed highlighting of the searched text in text and chat fields ([#5678](https://github.com/argilla-io/argilla/pull/5678))
 
 ## [2.4.0](https://github.com/argilla-io/argilla/compare/v2.3.0...v2.4.0)
 
diff --git a/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue b/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
index 971ede238a..1389c8f155 100644
--- a/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue
@@ -2,6 +2,7 @@
   <div class="chat" :key="title">
     <span class="chat__title" v-text="title" />
     <div
+      :id="`fields-content-${name}`"
       class="chat__wrapper"
       :class="checkIfAreLessThanTwoRoles ? '--simple' : '--multiple'"
     >
diff --git a/argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue b/argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue
index 3fe4a7ced1..81437082bd 100644
--- a/argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue
+++ b/argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue
@@ -16,7 +16,7 @@
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div class="content-area --body1">
+    <div :id="`fields-content-${name}`" class="content-area --body1">
       <MarkdownRenderer v-if="useMarkdown" :markdown="fieldText" />
       <Sandbox v-else-if="isHTML" :content="fieldText" />
       <div v-else :class="classes" v-html="fieldText" />
diff --git a/argilla-frontend/components/features/annotation/container/fields/useSearchTextHighlight.ts b/argilla-frontend/components/features/annotation/container/fields/useSearchTextHighlight.ts
index 06ecce8dcb..2b23ab4d57 100644
--- a/argilla-frontend/components/features/annotation/container/fields/useSearchTextHighlight.ts
+++ b/argilla-frontend/components/features/annotation/container/fields/useSearchTextHighlight.ts
@@ -121,8 +121,10 @@ export const useSearchTextHighlight = (fieldId: string) => {
 
   const highlightText = (searchText: string) => {
     const fieldComponent = document.getElementById(FIELD_ID_TO_HIGHLIGHT);
-    if (!searchText || !fieldComponent) return;
-
+    if (!searchText || !fieldComponent) {
+      CSS.highlights.delete(HIGHLIGHT_CLASS);
+      return;
+    }
     const ranges = createRangesToHighlight(fieldComponent, searchText);
 
     CSS.highlights.set(HIGHLIGHT_CLASS, new Highlight(...ranges));