Linkify comments

This commit is contained in:
Luke Vella 2022-04-14 18:38:48 +01:00
parent 9069811286
commit 210d2555f3
3 changed files with 20 additions and 8 deletions

View file

@ -18,6 +18,7 @@ import Dropdown, { DropdownItem } from "../dropdown";
import DotsHorizontal from "../icons/dots-horizontal.svg";
import Trash from "../icons/trash.svg";
import NameInput from "../name-input";
import TruncatedLinkify from "../poll/truncated-linkify";
import UserAvater from "../poll/user-avatar";
import { useUserName } from "../user-name-context";
@ -82,7 +83,9 @@ const Comments: React.VoidFunctionComponent<{
</Dropdown>
) : null}
</div>
<div className="w-fit whitespace-pre-wrap">{comment.content}</div>
<div className="w-fit whitespace-pre-wrap">
<TruncatedLinkify>{comment.content}</TruncatedLinkify>
</div>
</Transition>
</div>
);

View file

@ -1,7 +1,8 @@
import * as React from "react";
import ReactLinkify from "react-linkify";
import Tooltip from "../tooltip";
export const truncatedLink = (href: string, text: string, key: number) => {
export const truncateLink = (href: string, text: string, key: number) => {
const textWithoutProtocol = text.replace(/^https?:\/\//i, "");
const beginningOfPath = textWithoutProtocol.indexOf("/");
let finalText = textWithoutProtocol;
@ -28,3 +29,13 @@ export const truncatedLink = (href: string, text: string, key: number) => {
);
}
};
const TruncatedLinkify: React.VoidFunctionComponent<{
children?: React.ReactNode;
}> = ({ children }) => {
return (
<ReactLinkify componentDecorator={truncateLink}>{children}</ReactLinkify>
);
};
export default TruncatedLinkify;