diff --git a/components/NoteContent/HyperLinks.tsx b/components/NoteContent/HyperLinks.tsx new file mode 100644 index 00000000..fc4484fb --- /dev/null +++ b/components/NoteContent/HyperLinks.tsx @@ -0,0 +1,31 @@ +import { MouseEvent } from "react"; +import { Anchor } from "@mantine/core"; +import useStyles from "./NoteContent.styles"; + +export const HyperLink = ({ href }: { href: string }) => { + const { classes } = useStyles(); + + if (/(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(href)) { + return ( + {href} + ); + } + + return ( + e.stopPropagation()} + target="_blank" + rel="noreferrer" + > + {href} + + ); +}; + +export default HyperLink; diff --git a/components/NoteContent/NoteContent.tsx b/components/NoteContent/NoteContent.tsx index ec7cc76c..3f41c85d 100644 --- a/components/NoteContent/NoteContent.tsx +++ b/components/NoteContent/NoteContent.tsx @@ -1,14 +1,13 @@ -import { Fragment, type MouseEvent } from "react"; -import { Text, Anchor } from "@mantine/core"; +import { Fragment } from "react"; +import { Text } from "@mantine/core"; import MentionLink from "./MentionLink"; import { NPUB_NOSTR_URI_REGEX } from "../../constants"; -import useStyles from "./NoteContent.styles"; +import HyperLink from "./HyperLinks"; const HYPERLINK_REGEX = /(https?:\/\/[-a-zA-Z0-9+&@#/%?=~_|!:,.;]*[-a-zA-Z0-9+&@#/%=~_|])/; export const NoteContent = ({ content }: { content: string }) => { - const { classes } = useStyles(); const formattingRegEx = new RegExp( `(?:${NPUB_NOSTR_URI_REGEX.source}|${HYPERLINK_REGEX.source})`, "gi" @@ -24,17 +23,7 @@ export const NoteContent = ({ content }: { content: string }) => { } if (HYPERLINK_REGEX.test(part)) { - return ( - e.stopPropagation()} - target="_blank" - rel="noreferrer" - > - {part} - - ); + return ; } return {part}; diff --git a/next.config.js b/next.config.js index 24f4262f..98734d1b 100644 --- a/next.config.js +++ b/next.config.js @@ -14,6 +14,14 @@ module.exports = withPWA( eslint: { ignoreDuringBuilds: true, }, + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "**", + }, + ], + }, webpack(config) { config.module.rules.push({ test: /\.svg$/i,