[BUGFIX] visualisation of highlighted text (#5678)

This PR fixes the visualisation of highlighted text in text and chat
fields adding an id

Author: leiyre

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)
 

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'"
     >

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" />

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));