feat: markdown in comments

Author: guansss

package.json

@@ -52,6 +52,7 @@
     "react-router-dom": "6",
     "react-spring": "^9.4.5",
     "react-use": "^17.4.0",
+    "remark-breaks": "^3.0.2",
     "remark-gfm": "^3.0.1",
     "snakecase-keys": "^5.4.4",
     "swr": "^2.0.0-rc.3",

src/components/Markdown.tsx

@@ -0,0 +1,51 @@
+import clsx from 'clsx'
+import { uniq } from 'lodash-es'
+import ReactMarkdown from 'react-markdown'
+import { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown'
+import remarkBreaks from 'remark-breaks'
+import remarkGfm from 'remark-gfm'
+
+interface MarkdownProps extends ReactMarkdownOptions {
+  className?: string
+}
+
+export function Markdown({
+  className,
+  remarkPlugins,
+  components,
+  children,
+  ...props
+}: MarkdownProps) {
+  return (
+    <ReactMarkdown
+      className={clsx(
+        className,
+        'markdown-body !text-sm !bg-transparent [&_img]:!bg-transparent',
+      )}
+      remarkPlugins={uniq([remarkGfm, remarkBreaks, ...(remarkPlugins ?? [])])}
+      components={{
+        ...components,
+
+        a: ({ node, children, ...props }) => {
+          // set target="_blank" for external links, see: https://github.com/remarkjs/react-markdown/issues/12#issuecomment-1479195975
+          if (props.href?.startsWith('http')) {
+            props.target = '_blank'
+            props.rel = 'noopener noreferrer'
+          }
+
+          // by default, ReactMarkdown already handles dangerous URIs and replaces them with "javascript:void(0)",
+          // but React warns about passing such a string to the href, so we'll handle this
+          if (props.href?.startsWith('javascript:')) {
+            props.href = '#'
+            props.onClick = (e) => e.preventDefault()
+          }
+
+          return <a {...props}>{children}</a>
+        },
+      }}
+      {...props}
+    >
+      {children}
+    </ReactMarkdown>
+  )
+}

src/components/announcement/AnnDialog.tsx

@@ -8,15 +8,15 @@ import {
 } from '@blueprintjs/core'
 
 import { FC } from 'react'
-import ReactMarkdown, { Components } from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { Components } from 'react-markdown'
 
 import { announcementBaseURL } from '../../apis/announcement'
 import {
   AnnouncementSection,
   AnnouncementSectionMeta,
 } from '../../models/announcement'
 import { formatDateTime, formatRelativeTime } from '../../utils/times'
+import { Markdown } from '../Markdown'
 
 interface AnnDialogProps extends DialogProps {
   sections?: AnnouncementSection[]
@@ -68,9 +68,7 @@ export const AnnDialog: FC<AnnDialogProps> = ({ sections, ...dialogProps }) => {
     <Dialog className="" title="公告" icon="info-sign" {...dialogProps}>
       <DialogBody className="">
         {content ? (
-          <ReactMarkdown
-            className="markdown-body !text-sm !bg-transparent [&_img]:!bg-transparent"
-            remarkPlugins={[remarkGfm]}
+          <Markdown
             rehypePlugins={[attachMetaPlugin]}
             components={{
               h1: Heading,
@@ -84,7 +82,7 @@ export const AnnDialog: FC<AnnDialogProps> = ({ sections, ...dialogProps }) => {
             transformImageUri={transformUri}
           >
             {content || ''}
-          </ReactMarkdown>
+          </Markdown>
         ) : (
           <NonIdealState icon="help" title="暂无公告" />
         )}

src/components/viewer/comment/CommentArea.tsx

@@ -30,6 +30,7 @@ import { authAtom } from '../../../store/auth'
 import { formatError } from '../../../utils/error'
 import { formatDateTime } from '../../../utils/times'
 import { wrapErrorMessage } from '../../../utils/wrapErrorMessage'
+import { Markdown } from '../../Markdown'
 import { OutlinedIcon } from '../../OutlinedIcon'
 import { withSuspensable } from '../../Suspensable'
 import { CommentForm } from './CommentForm'
@@ -143,7 +144,7 @@ const MainComment = ({
   comment: MainCommentInfo
   children?: ReactNode
 }) => {
-  const { message, uploader, uploadTime } = comment
+  const { uploader, uploadTime } = comment
 
   return (
     <Card className={clsx(className)}>
@@ -152,7 +153,7 @@ const MainComment = ({
           <div className="font-bold mr-2">{uploader}</div>
           <div>{formatDateTime(uploadTime)}</div>
         </div>
-        <div className="text-base">{message}</div>
+        <CommentContent comment={comment} />
         <CommentActions comment={comment} />
       </div>
       {children}
@@ -169,7 +170,7 @@ const SubComment = ({
   comment: SubCommentInfo
   fromComment?: SubCommentInfo
 }) => {
-  const { message, uploader, uploadTime } = comment
+  const { uploader, uploadTime } = comment
 
   return (
     <div className={clsx(className, 'pl-8')}>
@@ -190,7 +191,7 @@ const SubComment = ({
                 :&nbsp;
               </>
             )}
-            <span>{message}</span>
+            <CommentContent comment={comment} />
           </div>
           <CommentActions comment={comment} />
         </div>
@@ -199,6 +200,16 @@ const SubComment = ({
   )
 }
 
+const CommentContent = ({
+  className,
+  comment: { message },
+}: {
+  className?: string
+  comment: CommentInfo
+}) => {
+  return <Markdown className={clsx(className)}>{message}</Markdown>
+}
+
 const CommentActions = ({
   className,
   comment,

yarn.lock

@@ -4534,6 +4534,15 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
+remark-breaks@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/remark-breaks/-/remark-breaks-3.0.2.tgz#f466b9d3474d7323146c0149fc1496dabadd908e"
+  integrity sha512-x96YDJ9X+Ry0/JNZFKfr1hpcAKvGYWfUTszxY9RbxKEqq6uzPPoLCuHdZsLPZZUdAv3nCROyc7FPrQLWr2rxyw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    unified "^10.0.0"
+    unist-util-visit "^4.0.0"
+
 remark-gfm@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-3.0.1.tgz#0b180f095e3036545e9dddac0e8df3fa5cfee54f"