From 2f5171b194b3f5b2a2ecfd21db23326fafff3774 Mon Sep 17 00:00:00 2001
From: Layne <laynebalsters@gmail.com>
Date: Thu, 17 Mar 2022 09:04:21 -0400
Subject: [PATCH] fix chat colour formatter

---
 src/components/room/widgets/chat/ChatWidgetMessageView.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/room/widgets/chat/ChatWidgetMessageView.tsx b/src/components/room/widgets/chat/ChatWidgetMessageView.tsx
index 12818db2..4385b3b6 100644
--- a/src/components/room/widgets/chat/ChatWidgetMessageView.tsx
+++ b/src/components/room/widgets/chat/ChatWidgetMessageView.tsx
@@ -14,6 +14,7 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
     const { chat = null, makeRoom = null, onChatClicked = null } = props;
     const [ isVisible, setIsVisible ] = useState(false);
     const elementRef = useRef<HTMLDivElement>();
+    const [formatted, setFormatted] = useState(null);
 
     const onMouseDown = (event: MouseEvent<HTMLDivElement>) => onChatClicked(chat);
 
@@ -49,13 +50,13 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
             chat.visible = true;
         }
 
-        chat.text = RoomChatFormatter(chat.text);
+        if(!formatted) setFormatted(RoomChatFormatter(chat.text));
 
         return () =>
         {
             chat.elementRef = null;
         }
-    }, [ elementRef, chat, makeRoom ]);
+    }, [ elementRef, chat, makeRoom,formatted ]);
 
     useEffect(() => setIsVisible(chat.visible), [ chat.visible ]);
 
@@ -68,7 +69,7 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
                 </div>
                 <div className="chat-content">
                     <b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } />
-                    <span className="message" dangerouslySetInnerHTML={{ __html: chat.text }} />
+                    <span className="message" dangerouslySetInnerHTML={{ __html: formatted }} />
                 </div>
                 <div className="pointer"></div>
             </div>