LogalDeveloper/owncast
0
Fork 0
Code Activity

Use same message highlighting on system messages

Browse Source
This commit is contained in:
Gabe Kangas
2023-02-05 15:46:48 -08:00
parent c0a2729226
commit 57d8bdbdbe
5 changed files with 16 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
View File

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

16
web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx
View File

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

1
web/components/chat/ChatUserMessage/ChatUserMessage.tsx
View File

@@ -1,4 +1,3 @@
/* eslint-disable react/no-danger */
import { FC, ReactNode } from 'react'; import { FC, ReactNode } from 'react';
import cn from 'classnames'; import cn from 'classnames';
import { Tooltip } from 'antd'; import { Tooltip } from 'antd';

238
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
web/package.json
View File

@@ -42,7 +42,6 @@
"react-chartkick": "^0.5.3", "react-chartkick": "^0.5.3",
"react-crossfade-img": "1.0.0", "react-crossfade-img": "1.0.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-highlighter-ts": "18.0.1",
"react-hotkeys-hook": "4.3.4", "react-hotkeys-hook": "4.3.4",
"react-linkify": "1.0.0-alpha", "react-linkify": "1.0.0-alpha",
"react-markdown": "8.0.5", "react-markdown": "8.0.5",