Feat :Add search highlight

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 <ParagraphBlock key={index} contents={token.value} />;
-
+        return <ParagraphBlock key={index} contents={token.value} searchText={searchText}/>;
       case 'CODE':
         return <CodeBlock key={index} lines={token.value} />;
 

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 }) => (
-  <p
-    css={css`
-      margin: 0;
-    `}
-  >
-    <InlineElements contents={contents} />
-  </p>
-);
+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) ? <mark key={index}>{part}</mark> : 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 (
+    <p>
+      {contents.map((content, index) => (
+        <React.Fragment key={index}>
+          {renderContent(content)}
+        </React.Fragment>
+      ))}
+    </p>
+  );
+};
 
 export default ParagraphBlock;
 
 ParagraphBlock.propTypes = {
   contents: PropTypes.any,
-};
+};

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 (
     <Box>
       <MarkupInteractionContext.Provider value={value}>
-        <Markup tokens={md} />
+        <Markup tokens={md} searchText={searchText}/>
       </MarkupInteractionContext.Provider>
     </Box>
   );

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 = ({
                     />
                   </>
                 ) : (
-                  <Markdown body={message} md={message.md} isReaction={false} />
+                  <Markdown body={message} md={message.md} isReaction={false}  searchText={searchText}/>
                 )}
 
                 {message.blocks && (

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 (
     <MessageAggregator
       title="Search Messages"
@@ -49,11 +47,12 @@ const SearchMessages = () => {
         isSearch: true,
         handleInputChange,
         placeholder: 'Search Messages',
+        value :{text},
       }}
       searchFiltered={messageList}
       shouldRender={(msg) => !!msg}
       viewType={viewType}
     />
   );
 };
-export default SearchMessages;
+export default SearchMessages;

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}
                       />
 
                       <ActionButton