add ability to enter html for public group chat

src/components/Chat/ChatOptions.tsx

@@ -35,6 +35,7 @@ import { convert } from 'html-to-text';
 import { generateHTML } from '@tiptap/react';
 import ErrorBoundary from '../../common/ErrorBoundary';
 import { useTranslation } from 'react-i18next';
+import { isHtmlString } from '../../utils/chat';
 
 const extractTextFromHTML = (htmlString = '') => {
   return convert(htmlString, {
@@ -76,13 +77,16 @@ 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,

src/components/Chat/MessageItem.tsx

@@ -47,7 +47,11 @@ 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';
 import { useTranslation } from 'react-i18next';
 
 const getBadgeImg = (level) => {
@@ -135,6 +139,8 @@ export const MessageItem = memo(
 
     const htmlText = useMemo(() => {
       if (message?.messageText) {
+        const isHtml = isHtmlString(message?.messageText);
+        if (isHtml) return message?.messageText;
         return generateHTML(message?.messageText, [
           StarterKit,
           Underline,
@@ -147,6 +153,8 @@ export const MessageItem = memo(
 
     const htmlReply = useMemo(() => {
       if (reply?.messageText) {
+        const isHtml = isHtmlString(reply?.messageText);
+        if (isHtml) return reply?.messageText;
         return generateHTML(reply?.messageText, [
           StarterKit,
           Underline,
@@ -616,6 +624,18 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
     'tutorial',
   ]);
 
+  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={{
@@ -661,15 +681,7 @@ export const ReplyPreview = ({ message, isEdit = false }) => {
         )}
 
         {message?.messageText && (
-          <MessageDisplay
+          <MessageDisplay htmlContent={replyMessageText} />
-            htmlContent={generateHTML(message?.messageText, [
-              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());
+}