fix: highlight search text for description column (#19248)

Co-authored-by: Chirag Madlani <[email protected]>
(cherry picked from commit 498d952)

openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/index.ts

@@ -34,6 +34,7 @@ import { mentionSuggestion } from './mention/mentionSuggestions';
 import slashCommand from './slash-command';
 import { getSuggestionItems } from './slash-command/items';
 import renderItems from './slash-command/renderItems';
+import TextHighlightView from './text-highlight-view';
 import { TrailingNode } from './trailing-node';
 
 export const extensions = [
@@ -112,6 +113,7 @@ export const extensions = [
     suggestion: hashtagSuggestion(),
   }),
   DiffView,
+  TextHighlightView,
   Image.configure({
     allowBase64: true,
     inline: true,

openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/text-highlight-view.ts

@@ -0,0 +1,77 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { Node } from '@tiptap/core';
+
+export default Node.create({
+  name: 'textHighLightView',
+  content: 'inline*',
+  group: 'inline',
+  inline: true,
+
+  addAttributes() {
+    return {
+      class: {
+        default: '',
+      },
+      'data-testid': {
+        default: '',
+        parseHTML: (element) => element.getAttribute('data-testid'),
+        renderHTML: (attributes) => {
+          if (!attributes['data-testid']) {
+            return {};
+          }
+
+          return {
+            'data-testid': attributes['data-testid'],
+          };
+        },
+      },
+      'data-highlight': {
+        default: true,
+        parseHTML: (element) => element.getAttribute('data-highlight'),
+        renderHTML: (attributes) => {
+          if (!attributes['data-highlight']) {
+            return {};
+          }
+
+          return {
+            'data-highlight': attributes['data-highlight'],
+          };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-highlight]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes, node }) {
+    const textHighlightNode = document.createElement('span');
+
+    Object.keys(HTMLAttributes).forEach((key) => {
+      textHighlightNode.setAttribute(key, HTMLAttributes[key]);
+    });
+
+    textHighlightNode.setAttribute('data-highlight', 'true');
+    textHighlightNode.innerHTML = node.textContent;
+
+    return {
+      dom: textHighlightNode,
+    };
+  },
+});

openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx

@@ -2551,7 +2551,10 @@ export const highlightSearchText = (
 
   const regex = new RegExp(`(${searchText})`, 'gi');
 
-  return text.replace(regex, `<span class="text-highlighter">$1</span>`);
+  return text.replace(
+    regex,
+    `<span data-highlight="true" class="text-highlighter">$1</span>`
+  );
 };
 
 /**

openmetadata-ui/src/main/resources/ui/src/utils/mocks/EntityUtils.mock.ts

@@ -143,4 +143,4 @@ export const mockText =
 export const mockSearchText = 'test';
 
 export const mockHighlightedResult =
-  'This is a <span class="text-highlighter">test</span> description to verify highlightText method.';
+  'This is a <span data-highlight="true" class="text-highlighter">test</span> description to verify highlightText method.';