diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/index.ts b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/index.ts index 74c796f93d62..008f1565a9a2 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/index.ts +++ b/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, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/text-highlight-view.ts b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/text-highlight-view.ts new file mode 100644 index 000000000000..e66503922771 --- /dev/null +++ b/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, + }; + }, +}); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx index f8d7a36b833f..cbd2d8ee75fc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx @@ -2404,7 +2404,10 @@ export const highlightSearchText = ( const regex = new RegExp(`(${searchText})`, 'gi'); - return text.replace(regex, `$1`); + return text.replace( + regex, + `$1` + ); }; /** diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/mocks/EntityUtils.mock.ts b/openmetadata-ui/src/main/resources/ui/src/utils/mocks/EntityUtils.mock.ts index 7d6a4a520e7d..842e91f513d7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/mocks/EntityUtils.mock.ts +++ b/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 test description to verify highlightText method.'; + 'This is a test description to verify highlightText method.';