🐛 Fix highlight multiple fields (#4866)

argilla-frontend/components/feedback-task/container/fields/RecordFields.vue

@@ -12,6 +12,7 @@
       />
       <TextFieldComponent
         v-else
+        :name="name"
         :title="title"
         :fieldText="content"
         :useMarkdown="settings.use_markdown"

argilla-frontend/components/feedback-task/container/fields/span-annotation/SpanAnnotationTextField.component.vue

@@ -67,6 +67,9 @@
             .span-annotation__field--overlapped::highlight(hl-{{id}}-hover) {
               background: {{color}};
             }
+            ::highlight(search-text-highlight-{{name}}) {
+              color: #ff675f;
+            }
           </style>
         </template>
       </template>

argilla-frontend/components/feedback-task/container/fields/span-annotation/useSpanAnnotationTextFieldViewModel.ts

@@ -9,15 +9,17 @@ import { SpanQuestionAnswer } from "~/v1/domain/entities/question/QuestionAnswer
 import { SpanAnswer } from "~/v1/domain/entities/IAnswer";
 
 export const useSpanAnnotationTextFieldViewModel = ({
+  name,
   spanQuestion,
   id,
   searchText,
 }: {
+  name: string;
   spanQuestion: Question;
   id: string;
   searchText: string;
 }) => {
-  const searchTextHighlight = useSearchTextHighlight();
+  const searchTextHighlight = useSearchTextHighlight(name);
   const spanAnnotationSupported = ref(true);
   const answer = spanQuestion.answer as SpanQuestionAnswer;
   const initialConfiguration = {
@@ -143,8 +145,7 @@ export const useSpanAnnotationTextFieldViewModel = ({
   watch(
     () => searchText,
     (newValue) => {
-      const fieldContent = document.getElementById("fields-content");
-      searchTextHighlight.highlightText(fieldContent, newValue);
+      searchTextHighlight.highlightText(newValue);
     }
   );
 
@@ -157,8 +158,7 @@ export const useSpanAnnotationTextFieldViewModel = ({
       spanAnnotationSupported.value = false;
     }
 
-    const fieldContent = document.getElementById("fields-content");
-    searchTextHighlight.highlightText(fieldContent, searchText);
+    searchTextHighlight.highlightText(searchText);
   });
 
   onUnmounted(() => {

argilla-frontend/components/feedback-task/container/fields/text-field/TextField.component.vue

@@ -16,9 +16,16 @@
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div id="fields-content" class="content-area --body1">
+    <div :id="`fields-content-${name}`" class="content-area --body1">
       <div :class="classes" v-if="!useMarkdown" v-html="fieldText" />
       <RenderMarkdownBaseComponent v-else :markdown="fieldText" />
+      <template>
+        <style :key="name" scoped>
+          ::highlight(search-text-highlight-{{name}}) {
+            color: #ff675f;
+          }
+        </style>
+      </template>
     </div>
   </div>
 </template>
@@ -29,6 +36,10 @@ import { useTextFieldViewModel } from "./useTextFieldViewModel";
 export default {
   name: "TextFieldComponent",
   props: {
+    name: {
+      type: String,
+      required: true,
+    },
     title: {
       type: String,
       required: true,
@@ -104,8 +115,4 @@ export default {
 .fade-leave-to {
   opacity: 0;
 }
-
-::highlight(search-text-highlight) {
-  color: $highlight;
-}
 </style>

argilla-frontend/components/feedback-task/container/fields/text-field/useTextFieldViewModel.ts

@@ -1,21 +1,20 @@
 import { onMounted, watch } from "vue-demi";
 import { useSearchTextHighlight } from "../useSearchTextHighlight";
 
-export const useTextFieldViewModel = (props: { searchText: string }) => {
-  const { highlightText } = useSearchTextHighlight();
+export const useTextFieldViewModel = (props: {
+  name: string;
+  searchText: string;
+}) => {
+  const { highlightText } = useSearchTextHighlight(props.name);
 
   watch(
     () => props.searchText,
     (newValue) => {
-      const fieldContent = document.getElementById("fields-content");
-
-      highlightText(fieldContent, newValue);
+      highlightText(newValue);
     }
   );
 
   onMounted(() => {
-    const fieldContent = document.getElementById("fields-content");
-
-    highlightText(fieldContent, props.searchText);
+    highlightText(props.searchText);
   });
 };

argilla-frontend/components/feedback-task/container/fields/useSearchTextHighlight.ts

@@ -10,14 +10,16 @@ declare namespace CSS {
   };
 }
 
-const HIGHLIGHT_CLASS = "search-text-highlight";
+export const useSearchTextHighlight = (fieldId: string) => {
+  const FIELD_ID_TO_HIGHLIGHT = `fields-content-${fieldId}`;
+  const HIGHLIGHT_CLASS = `search-text-highlight-${fieldId}`;
 
-export const useSearchTextHighlight = () => {
   const createRangesToHighlight = (
     fieldComponent: HTMLElement,
     searchText: string
   ) => {
     CSS.highlights.delete(HIGHLIGHT_CLASS);
+
     const ranges = [];
 
     const getTextNodesUnder = (el) => {
@@ -102,7 +104,8 @@ export const useSearchTextHighlight = () => {
     return ranges;
   };
 
-  const highlightText = (fieldComponent: HTMLElement, searchText: string) => {
+  const highlightText = (searchText: string) => {
+    const fieldComponent = document.getElementById(FIELD_ID_TO_HIGHLIGHT);
     if (!searchText || !fieldComponent) return;
 
     const ranges = createRangesToHighlight(fieldComponent, searchText);