Wire up chat message props. Add username highlighting. Closes #1921

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -1,15 +1,25 @@
 /* eslint-disable react/no-danger */
 import { useEffect, useState } from 'react';
+import { Highlight } from 'react-highlighter-ts';
+import he from 'he';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import { formatTimestamp, formatMessageText } from './messageFmt';
+import { formatTimestamp } from './messageFmt';
 import s from './ChatUserMessage.module.scss';
 
 interface Props {
   message: ChatMessage;
   showModeratorMenu: boolean;
+  highlightString: string;
+  renderAsPersonallySent: boolean;
 }
 
-export default function ChatUserMessage({ message, showModeratorMenu }: Props) {
+export default function ChatUserMessage({
+  message,
+  highlightString,
+  showModeratorMenu,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  renderAsPersonallySent, // Move the border to the right and render a background
+}: Props) {
   const { body, user, timestamp } = message;
   const { displayName, displayColor } = user;
   const color = `hsl(${displayColor}, 100%, 70%)`;
@@ -17,7 +27,7 @@ export default function ChatUserMessage({ message, showModeratorMenu }: Props) {
   const [formattedMessage, setFormattedMessage] = useState<string>(body);
 
   useEffect(() => {
-    setFormattedMessage(formatMessageText(body));
+    setFormattedMessage(he.decode(body));
   }, [message]);
 
   return (
@@ -25,7 +35,9 @@ export default function ChatUserMessage({ message, showModeratorMenu }: Props) {
       <div className={s.user} style={{ color }}>
         {displayName}
       </div>
-      <div className={s.message} dangerouslySetInnerHTML={{ __html: formattedMessage }} />
+      <Highlight search={highlightString}>
+        <div className={s.message}>{formattedMessage}</div>
+      </Highlight>
       {showModeratorMenu && <div>Moderator menu</div>}
     </div>
   );