mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-23 19:27:25 +02:00
Linkify comments
This commit is contained in:
parent
9069811286
commit
210d2555f3
3 changed files with 20 additions and 8 deletions
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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;
|
Loading…
Add table
Add a link
Reference in a new issue