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 (
+
+ );
+ }
+
+ 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,