Use same message highlighting on system messages

web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss

@@ -30,9 +30,11 @@
     }
 
     mark {
-      padding-left: 0.35em;
-      padding-right: 0.35em;
-      background-color: var(--theme-color-palette-12);
+      padding-left: 0.3em;
+      padding-right: 0.3em;
+      color: var(--theme-color-palette-4);
+      border-radius: var(--theme-rounded-corners);
+      background-color: var(--color-owncast-palette-7);
     }
   }
 

web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx

@@ -1,9 +1,10 @@
-/* eslint-disable react/no-danger */
-import { Highlight } from 'react-highlighter-ts';
 import { FC } from 'react';
 import cn from 'classnames';
+import { Interweave } from 'interweave';
+import { UrlMatcher } from 'interweave-autolink';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import styles from './ChatSystemMessage.module.scss';
+import { ChatMessageHighlightMatcher } from '../ChatUserMessage/customMatcher';
 
 export type ChatSystemMessageProps = {
   message: ChatMessage;
@@ -21,8 +22,13 @@ export const ChatSystemMessage: FC<ChatSystemMessageProps> = ({
     <div className={styles.user}>
       <span className={styles.userName}>{displayName}</span>
     </div>
-    <Highlight search={highlightString}>
-      <div className={styles.message} dangerouslySetInnerHTML={{ __html: body }} />
-    </Highlight>
+    <Interweave
+      className={styles.message}
+      content={body}
+      matchers={[
+        new UrlMatcher('url', { validateTLD: false }),
+        new ChatMessageHighlightMatcher('highlight', { highlightString }),
+      ]}
+    />
   </div>
 );