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(/(? +