mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-02 17:17:26 +02:00
Linkify comments
This commit is contained in:
parent
9069811286
commit
210d2555f3
3 changed files with 20 additions and 8 deletions
41
components/poll/truncated-linkify.tsx
Normal file
41
components/poll/truncated-linkify.tsx
Normal file
|
@ -0,0 +1,41 @@
|
|||
import * as React from "react";
|
||||
import ReactLinkify from "react-linkify";
|
||||
import Tooltip from "../tooltip";
|
||||
|
||||
export const truncateLink = (href: string, text: string, key: number) => {
|
||||
const textWithoutProtocol = text.replace(/^https?:\/\//i, "");
|
||||
const beginningOfPath = textWithoutProtocol.indexOf("/");
|
||||
let finalText = textWithoutProtocol;
|
||||
if (beginningOfPath !== -1) {
|
||||
finalText = textWithoutProtocol.substring(0, beginningOfPath + 30);
|
||||
}
|
||||
if (finalText.length === textWithoutProtocol.length) {
|
||||
return (
|
||||
<a key={key} href={href}>
|
||||
{finalText}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
finalText += "…";
|
||||
return (
|
||||
<Tooltip
|
||||
key={key}
|
||||
content={
|
||||
<div className="text-xs font-mono max-w-md break-all">{href}</div>
|
||||
}
|
||||
>
|
||||
<a href={href}>{finalText}</a>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
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