add ability to enter html for public group chat

src/components/Chat/ChatOptions.tsx

@@ -39,6 +39,7 @@ import { ContextMenuMentions } from "../ContextMenuMentions";
 import { convert } from "html-to-text";
 import { generateHTML } from "@tiptap/react";
 import ErrorBoundary from "../../common/ErrorBoundary";
+import { isHtmlString } from "../../utils/chat";
 
 const extractTextFromHTML = (htmlString = "") => {
   return convert(htmlString, {
@@ -71,19 +72,22 @@ export const ChatOptions = ({
     return untransformedMessages?.map((item) => {
       if (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,
+                Mention,
+              ]);
           return {
             ...item,
             messageText: transformedMessage,
           };
         } catch (error) {
-          // error
+          console.log(error);
         }
       } else return item;
     });

src/components/Chat/MessageItem.tsx

@@ -33,7 +33,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()){
@@ -92,35 +92,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/${
@@ -500,7 +498,17 @@ 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={{
@@ -537,13 +545,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());
+}