diff --git a/packages/markups/src/Markup.js b/packages/markups/src/Markup.js index 5f4d2317aa..6e4a252e81 100644 --- a/packages/markups/src/Markup.js +++ b/packages/markups/src/Markup.js @@ -9,12 +9,11 @@ import UnOrderedListBlock from './blocks/UnOrderedListBlock'; import QuoteBlock from './blocks/QuoteBlock'; import TaskListBlock from './blocks/TaskListBlock'; -const Markup = ({ tokens }) => +const Markup = ({ tokens ,searchText}) => tokens.map((token, index) => { switch (token.type) { case 'PARAGRAPH': - return ; - + return ; case 'CODE': return ; diff --git a/packages/markups/src/blocks/ParagraphBlock.js b/packages/markups/src/blocks/ParagraphBlock.js index 57dec2ac9b..97d23fe31d 100644 --- a/packages/markups/src/blocks/ParagraphBlock.js +++ b/packages/markups/src/blocks/ParagraphBlock.js @@ -1,20 +1,41 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { css } from '@emotion/react'; -import InlineElements from '../elements/InlineElements'; -const ParagraphBlock = ({ contents }) => ( -

- -

-); +const ParagraphBlock = ({ contents, searchText }) => { + + const highlightText = (text, searchText) => { + if (!searchText ||typeof text !== 'string') return text; + const regex = new RegExp(`(${escapeRegExp(searchText.text)})`, 'gi'); + return text.split(regex).map((part, index) => + regex.test(part) ? {part} : part + ); + }; + + const escapeRegExp = (string) => { + if (typeof string !== 'string') return ''; + return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + }; + + const renderContent = (content) => { + if (content.type === 'PLAIN_TEXT') { + return highlightText(content.value,searchText); + } + return content.value; + }; + + return ( +

+ {contents.map((content, index) => ( + + {renderContent(content)} + + ))} +

+ ); +}; export default ParagraphBlock; ParagraphBlock.propTypes = { contents: PropTypes.any, -}; +}; \ No newline at end of file diff --git a/packages/react/src/views/Markdown/Markdown.js b/packages/react/src/views/Markdown/Markdown.js index 1eae8326f8..dc30e7f01e 100644 --- a/packages/react/src/views/Markdown/Markdown.js +++ b/packages/react/src/views/Markdown/Markdown.js @@ -6,7 +6,7 @@ import { Markup, MarkupInteractionContext } from '@embeddedchat/markups/src'; import EmojiReaction from '../EmojiReaction/EmojiReaction'; import { useMemberStore, useUserStore } from '../../store'; -const Markdown = ({ body, md, isReaction = false }) => { +const Markdown = ({ body, md, isReaction = false ,searchText}) => { const members = useMemberStore((state) => state.members); const username = useUserStore((state) => state.username); const value = useMemo(() => ({ members, username }), [members, username]); @@ -28,7 +28,7 @@ const Markdown = ({ body, md, isReaction = false }) => { return ( - + ); diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js index fa8c864fec..3e1c1b1052 100644 --- a/packages/react/src/views/Message/Message.js +++ b/packages/react/src/views/Message/Message.js @@ -41,6 +41,7 @@ const Message = ({ showRoles = true, isLinkPreview = true, isInSidebar = false, + searchText, }) => { const { classNames, styleOverrides, variantOverrides } = useComponentOverrides( @@ -267,7 +268,7 @@ const Message = ({ /> ) : ( - + )} {message.blocks && ( diff --git a/packages/react/src/views/MessageAggregators/SearchMessages.js b/packages/react/src/views/MessageAggregators/SearchMessages.js index b4248461c6..67b157b28e 100644 --- a/packages/react/src/views/MessageAggregators/SearchMessages.js +++ b/packages/react/src/views/MessageAggregators/SearchMessages.js @@ -14,7 +14,6 @@ const SearchMessages = () => { const handleInputChange = (e) => { setText(e.target.value); }; - const searchMessages = useCallback(async () => { const { messages } = await RCInstance.getSearchMessages(text); setMessageList(messages); @@ -39,7 +38,6 @@ const SearchMessages = () => { debouncedSearch.cancel(); }; }, [text, debouncedSearch, messageList.length]); - return ( { isSearch: true, handleInputChange, placeholder: 'Search Messages', + value :{text}, }} searchFiltered={messageList} shouldRender={(msg) => !!msg} @@ -56,4 +55,4 @@ const SearchMessages = () => { /> ); }; -export default SearchMessages; +export default SearchMessages; \ No newline at end of file diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js index 44461790a3..5ab59e7543 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js @@ -52,7 +52,8 @@ export const MessageAggregator = ({ const setShowSidebar = useSidebarStore((state) => state.setShowSidebar); const openThread = useMessageStore((state) => state.openThread); - const closeThread = useMessageStore((state) => state.closeThread); + const closeThread = useMessageStore((state) => state.closeThread);; + const { value: searchText } = searchProps; const setJumpToMessage = (msg) => { if (!msg || !msg._id) { @@ -181,6 +182,7 @@ export const MessageAggregator = ({ marginLeft: '15px', minWidth: 0, }} + searchText={searchText} />