支持html 编辑器

dashboard/src/components/comment/CommentCreate.tsx

@@ -1,5 +1,5 @@
 import { useIntl } from "react-intl";
-import { message } from "antd";
+import { Form, message } from "antd";
 import {
   ProForm,
   ProFormInstance,
@@ -7,6 +7,8 @@ import {
   ProFormTextArea,
 } from "@ant-design/pro-components";
 import { Col, Row, Space } from "antd";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
 
 import { IComment } from "./CommentItem";
 import { post } from "../../request";
@@ -15,13 +17,22 @@ import { useAppSelector } from "../../hooks";
 import { currentUser as _currentUser } from "../../reducers/current-user";
 import { useRef } from "react";
 
+export type TContentType = "text" | "markdown" | "html";
+
 interface IWidget {
   resId?: string;
   resType?: string;
   parent?: string;
   onCreated?: Function;
+  editor?: TContentType;
 }
-const Widget = ({ resId = "", resType = "", parent, onCreated }: IWidget) => {
+const Widget = ({
+  resId = "",
+  resType = "",
+  editor = "html",
+  parent,
+  onCreated,
+}: IWidget) => {
   const intl = useIntl();
   const formRef = useRef<ProFormInstance>();
   const _currUser = useAppSelector(_currentUser);
@@ -51,7 +62,7 @@ const Widget = ({ resId = "", resType = "", parent, onCreated }: IWidget) => {
           onFinish={async (values) => {
             //新建
             console.log("create", resId, resType, parent);
-
+            console.log("value", values);
             post<ICommentRequest, ICommentResponse>(`/v2/discussion`, {
               res_id: resId,
               res_type: resType,
@@ -110,14 +121,25 @@ const Widget = ({ resId = "", resType = "", parent, onCreated }: IWidget) => {
               rules={[{ required: true, message: "这是必填项" }]}
             />
           )}
-
-          <ProFormTextArea
-            name="content"
-            label={intl.formatMessage({ id: "forms.fields.content.label" })}
-            placeholder={intl.formatMessage({
-              id: "forms.fields.content.placeholder",
-            })}
-          />
+          {editor === "text" ? (
+            <ProFormTextArea
+              name="content"
+              label={intl.formatMessage({ id: "forms.fields.content.label" })}
+              placeholder={intl.formatMessage({
+                id: "forms.fields.content.placeholder",
+              })}
+            />
+          ) : editor === "html" ? (
+            <Form.Item
+              name="content"
+              label={intl.formatMessage({ id: "forms.fields.content.label" })}
+              tooltip="可以直接粘贴屏幕截图"
+            >
+              <ReactQuill theme="snow" style={{ height: 220 }} />
+            </Form.Item>
+          ) : (
+            <></>
+          )}
         </ProForm>
       </div>
     </div>

dashboard/src/components/comment/CommentEdit.tsx

@@ -8,6 +8,7 @@ import { Col, Row, Space } from "antd";
 import { IComment } from "./CommentItem";
 import { put } from "../../request";
 import { ICommentRequest, ICommentResponse } from "../api/Comment";
+import Editor from "@uiw/react-md-editor/lib/Editor";
 
 interface IWidget {
   data: IComment;

dashboard/src/components/comment/CommentTopicInfo.tsx

@@ -49,18 +49,23 @@ const Widget = ({ topicId }: IWidget) => {
   }, [topicId]);
   return (
     <div>
-      <Title editable level={1} style={{ margin: 0 }}>
+      <Title editable level={3} style={{ margin: 0 }}>
         {data?.title}
       </Title>
       <div>
         <Text type="secondary">
           <Space>
-            {" "}
-            {data?.user.nickName}{" "}
+            {data?.user.nickName}
             <TimeShow time={data?.createdAt} title="创建" />
           </Space>
         </Text>
       </div>
+      <div
+        style={{ maxWidth: 800, overflow: "auto" }}
+        dangerouslySetInnerHTML={{
+          __html: data?.content ? data?.content : "",
+        }}
+      />
     </div>
   );
 };