ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: linkify

Browse Source
This commit is contained in:
Tristan Yang
2023-01-20 09:31:33 +08:00
parent 37f916f7c3
commit 5171ca5e8e
9 changed files with 521 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/LinkifyText.tsx
+48
View File
@@ -0,0 +1,48 @@
// import React from 'react';
import Linkify from "linkify-react";
import 'linkify-plugin-mention';
import URLPreview from './Message/URLPreview';
import Mention from './Message/Mention';
type Props = {
url?: boolean,
mention?: boolean,
mentionTextOnly?: boolean,
mentionPopOver?: boolean,
text: string,
cid?: number
}
const LinkifyText = ({ url = true, mention = true, mentionTextOnly = false, mentionPopOver = true, text, cid }: Props) => {
return (
<Linkify options={
{
render: {
url: ({ content }) => {
if (!url) return <>{content}</>;
return <>
<a className="link" target="_blank" href={content} rel="noreferrer">
{content}
</a>
{!content.startsWith("mailto") && <URLPreview url={content} />}
</>;
},
mention: ({ content }) => {
if (!mention) return <>{content}</>;
// console.log();
if (/@[0-9]+/.test(content)) {
const uid = content.trim().slice(1);
return <Mention uid={+uid} cid={cid} popover={mentionPopOver} textOnly={mentionTextOnly} />;
}
return <>{content}</>;
}
}
}
}>
{text}
</Linkify>
);
};
export default LinkifyText;
src/common/component/Message/Mention.tsx
+2 -2
View File
@@ -24,15 +24,15 @@ const Mention = ({ uid, popover = true, cid, textOnly = false }: Props) => {
const user = usersData[uid];
if (!user) return null;
if (textOnly) return `@${user.name}`;
if (!popover) return <Styled>{`@${user.name}`}</Styled>;
return (
<Tippy
disabled={!popover}
interactive
placement="top"
trigger="click"
content={<Profile uid={uid} type="card" cid={cid} />}
>
<Styled className={popover ? "clickable" : ""}>{`@${user.name}`}</Styled>
<Styled className="clickable">{`@${user.name}`}</Styled>
</Tippy>
);
};
src/common/component/Message/Reply.tsx
+2 -11
View File
@@ -1,10 +1,9 @@
import React, { MouseEvent, FC } from "react";
import styled from "styled-components";
import reactStringReplace from "react-string-replace";
import MarkdownRender from "../MarkdownRender";
import Mention from "./Mention";
import { ContentTypes } from "../../../app/config";
import { getFileIcon, isImage } from "../../utils";
import LinkifyText from '../LinkifyText';
import Avatar from "../Avatar";
import { useAppSelector } from "../../../app/store";
@@ -104,15 +103,7 @@ const renderContent = (data) => {
case ContentTypes.text:
res = (
<span className="txt">
{reactStringReplace(
content,
// eslint-disable-next-line no-useless-escape
/(\s{1}\@[0-9]+\s{1})/g,
(match, idx) => {
const uid = match.trim().slice(1);
return <Mention key={idx} uid={+uid} popover={false} />;
}
)}
<LinkifyText text={content} url={false} mentionTextOnly={true} mentionPopOver={false} />
</span>
);
break;
src/common/component/Message/renderContent.tsx
+3 -22
View File
@@ -1,15 +1,12 @@
import React from "react";
import Linkit from "react-linkify";
// import React from "react";
import dayjs from "dayjs";
import reactStringReplace from "react-string-replace";
import i18n from '../../../i18n';
import { ContentTypes } from "../../../app/config";
import Mention from "./Mention";
import ForwardedMessage from "./ForwardedMessage";
import MarkdownRender from "../MarkdownRender";
import FileMessage from "../FileMessage";
import URLPreview from "./URLPreview";
import { ContentType } from "../../../types/message";
import LinkifyText from '../LinkifyText';
type Props = {
context: "user" | "channel";
@@ -40,23 +37,7 @@ const renderContent = ({
case ContentTypes.text:
ctn = (
<>
<Linkit
componentDecorator={(decoratedHref, decoratedText, key) => (
<React.Fragment key={key}>
<a className="link" target="_blank" href={decoratedHref} key={key} rel="noreferrer">
{decoratedText}
</a>
{!decoratedHref.startsWith("mailto") && <URLPreview url={decoratedHref} />}
</React.Fragment>
)}
>
{reactStringReplace(content, /(\s{1}@[0-9]+\s{1})/g, (match, idx) => {
const uid = match.trim().slice(1);
return <Mention key={idx} uid={+uid} cid={to} />;
})}
{/* {content.replace(/\s{1}\@[1-9]+\s{1}/g,)} */}
{/* {new RegExp(/\s{1}\@[1-9]+\s{1}/g).exec(content)} */}
</Linkit>
<LinkifyText text={content} cid={to} />
{edited && (
<span className="edited" title={dayjs(+edited).format("YYYY-MM-DD h:mm:ss A")}>
({i18n.t("edited", { ns: "chat" })})
src/common/component/Send/Replying.tsx
+6 -6
View File
@@ -1,6 +1,4 @@
import reactStringReplace from "react-string-replace";
import styled from "styled-components";
import Mention from "../Message/Mention";
import { ContentTypes } from "../../../app/config";
import MarkdownRender from "../MarkdownRender";
import closeIcon from "../../../assets/icons/close.circle.svg?url";
@@ -9,6 +7,7 @@ import { getFileIcon, isImage } from "../../utils";
import useSendMessage from "../../hook/useSendMessage";
import { useAppSelector } from "../../../app/store";
import { MessagePayload } from "../../../app/slices/message";
import LinkifyText from "../LinkifyText";
const Styled = styled.div`
background-color: #f3f4f6;
@@ -82,10 +81,11 @@ const renderContent = (data: MessagePayload) => {
let res = null;
switch (content_type) {
case ContentTypes.text:
res = reactStringReplace(content, /(\s{1}@[0-9]+\s{1})/g, (match, idx) => {
const uid = match.trim().slice(1);
return <Mention popover={false} key={idx} uid={+uid} />;
});
res = <LinkifyText text={content} url={false} mentionTextOnly={true} />;
// res = reactStringReplace(content, /(\s{1}@[0-9]+\s{1})/g, (match, idx) => {
// const uid = match.trim().slice(1);
// return <Mention popover={false} key={idx} uid={+uid} />;
// });
break;
case ContentTypes.markdown:
res = (
src/routes/chat/utils.tsx
+2 -6
View File
@@ -1,7 +1,6 @@
import React from "react";
import dayjs from "dayjs";
import styled from "styled-components";
import reactStringReplace from "react-string-replace";
import { useDispatch } from "react-redux";
import { isImage } from "../../common/utils";
import { ContentTypes } from "../../app/config";
@@ -9,8 +8,8 @@ import Checkbox from "../../common/component/styled/Checkbox";
import Divider from "../../common/component/Divider";
import Message from "../../common/component/Message";
import { updateSelectMessages } from "../../app/slices/ui";
import Mention from "../../common/component/Message/Mention";
import { useAppSelector } from "../../app/store";
import LinkifyText from "../../common/component/LinkifyText";
export function getUnreadCount({
mids = [],
@@ -57,10 +56,7 @@ export const renderPreviewMessage = (message = null) => {
switch (content_type) {
case ContentTypes.text:
{
res = reactStringReplace(content, /(\s{1}@[0-9]+\s{1})/g, (match, idx) => {
const uid = match.trim().slice(1);
return <Mention key={idx} uid={+uid} textOnly={true} />;
});
res = <LinkifyText text={content} url={false} mentionTextOnly={true} />;
}
break;
case ContentTypes.markdown:
src/routes/setting/License/LicensePriceListModal.tsx
+5
View File
@@ -1,5 +1,6 @@
import { ChangeEvent, FC, useState } from "react";
import toast from "react-hot-toast";
import * as linkify from 'linkifyjs';
import Modal from "../../../common/component/Modal";
import StyledModal from "../../../common/component/styled/Modal";
import Button from "../../../common/component/styled/Button";
@@ -49,6 +50,10 @@ const LicensePriceListModal: FC<Props> = ({ closeModal }) => {
`${LicensePriceList[0].pid}|${LicensePriceList[0].limit}|${LicensePriceList[0].type}|${LicensePriceList[0].sub_dur || ""}`
);
const handleRenew = async () => {
if (!linkify.test(host)) {
toast.error("Invalid Host");
return;
}
const [priceId, user_limit, type, sub_dur = "month"] = selectPrice.split("|") as [string, string, PriceType, PriceSubscriptionDuration];
const metadata = {
user_limit: Number(user_limit),