diff --git a/.gitignore b/.gitignore index 14130b5..75929ae 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -test.html \ No newline at end of file +test.html +.env.dev +.env \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3258b0e..7c96a3d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 4b6c537..f5547a9 100644 --- a/package.json +++ b/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", diff --git a/src/pages/bug_report.jsx b/src/pages/bug_report.jsx index 81f951d..d11bca9 100644 --- a/src/pages/bug_report.jsx +++ b/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 (
- + setData((prev) => ({ ...prev, title: v }))} + /> {}} + 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} > - +
+
+ Styling with markdown is + supported +
+ +
); } diff --git a/src/styles/richeditor.css b/src/styles/richeditor.css index c802b4f..8383ed1 100644 --- a/src/styles/richeditor.css +++ b/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 {