feat(client): add markdown support for post and comment components

lareii · Sep 5, 2024 · 91f3c2b · 91f3c2b
1 parent 4b3a4fc
commit 91f3c2b
Show file tree

Hide file tree

Showing 7 changed files with 1,304 additions and 62 deletions.
diff --git a/client/components/app/Comment/index.jsx b/client/components/app/Comment/index.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import Markdown from 'react-markdown'
 import UserHoverCard from '@/components/app/HoverCard';
 import Dropdown from '@/components/app/Comment/Dropdown';
 import LikeButton from '@/components/app/Comment/LikeButton';
@@ -18,9 +19,7 @@ export default function Comment({ comment: initialComment, onDelete }) {
         </div>
         <Dropdown comment={comment} setComment={setComment} onDelete={onDelete} />
       </div>
-      <div className='text-zinc-400 text-sm'>
-        {comment.content}
-      </div>
+      <Markdown className='md'>{comment.content}</Markdown>
       <div className='mt-4'>
         <LikeButton comment={comment} setComment={setComment} />
       </div>

diff --git a/client/components/app/Navbar/PostModal.jsx b/client/components/app/Navbar/PostModal.jsx
@@ -94,6 +94,7 @@ export default function PostModal() {
                 </FormItem>
               )}
             />
+            <div className='text-zinc-400 text-xs'>* markdown destekliyor</div>
             <Button type='submit' className='mt-5' disabled={isSubmitting}>
               {isSubmitting && <LoaderCircle className='w-4 h-4 mr-2 animate-spin' />}
               gönderiyorum

diff --git a/client/components/app/Post/CommentButton.jsx b/client/components/app/Post/CommentButton.jsx
@@ -103,6 +103,7 @@ export default function CommentButton({ post, setPost, onNewComment }) {
                 </FormItem>
               )}
             />
+            <div className='text-zinc-400 text-xs'>* markdown destekliyor</div>
             <Button type='submit' className='mt-5' disabled={isSubmitting}>
               {isSubmitting && <LoaderCircle className='w-4 h-4 mr-2 animate-spin' />}
               gönderiyorum

diff --git a/client/components/app/Post/index.jsx b/client/components/app/Post/index.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import Markdown from 'react-markdown'
 import Dropdown from '@/components/app/Post/Dropdown';
 import UserHoverCard from '@/components/app/HoverCard';
 import LikeButton from '@/components/app/Post/LikeButton';
@@ -23,9 +24,7 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
         </div>
         <Dropdown post={post} setPost={setPost} onDelete={onDelete} />
       </div>
-      <div className='text-zinc-400 text-sm'>
-        {post.content}
-      </div>
+      <Markdown className='md'>{post.content}</Markdown>
       <div className='mt-4 flex gap-2'>
         <LikeButton post={post} setPost={setPost} />
         <CommentButton post={post} setPost={setPost} onNewComment={onNewComment} />