Add link highliting (#24)

This commit is contained in:
Szymon Szlachtowicz 2021-09-30 14:18:29 +02:00 committed by GitHub
parent d260c51939
commit b2f8b24fc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 30 deletions

View File

@ -0,0 +1,39 @@
import React, { useEffect, useState } from "react";
/* eslint-disable no-useless-escape */
const regEx =
/(?:(?:http|https):\/\/)?(?:[-a-z0-9]+\.)+[a-z]+(?::\d+)?(?:(?:\/[-\+~%/\.\w]+)?\/?(?:[&?][-\+=&;%@\.\w]+)?(?:#[\w]+)?)?/gi;
/* eslint-enable no-useless-escape */
type ChatMessageContentProps = {
content: string;
};
export function ChatMessageContent({ content }: ChatMessageContentProps) {
const [elements, setElements] = useState<(string | React.ReactElement)[]>([
content,
]);
useEffect(() => {
const split = content.split(regEx);
const newSplit: (string | React.ReactElement)[] = [split[0]];
const matches = content.match(regEx);
if (matches) {
matches.forEach((match, idx) => {
const link =
match.startsWith("http://") || match.startsWith("https://")
? match
: "https://" + match;
newSplit.push(
<a key={idx} href={link}>
{match}
</a>,
split[idx + 1]
);
});
setElements(newSplit);
}
}, [content]);
return <>{elements.map((el) => el)}</>;
}

View File

@ -5,6 +5,8 @@ import { ChatMessage } from "../../models/ChatMessage";
import { Theme } from "../../styles/themes";
import { UserIcon } from "../Icons/UserIcon";
import { ChatMessageContent } from "./ChatMessageContent";
type ChatMessagesProps = {
messages: ChatMessage[];
theme: Theme;
@ -18,20 +20,21 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
ref.current.scrollTop = ref.current.scrollHeight;
}
}, [messages]);
return (
<MessagesWrapper ref={ref}>
{messages.map((message, idx) => (
<MessageOuterWrapper>
{messages.map((message, idx) => {
return (
<MessageOuterWrapper key={idx}>
{(idx === 0 ||
messages[idx - 1].date.getDay() != messages[idx].date.getDay()) && (
messages[idx - 1].date.getDay() !=
messages[idx].date.getDay()) && (
<DateSeparator>
{message.date.getDay() === today
? "Today"
: message.date.toLocaleDateString()}
</DateSeparator>
)}
<MessageWrapper key={idx}>
<MessageWrapper>
<Icon>
<UserIcon theme={theme} />
</Icon>
@ -45,11 +48,14 @@ export function ChatMessages({ messages, theme }: ChatMessagesProps) {
{message.date.toLocaleString()}
</TimeWrapper>
</MessageHeaderWrapper>
<MessageText theme={theme}>{message.content}</MessageText>
<MessageText theme={theme}>
<ChatMessageContent content={message.content} />
</MessageText>
</ContentWrapper>
</MessageWrapper>
</MessageOuterWrapper>
))}
);
})}
</MessagesWrapper>
);
}

View File

@ -69,7 +69,7 @@ export function useMessenger(chatId: string, chatIdList: string[]) {
const messenger = await Messenger.create(identity, {
bootstrap: getBootstrapNodes.bind({}, [
"fleets",
"wakuv2.prod",
"wakuv2.test",
"waku-websocket",
]),
});