diff --git a/client/components/app/Comment/index.jsx b/client/components/app/Comment/index.jsx
index 875bade..8b6bd1f 100644
--- a/client/components/app/Comment/index.jsx
+++ b/client/components/app/Comment/index.jsx
@@ -1,9 +1,9 @@
import { useState } from 'react';
-import Markdown from 'react-markdown';
import Dropdown from '@/components/app/Comment/Dropdown';
import LikeButton from '@/components/app/Comment/LikeButton';
import UserInfo from '@/components/app/User/Info';
import DateTooltip from '@/components/app/Tooltip/Date';
+import MarkdownContent from '@/components/app/Markdown';
export default function Comment({ comment: initialComment, onDelete }) {
const [comment, setComment] = useState(initialComment);
@@ -18,7 +18,7 @@ export default function Comment({ comment: initialComment, onDelete }) {
onDelete={onDelete}
/>
- {comment.content}
+
diff --git a/client/components/app/Markdown/index.jsx b/client/components/app/Markdown/index.jsx
new file mode 100644
index 0000000..89728f3
--- /dev/null
+++ b/client/components/app/Markdown/index.jsx
@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { SquareArrowOutUpRight } from 'lucide-react';
+
+export default function MarkdownContent({ isPostPage, content }) {
+ const customRenderers = {
+ img: ({ src, alt }) => (
+
+ {alt || src}
+
+
+ ),
+ a: ({ node, children }) => (
+
+ {children || node.properties.href}
+
+
+ ),
+ table: ({ children }) => children,
+ thead: ({ children }) => children,
+ tbody: ({ children }) => children,
+ tr: ({ children }) => children,
+ th: ({ children }) => children,
+ td: ({ children }) => children
+ };
+
+ return (
+
+ {isPostPage || content.length <= 200
+ ? content
+ : content.slice(0, 200) + '...'}
+
+ );
+}
diff --git a/client/components/app/Post/index.jsx b/client/components/app/Post/index.jsx
index 7fe8e1e..4b6ec51 100644
--- a/client/components/app/Post/index.jsx
+++ b/client/components/app/Post/index.jsx
@@ -2,16 +2,16 @@
import { usePathname } from 'next/navigation';
import { useState } from 'react';
-import Markdown from 'react-markdown';
import Dropdown from '@/components/app/Post/Dropdown';
import LikeButton from '@/components/app/Post/LikeButton';
import CommentButton from '@/components/app/Post/CommentButton';
import UserInfo from '@/components/app/User/Info';
import DateTooltip from '@/components/app/Tooltip/Date';
+import MarkdownContent from '@/components/app/Markdown';
export default function Post({ post: initialPost, onDelete, onNewComment }) {
const [post, setPost] = useState(initialPost);
- const pathname = usePathname();
+ const isPostPage = usePathname().includes('/app/posts/');
return (
@@ -20,12 +20,8 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
-
- {pathname.includes('/app/posts/') || post.content.length <= 200
- ? post.content
- : post.content.slice(0, 200) + '...'}
-
- {!pathname.includes('/app/posts/') && post.content.length > 200 && (
+
+ {!isPostPage && post.content.length > 200 && (
)}
@@ -38,7 +34,10 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
onNewComment={onNewComment}
/>
-