mirror of
https://github.com/fleetdm/fleet
synced 2026-05-06 06:48:54 +00:00
75bbbf6731
For #26604 This PR fixes the way we import DOMPurify, so that we can access its `sanitize` method. I'm not sure why this popped up now -- the last release was a month ago. Perhaps a new release of webpack or a related dependency in our build chain? **Before:**  --- **After:** 
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import DOMPurify from "dompurify";
|
|
import classnames from "classnames";
|
|
|
|
interface IClickableUrls {
|
|
text: string;
|
|
className?: string;
|
|
}
|
|
|
|
const baseClass = "clickable-urls";
|
|
|
|
const urlReplacer = (match: string) => {
|
|
const url = match.startsWith("http") ? match : `https://${match}`;
|
|
return `<a href=${url} target="_blank" rel="noreferrer">
|
|
${match}
|
|
</a>`;
|
|
};
|
|
|
|
const ClickableUrls = ({ text, className }: IClickableUrls): JSX.Element => {
|
|
const clickableUrlClasses = classnames(baseClass, className);
|
|
|
|
// Regex to find case insensitive URLs and replace with link
|
|
const textWithLinks = text.replaceAll(
|
|
/(((https?)?(:\/\/))|((https?)?(:\/\/)?(www\.)))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/g,
|
|
urlReplacer
|
|
);
|
|
const sanitizedTextWithLinks = DOMPurify.sanitize(textWithLinks, {
|
|
ADD_ATTR: ["target"], // Allows opening in a new tab
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className={clickableUrlClasses}
|
|
dangerouslySetInnerHTML={{ __html: sanitizedTextWithLinks }}
|
|
/>
|
|
);
|
|
};
|
|
export default ClickableUrls;
|