feat(client): update markdown for posts and comments

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}
         />
       </div>
-      <Markdown className='md'>{comment.content}</Markdown>
+      <MarkdownContent isPostPage={true} content={comment.content} />
       <div className='mt-4 flex justify-between'>
         <LikeButton comment={comment} setComment={setComment} />
         <DateTooltip created_at={comment.created_at} updated_at={comment.updated_at} />

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 }) => (
+      <Link href={src} target='_blank' className='flex items-center w-fit'>
+        {alt || src}
+        <SquareArrowOutUpRight className='w-3 h-3 ml-1' />
+      </Link>
+    ),
+    a: ({ node, children }) => (
+      <Link
+        href={node.properties.href}
+        target='_blank'
+        className='flex items-center w-fit'
+      >
+        {children || node.properties.href}
+        <SquareArrowOutUpRight className='w-3 h-3 ml-1' />
+      </Link>
+    ),
+    table: ({ children }) => children,
+    thead: ({ children }) => children,
+    tbody: ({ children }) => children,
+    tr: ({ children }) => children,
+    th: ({ children }) => children,
+    td: ({ children }) => children
+  };
+
+  return (
+    <Markdown
+      components={customRenderers}
+      remarkPlugins={[remarkGfm]}
+      className='md'
+    >
+      {isPostPage || content.length <= 200
+        ? content
+        : content.slice(0, 200) + '...'}
+    </Markdown>
+  );
+}

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 (
     <div className='p-5 bg-zinc-900 rounded-lg'>
@@ -20,12 +20,8 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
         <Dropdown post={post} setPost={setPost} onDelete={onDelete} />
       </div>
       <div className='relative'>
-        <Markdown className='md'>
-          {pathname.includes('/app/posts/') || post.content.length <= 200
-            ? post.content
-            : post.content.slice(0, 200) + '...'}
-        </Markdown>
-        {!pathname.includes('/app/posts/') && post.content.length > 200 && (
+        <MarkdownContent isPostPage={isPostPage} content={post.content} />
+        {!isPostPage && post.content.length > 200 && (
           <div className='absolute bottom-0 right-0 bg-gradient-to-b from-transparent to-zinc-900 w-full h-full'></div>
         )}
       </div>
@@ -38,7 +34,10 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
             onNewComment={onNewComment}
           />
         </div>
-        <DateTooltip created_at={post.created_at} updated_at={post.updated_at} />
+        <DateTooltip
+          created_at={post.created_at}
+          updated_at={post.updated_at}
+        />
       </div>
     </div>
   );