Submit bug reports by email

.gitignore

@@ -22,4 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-test.html
+test.html
+.env.dev
+.env

package-lock.json

@@ -14,6 +14,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.5.0",
         "file-saver": "^2.0.5",
         "html-to-image": "^1.11.11",
         "jsonschema": "^1.4.1",
@@ -5609,6 +5610,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
+      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -7463,14 +7487,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/dotenv-expand": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
@@ -15016,6 +15032,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -15386,6 +15407,14 @@
         }
       }
     },
+    "node_modules/react-scripts/node_modules/dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-sortable-hoc": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz",

package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.5.0",
     "file-saver": "^2.0.5",
     "html-to-image": "^1.11.11",
     "jsonschema": "^1.4.1",

src/pages/bug_report.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import logo_light from "../assets/logo_light_46.png";
 import logo_dark from "../assets/logo_dark_46.png";
-import { Banner, Button, Input, Upload } from "@douyinfe/semi-ui";
+import { Banner, Button, Input, Upload, Toast } from "@douyinfe/semi-ui";
 import {
   IconSun,
   IconMoon,
@@ -13,36 +13,90 @@ import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { editorConfig } from "../data/editor_config";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $generateHtmlFromNodes } from "@lexical/html";
+import axios from "axios";
 
 function Form({ theme }) {
   const [editor] = useLexicalComposerContext();
+  const [data, setData] = useState({
+    title: "",
+    attachments: [],
+  });
+
+  const onFileChange = (fileList) => {
+    const attachments = [];
+
+    const processFile = (index) => {
+      const reader = new FileReader();
+
+      reader.onload = (event) => {
+        const dataUri = event.target.result;
+        attachments.push({ path: dataUri, filename: fileList[index].name });
+      };
+
+      reader.readAsDataURL(fileList[index].fileInstance);
+    };
+
+    fileList.forEach((_, i) => processFile(i));
+
+    setData((prev) => ({
+      ...prev,
+      attachments: attachments,
+    }));
+  };
 
   const onSubmit = useCallback(
     (e) => {
       editor.update(() => {
-        const tmp = $generateHtmlFromNodes(editor);
-        console.log(tmp);
+        const sendMail = async () => {
+          await axios
+            .post(`${process.env.REACT_APP_BACKEND_URL}/report_bug`, {
+              subject: data.title,
+              message: $generateHtmlFromNodes(editor),
+              attachments: data.attachments,
+            })
+            .then((res) => Toast.success("Bug reported!"))
+            .catch((err) => Toast.error("Oops! Something went wrong."));
+        };
+        sendMail();
       });
     },
-    [editor]
+    [editor, data]
   );
 
   return (
     <div className="p-5 mt-6 card-theme rounded-md">
-      <Input placeholder="Title" />
+      <Input
+        placeholder="Title"
+        value={data.title}
+        onChange={(v) => setData((prev) => ({ ...prev, title: v }))}
+      />
       <RichEditor theme={theme} />
       <Upload
         action="#"
-        beforeUpload={({ file, fileList }) => {}}
+        onChange={(info) => onFileChange(info.fileList)}
+        beforeUpload={({ file, fileList }) => {
+          return {
+            autoRemove: false,
+            fileInstance: file.fileInstance,
+            status: "success",
+            shouldUpload: false,
+          };
+        }}
         draggable={true}
         dragMainText="Click to upload the file or drag and drop the file here"
-        dragSubText="Support json"
-        accept="application/json,.ddb"
-        onRemove={() => {}}
-        onFileChange={() => {}}
-        limit={5}
+        dragSubText="Upload up to 3 images"
+        accept="image/*"
+        limit={3}
       ></Upload>
-      <Button onClick={onSubmit}>Submit</Button>
+      <div className="pt-4 flex justify-between items-center">
+        <div className="text-sm opacity-80">
+          <i className="fa-brands fa-markdown me-1"></i>Styling with markdown is
+          supported
+        </div>
+        <Button onClick={onSubmit} style={{ padding: "16px 24px" }}>
+          Submit
+        </Button>
+      </div>
     </div>
   );
 }

src/styles/richeditor.css

@@ -7,7 +7,7 @@
 }
 
 .editor-container {
-  margin: 20px auto 20px auto;
+  margin: 16px auto 16px auto;
   border-radius: 6px;
   color: var(--semi-color-text-1);
   background-color: rgba(var(--semi-grey-1), 1);
@@ -24,7 +24,7 @@
 }
 
 .editor-input {
-  min-height: 150px;
+  min-height: 160px;
   resize: none;
   font-size: 15px;
   position: relative;
@@ -195,6 +195,7 @@
   padding: 0;
   margin: 0;
   margin-left: 16px;
+  list-style-type: circle;
 }
 
 .editor-listitem {