add ability to enter html for public group chat

src/components/Chat/ChatOptions.tsx

@@ -39,6 +39,7 @@ import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
 import { generateHTML } from "@tiptap/react";
 import ErrorBoundary from "../../common/ErrorBoundary";
+import { isHtmlString } from "../../utils/chat";
 
 const extractTextFromHTML = (htmlString = '') => {
   return convert(htmlString, {
@@ -59,27 +60,30 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
   const parentRefMentions = useRef();
   const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null)
   const [debouncedValue, setDebouncedValue] = useState(""); // Debounced value
-  const messages = useMemo(()=> {
+  const messages = useMemo(() => {
-    return untransformedMessages?.map((item)=> {
+    return untransformedMessages?.map((item) => {
-      if(item?.messageText){
+      if (item?.messageText) {
-        let transformedMessage = item?.messageText
+        let transformedMessage = item?.messageText;
+        const isHtml = isHtmlString(item?.messageText);
         try {
-            transformedMessage = generateHTML(item?.messageText, [
+          transformedMessage = isHtml
-              StarterKit,
+            ? item?.messageText
-              Underline,
+            : generateHTML(item?.messageText, [
-              Highlight,
+                StarterKit,
-              Mention
+                Underline,
-            ])
+                Highlight,
-            return {
+                Mention,
-              ...item,
+              ]);
-              messageText: transformedMessage
+          return {
-            }
+            ...item,
+            messageText: transformedMessage,
+          };
         } catch (error) {
-          // error
+          console.log(error);
         }
-      } else return item
+      } else return item;
-    })
+    });
-  }, [untransformedMessages])
+  }, [untransformedMessages]);
 
   const getTimestampMention = async () => {
     try {

src/components/Chat/MessageItem.tsx

@@ -34,7 +34,7 @@ import level8Img from "../../assets/badges/level-8.png"
 import level9Img from "../../assets/badges/level-9.png"
 import level10Img from "../../assets/badges/level-10.png"
 import { Embed } from "../Embeds/Embed";
-import { buildImageEmbedLink, messageHasImage } from "../../utils/chat";
+import { buildImageEmbedLink, isHtmlString, messageHasImage } from "../../utils/chat";
 
 const getBadgeImg = (level)=> {
   switch(level?.toString()){
@@ -104,35 +104,33 @@ useEffect(()=> {
    getInfo()
 }, [message?.sender, getIndividualUserInfo])
 
-const htmlText = useMemo(()=> {
+const htmlText = useMemo(() => {
-  
+  if (message?.messageText) {
-  if(message?.messageText){
+    const isHtml = isHtmlString(message?.messageText);
+    if (isHtml) return message?.messageText;
     return generateHTML(message?.messageText, [
       StarterKit,
       Underline,
       Highlight,
       Mention,
-      TextStyle
+      TextStyle,
-    ])
+    ]);
   }
-  
+}, [message?.editTimestamp]);
-}, [message?.editTimestamp])
 
-
+const htmlReply = useMemo(() => {
-
+  if (reply?.messageText) {
-const htmlReply = useMemo(()=> {
+    const isHtml = isHtmlString(reply?.messageText);
-  
+    if (isHtml) return reply?.messageText;
-  if(reply?.messageText){
     return generateHTML(reply?.messageText, [
       StarterKit,
       Underline,
       Highlight,
       Mention,
-      TextStyle
+      TextStyle,
-    ])
+    ]);
   }
-  
+}, [reply?.editTimestamp]);
-}, [reply?.editTimestamp])
 
 const userAvatarUrl = useMemo(()=> {
   return message?.senderName ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${
@@ -524,6 +522,18 @@ const onSeenFunc = useCallback(()=> {
 
 export const ReplyPreview = ({message, isEdit})=> {
 
+  const replyMessageText = useMemo(() => {
+    const isHtml = isHtmlString(message?.messageText);
+    if (isHtml) return message?.messageText;
+    return generateHTML(message?.messageText, [
+      StarterKit,
+      Underline,
+      Highlight,
+      Mention,
+      TextStyle,
+    ]);
+  }, [message?.messageText]);
+
   return (
     <Box
             sx={{
@@ -560,13 +570,7 @@ export const ReplyPreview = ({message, isEdit})=> {
           
               {message?.messageText && (
                 <MessageDisplay
-                  htmlContent={generateHTML(message?.messageText, [
+                  htmlContent={replyMessageText}
-                    StarterKit,
-                    Underline,
-                    Highlight,
-                    Mention,
-                    TextStyle
-                  ])}
                 />
               )}
               {message?.decryptedData?.type === "notification" ? (

src/utils/chat.ts

@@ -20,3 +20,7 @@ export const messageHasImage = (message) => {
     message.images[0]?.service
   );
 };
+
+export function isHtmlString(value) {
+  return typeof value === 'string' && /<[^>]+>/.test(value.trim());
+}