From a9e8f870520bfbdb35957c97b90b0c4d64ca633f Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Thu, 29 May 2025 21:20:12 +0300
Subject: [PATCH] add ability to enter html for public group chat

---
 src/components/Chat/ChatOptions.tsx | 16 +++++++++------
 src/components/Chat/MessageItem.tsx | 32 ++++++++++++++++++++---------
 src/utils/chat.ts                   |  4 ++++
 3 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx
index 59124a0..2d2c352 100644
--- a/src/components/Chat/ChatOptions.tsx
+++ b/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, [
-            StarterKit,
-            Underline,
-            Highlight,
-            Mention,
-          ]);
+          transformedMessage = isHtml
+            ? item?.messageText
+            : generateHTML(item?.messageText, [
+                StarterKit,
+                Underline,
+                Highlight,
+                Mention,
+              ]);
           return {
             ...item,
             messageText: transformedMessage,
diff --git a/src/components/Chat/MessageItem.tsx b/src/components/Chat/MessageItem.tsx
index 3151fc5..29a6a88 100644
--- a/src/components/Chat/MessageItem.tsx
+++ b/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
-            htmlContent={generateHTML(message?.messageText, [
-              StarterKit,
-              Underline,
-              Highlight,
-              Mention,
-              TextStyle,
-            ])}
-          />
+          <MessageDisplay htmlContent={replyMessageText} />
         )}
 
         {message?.decryptedData?.type === 'notification' ? (
diff --git a/src/utils/chat.ts b/src/utils/chat.ts
index c7099c0..fed287d 100644
--- a/src/utils/chat.ts
+++ b/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());
+}