From 65d4618fe4aa14bdc0e59febfaa3a66c9566dc90 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Thu, 25 Jan 2024 11:34:04 +0800
Subject: [PATCH] feat: comment markdown improve

Signed-off-by: Innei <i@innei.in>
---
 src/components/modules/comment/Comment.tsx    | 24 ++--------------
 .../modules/comment/CommentMarkdown.tsx       | 28 +++++++++++++++++++
 .../dashboard/comments/CommentContentCell.tsx |  9 ++++--
 .../comments/CommentDesktopTable.tsx          |  2 +-
 .../ui/markdown/markdown.module.css           |  2 +-
 5 files changed, 39 insertions(+), 26 deletions(-)
 create mode 100644 src/components/modules/comment/CommentMarkdown.tsx

diff --git a/src/components/modules/comment/Comment.tsx b/src/components/modules/comment/Comment.tsx
index 00bb7cd1d3..bf389653e2 100644
--- a/src/components/modules/comment/Comment.tsx
+++ b/src/components/modules/comment/Comment.tsx
@@ -10,9 +10,7 @@ import { createPortal } from 'react-dom'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { atom, useAtomValue } from 'jotai'
-import Markdown from 'markdown-to-jsx'
 import type { CommentModel } from '@mx-space/api-client'
-import type { MarkdownToJSX } from 'markdown-to-jsx'
 import type { PropsWithChildren } from 'react'
 
 import { Avatar } from '~/components/ui/avatar'
@@ -25,6 +23,7 @@ import { softSpringPreset } from '~/constants/spring'
 import { jotaiStore } from '~/lib/store'
 
 import styles from './Comment.module.css'
+import { CommentMarkdown } from './CommentMarkdown'
 import { CommentPinButton, OcticonGistSecret } from './CommentPinButton'
 import { CommentReplyButton } from './CommentReplyButton'
 
@@ -150,15 +149,7 @@ export const Comment: Component<{
                   'max-w-[calc(100%-3rem)]',
                 )}
               >
-                <Markdown
-                  options={{
-                    disabledTypes,
-                    disableParsingRawHTML: true,
-                    forceBlock: true,
-                  }}
-                >
-                  {text}
-                </Markdown>
+                <CommentMarkdown>{text}</CommentMarkdown>
                 <CommentReplyButton commentId={comment.id} />
               </div>
             </div>
@@ -200,14 +191,3 @@ export const CommentBoxHolderPortal = (props: PropsWithChildren) => {
 
   return createPortal(props.children, portalElement)
 }
-
-const disabledTypes = [
-  'footnote',
-  'footnoteReference',
-
-  'image',
-
-  'htmlComment',
-  'htmlSelfClosing',
-  'htmlBlock',
-] as MarkdownToJSX.RuleName[]
diff --git a/src/components/modules/comment/CommentMarkdown.tsx b/src/components/modules/comment/CommentMarkdown.tsx
new file mode 100644
index 0000000000..5644c094d2
--- /dev/null
+++ b/src/components/modules/comment/CommentMarkdown.tsx
@@ -0,0 +1,28 @@
+import type { MarkdownToJSX } from '~/components/ui/markdown'
+import type { FC } from 'react'
+
+import { Markdown } from '~/components/ui/markdown'
+
+const disabledTypes = [
+  'footnote',
+  'footnoteReference',
+
+  'image',
+
+  'htmlComment',
+  'htmlSelfClosing',
+  'htmlBlock',
+] as MarkdownToJSX.RuleName[]
+
+export const CommentMarkdown: FC<{
+  children: string
+}> = ({ children }) => {
+  return (
+    <Markdown
+      disabledTypes={disabledTypes}
+      disableParsingRawHTML
+      forceBlock
+      value={children}
+    />
+  )
+}
diff --git a/src/components/modules/dashboard/comments/CommentContentCell.tsx b/src/components/modules/dashboard/comments/CommentContentCell.tsx
index 7dc9498483..7c6b57c4b4 100644
--- a/src/components/modules/dashboard/comments/CommentContentCell.tsx
+++ b/src/components/modules/dashboard/comments/CommentContentCell.tsx
@@ -8,6 +8,7 @@ import { EllipsisHorizontalTextWithTooltip } from '~/components/ui/typography'
 import { clsxm } from '~/lib/helper'
 import { apiClient } from '~/lib/request'
 
+import { CommentMarkdown } from '../../comment/CommentMarkdown'
 import { CommentAction } from './CommentAction'
 import { CommentDataContext } from './CommentContext'
 import { CommentUrlRender } from './UrlRender'
@@ -57,7 +58,9 @@ export const CommentContentCell: Component<{ comment: CommentModel }> = (
         <RelativeTime date={created} /> 于 {TitleEl}
       </div>
 
-      <p className="break-words">{text}</p>
+      <div className="break-words">
+        <CommentMarkdown>{text}</CommentMarkdown>
+      </div>
 
       {parentComment && typeof parentComment !== 'string' && (
         <div className="relative mt-2 break-words">
@@ -69,7 +72,9 @@ export const CommentContentCell: Component<{ comment: CommentModel }> = (
               />{' '}
               在 <RelativeTime date={parentComment.created} /> 说：
             </div>
-            <p className="mt-2">{parentComment.text}</p>
+            <div className="mt-2">
+              <CommentMarkdown>{parentComment.text}</CommentMarkdown>
+            </div>
           </blockquote>
         </div>
       )}
diff --git a/src/components/modules/dashboard/comments/CommentDesktopTable.tsx b/src/components/modules/dashboard/comments/CommentDesktopTable.tsx
index ce7b8a1fa5..e11fd186a9 100644
--- a/src/components/modules/dashboard/comments/CommentDesktopTable.tsx
+++ b/src/components/modules/dashboard/comments/CommentDesktopTable.tsx
@@ -59,7 +59,7 @@ const CommentCheckBox: FC<{
 }
 const CommentItem = ({ comment }: { comment: CommentModel }) => {
   return (
-    <div className="grid grid-cols-[40px_300px_auto] gap-8">
+    <div className="mx-auto grid w-[100rem] max-w-full grid-cols-[40px_300px_auto] gap-8">
       <div className="ml-2 mt-[18px]">
         <CommentCheckBox id={comment.id} />
       </div>
diff --git a/src/components/ui/markdown/markdown.module.css b/src/components/ui/markdown/markdown.module.css
index 880252b051..e0a6f97a1d 100644
--- a/src/components/ui/markdown/markdown.module.css
+++ b/src/components/ui/markdown/markdown.module.css
@@ -98,7 +98,7 @@
   }
 
   :not(pre) code {
-    @apply bg-zinc-200 font-mono dark:bg-neutral-800;
+    @apply rounded-md bg-zinc-200 px-2 font-mono dark:bg-neutral-800;
   }
 
   pre {