diff --git a/package.json b/package.json
index 884e66db0..8a7e96250 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,10 @@
"react-router-dom": "^6.5.0",
"react-singleton-hook": "^4.0.1",
"react-use": "^17.4.0",
+ "rehype-external-links": "^2.0.1",
+ "remark-gfm": "^3.0.1",
+ "remark-images": "^3.1.0",
+ "remark-unwrap-images": "^3.0.1",
"rxjs": "^7.8.0"
},
"devDependencies": {
diff --git a/src/components/post-contents.tsx b/src/components/post-contents.tsx
new file mode 100644
index 000000000..bf3d53566
--- /dev/null
+++ b/src/components/post-contents.tsx
@@ -0,0 +1,32 @@
+import { Image, Link, LinkProps } from "@chakra-ui/react";
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkImages from "remark-images";
+import remarkUnwrapImages from "remark-unwrap-images";
+import rehypeExternalLinks from "rehype-external-links";
+
+const CustomLink = (props: LinkProps) => ;
+
+const components = {
+ img: Image,
+ a: CustomLink,
+};
+
+export type PostContentsProps = {
+ content: string;
+};
+
+export const PostContents = React.memo(({ content }: PostContentsProps) => {
+ const fixedLines = content.replace(/(?
+ {fixedLines}
+
+ );
+});
diff --git a/src/components/post-modal.tsx b/src/components/post-modal.tsx
index c87b1802d..c401a3e03 100644
--- a/src/components/post-modal.tsx
+++ b/src/components/post-modal.tsx
@@ -9,8 +9,8 @@ import {
ModalHeader,
ModalOverlay,
} from "@chakra-ui/react";
-import ReactMarkdown from "react-markdown";
import { NostrEvent } from "../types/nostr-event";
+import { PostContents } from "./post-contents";
export type PostModalProps = {
event: NostrEvent;
@@ -25,9 +25,7 @@ export const PostModal = ({ event, onClose, isOpen }: PostModalProps) => (
{event.pubkey}
-
- {event.content.replace(/(?
+