:memo: add markdown editor

dashboard/package.json

@@ -4,14 +4,14 @@
   "private": true,
   "dependencies": {
     "@ant-design/charts": "^1.4.2",
-    "@ant-design/pro-components": "^2.3.16",
+    "@ant-design/pro-components": "^2.3.20",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@fluentui/react": "^8.98.0",
+    "@fluentui/react": "^8.98.4",
     "@fontsource/roboto": "^4.5.8",
     "@fortawesome/fontawesome-free": "^6.2.0",
     "@mui/icons-material": "^5.10.9",
-    "@mui/material": "^5.10.9",
+    "@mui/material": "^5.10.10",
     "@reduxjs/toolkit": "^1.8.6",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
@@ -26,7 +26,8 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.0",
     "@types/react-pdf": "^5.7.2",
-    "antd": "^4.23.5",
+    "@uiw/react-md-editor": "^3.19.1",
+    "antd": "^4.23.6",
     "dayjs": "^1.11.5",
     "dinero.js": "^2.0.0-alpha.8",
     "emoji-mart": "^5.2.2",
@@ -48,9 +49,9 @@
     "react-draggable": "^4.4.5",
     "react-dropzone": "^14.2.3",
     "react-highlight-words": "^0.18.0",
-    "react-hook-form": "^7.37.0",
+    "react-hook-form": "^7.38.0",
     "react-image-crop": "^10.0.8",
-    "react-intl": "^6.2.0",
+    "react-intl": "^6.2.1",
     "react-json-view": "^1.21.3",
     "react-markdown": "^8.0.3",
     "react-number-format": "^5.0.1",

dashboard/src/components/nut/Home.tsx

@@ -1,9 +1,17 @@
 import code_png from "../../assets/nut/code.png";
+import MarkdownForm from "./MarkdownForm";
+import MarkdownShow from "./MarkdownShow";
 
 const Widget = () => {
   return (
     <div>
       <h1>Home</h1>
+      <br />
+      <MarkdownShow />
+      <br />
+      <h3>Form</h3>
+      <MarkdownForm />
+      <br />
       <img alt="code" src={code_png} />
     </div>
   );

dashboard/src/components/nut/MarkdownForm.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { ProForm, ProFormTextArea } from "@ant-design/pro-components";
+import { message } from "antd";
+import MDEditor from "@uiw/react-md-editor";
+
+interface IFormData {
+  plain: string;
+}
+const Widget = () => {
+  const intl = useIntl();
+  const [mdValue, setMdValue] = useState("**Hello mint!!!**");
+
+  return (
+    <ProForm<IFormData>
+      onFinish={async (values: IFormData) => {
+        // TODO
+        console.log(mdValue, values);
+        message.success(intl.formatMessage({ id: "flashes.success" }));
+      }}
+    >
+      <ProForm.Group>
+        <ProFormTextArea
+          width="md"
+          name="plain"
+          required
+          label="Plain text"
+          rules={[{ required: true }]}
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        <MDEditor
+          value={mdValue}
+          onChange={(value: string | undefined) => {
+            if (value) {
+              setMdValue(value);
+            }
+          }}
+        />
+      </ProForm.Group>
+    </ProForm>
+  );
+};
+
+export default Widget;

dashboard/src/components/nut/MarkdownShow.tsx

@@ -0,0 +1,5 @@
+import MDEditor from "@uiw/react-md-editor";
+
+const Widget = () => <MDEditor.Markdown source="- Hello, **mint**!" />;
+
+export default Widget;

dashboard/src/pages/nut/index.tsx

@@ -1,16 +1,14 @@
-import ReactMarkdown from "react-markdown";
 import { Tag } from "antd";
 
 import HeadBar from "../../components/library/HeadBar";
 import Footer from "../../components/library/Footer";
+import Home from "../../components/nut/Home";
 
 const Widget = () => {
   return (
     <div>
       <HeadBar />
       <div>Home Page</div>
-      <ReactMarkdown>- Hello, **mint**!</ReactMarkdown>
-
       <div>
         <Tag
           onClick={() => {
@@ -20,6 +18,9 @@ const Widget = () => {
           Test
         </Tag>
       </div>
+      <div>
+        <Home />
+      </div>
       <Footer />
     </div>
   );

documents/development/frontend/README.md

@@ -61,7 +61,13 @@ yarn start
 
   - Markdown
 
-    ![markdown viewer](demo/md-view.png)
+    - Viewer
+
+      ![markdown show](demo/md-show.png)
+
+    - Editor
+
+      ![markdown form](demo/md-form.png)
 
   - on click event