diff --git a/package-lock.json b/package-lock.json index 69ed81c..8050410 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,8 @@ "react-hotkeys-hook": "^4.4.1", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", + "slate": "^0.94.1", + "slate-react": "^0.98.3", "socket.io-client": "^4.7.2", "unique-names-generator": "^4.7.1", "url": "^0.11.1", @@ -2469,14 +2471,6 @@ "bezier-easing": "^2.1.0" } }, - "node_modules/@douyinfe/semi-foundation/node_modules/scroll-into-view-if-needed": { - "version": "2.2.31", - "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz", - "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==", - "dependencies": { - "compute-scroll-into-view": "^1.0.20" - } - }, "node_modules/@douyinfe/semi-icons": { "version": "2.37.0", "resolved": "https://registry.npmjs.org/@douyinfe/semi-icons/-/semi-icons-2.37.0.tgz", @@ -2547,14 +2541,6 @@ "react-dom": "0.14.x || 15.x || 16.x || 17.x" } }, - "node_modules/@douyinfe/semi-ui/node_modules/scroll-into-view-if-needed": { - "version": "2.2.31", - "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz", - "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==", - "dependencies": { - "compute-scroll-into-view": "^1.0.20" - } - }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -3623,6 +3609,11 @@ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", @@ -4349,6 +4340,11 @@ "@types/node": "*" } }, + "node_modules/@types/is-hotkey": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.7.tgz", + "integrity": "sha512-yB5C7zcOM7idwYZZ1wKQ3pTfjA9BbvFqRWvKB46GFddxnJtHwi/b9y84ykQtxQPg5qhdpg4Q/kWU3EGoCTmLzQ==" + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz", @@ -4418,6 +4414,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/lodash": { + "version": "4.14.198", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.198.tgz", + "integrity": "sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==" + }, "node_modules/@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -7111,6 +7112,18 @@ "node": ">=8" } }, + "node_modules/direction": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz", + "integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==", + "bin": { + "direction": "cli.js" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/dlv": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", @@ -9681,6 +9694,11 @@ "node": ">=0.10.0" } }, + "node_modules/is-hotkey": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz", + "integrity": "sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ==" + }, "node_modules/is-map": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz", @@ -9754,6 +9772,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-potential-custom-element-name": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz", @@ -15701,6 +15727,14 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/scroll-into-view-if-needed": { + "version": "2.2.31", + "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz", + "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==", + "dependencies": { + "compute-scroll-into-view": "^1.0.20" + } + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -15943,6 +15977,37 @@ "node": ">=8" } }, + "node_modules/slate": { + "version": "0.94.1", + "resolved": "https://registry.npmjs.org/slate/-/slate-0.94.1.tgz", + "integrity": "sha512-GH/yizXr1ceBoZ9P9uebIaHe3dC/g6Plpf9nlUwnvoyf6V1UOYrRwkabtOCd3ZfIGxomY4P7lfgLr7FPH8/BKA==", + "dependencies": { + "immer": "^9.0.6", + "is-plain-object": "^5.0.0", + "tiny-warning": "^1.0.3" + } + }, + "node_modules/slate-react": { + "version": "0.98.3", + "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.98.3.tgz", + "integrity": "sha512-p1BnF9eRyRM0i5hkgOb11KgmpWLQm9Zyp6jVkOAj5fPdIGheKhg48Z7aWKrayeJ4nmRyi/NjRZz/io5hQcphmw==", + "dependencies": { + "@juggle/resize-observer": "^3.4.0", + "@types/is-hotkey": "^0.1.1", + "@types/lodash": "^4.14.149", + "direction": "^1.0.3", + "is-hotkey": "^0.1.6", + "is-plain-object": "^5.0.0", + "lodash": "^4.17.4", + "scroll-into-view-if-needed": "^2.2.20", + "tiny-invariant": "1.0.6" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0", + "slate": ">=0.65.3" + } + }, "node_modules/socket.io-client": { "version": "4.7.2", "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.2.tgz", @@ -16794,6 +16859,16 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "node_modules/tiny-invariant": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", + "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", diff --git a/package.json b/package.json index 35cff0a..36e82b2 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "react-hotkeys-hook": "^4.4.1", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", + "slate": "^0.94.1", + "slate-react": "^0.98.3", "socket.io-client": "^4.7.2", "unique-names-generator": "^4.7.1", "url": "^0.11.1", diff --git a/src/App.js b/src/App.js index 9c9f2fe..7f223a9 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import Editor from "./pages/editor"; import LandingPage from "./pages/landing_page"; import Survey from "./pages/survey"; import Shortcuts from "./pages/shortcuts"; +import BugReport from "./pages/bug_report"; function App() { return ( @@ -13,6 +14,7 @@ function App() { } /> } /> }/> + }/> diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx index 846e7dd..a77ccda 100644 --- a/src/components/control_panel.jsx +++ b/src/components/control_panel.jsx @@ -976,7 +976,7 @@ export default function ControlPanel(props) { function: () => {}, }, "Report a bug": { - function: () => {}, + function: () => window.open("/bug_report", "_blank"), }, "Suggest a feature": { function: () => {}, diff --git a/src/components/rich_editor.jsx b/src/components/rich_editor.jsx new file mode 100644 index 0000000..c69968c --- /dev/null +++ b/src/components/rich_editor.jsx @@ -0,0 +1,19 @@ +import React, { useState } from "react"; +import { createEditor } from "slate"; +import { Slate, Editable, withReact } from "slate-react"; + +const initialValue = [ + { + type: "paragraph", + children: [{ text: "A line of text in a paragraph." }], + }, +]; + +export default function RichEditor() { + const [editor] = useState(() => withReact(createEditor())); + return ( + + + + ); +} diff --git a/src/index.css b/src/index.css index e3fc53b..50c1ed7 100644 --- a/src/index.css +++ b/src/index.css @@ -55,7 +55,7 @@ .card-theme{ color: var(--semi-color-text-1); - background-color: rgba(var(--semi-grey-1), 1); + background-color: rgba(var(--semi-grey-0), 1); } .toolbar-theme { diff --git a/src/pages/bug_report.jsx b/src/pages/bug_report.jsx new file mode 100644 index 0000000..3544f1b --- /dev/null +++ b/src/pages/bug_report.jsx @@ -0,0 +1,187 @@ +import React, { useEffect, useState } 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 { + IconSun, + IconMoon, + IconGithubLogo, + IconPaperclip, +} from "@douyinfe/semi-icons"; +import RichEditor from "../components/rich_editor"; + +export default function BugReport() { + const [theme, setTheme] = useState(""); + + useEffect(() => { + const t = localStorage.getItem("theme"); + setTheme(t); + if (t === "dark") { + const body = document.body; + if (body.hasAttribute("theme-mode")) { + body.setAttribute("theme-mode", "dark"); + } + } else { + const body = document.body; + if (body.hasAttribute("theme-mode")) { + body.setAttribute("theme-mode", "light"); + } + } + document.title = "Report a bug - drawDB"; + document.body.setAttribute("class", "theme"); + }, [setTheme]); + + const changeTheme = () => { + const body = document.body; + const t = body.getAttribute("theme-mode"); + if (t === "dark") { + if (body.hasAttribute("theme-mode")) { + body.setAttribute("theme-mode", "light"); + setTheme("light"); + } + } else { + if (body.hasAttribute("theme-mode")) { + body.setAttribute("theme-mode", "dark"); + setTheme("dark"); + } + } + }; + + return ( + <> +
+
+ logo +
+ Report a bug +
+
+
+ +
+
+
+
+
+
+ +
Describe the bug
+
+
+ Please provide a clear and concise description of what the bug is. +
+
+ +
Steps to reproduce the bug
+
+
+ Please provide the steps of how to reproduce the bug. +
+
+ +
Expected behaviour
+
+
+ Tell us what you expected to see vs what you saw. +
+
+ +
Your browser and device
+
+
+ What web browser and device did you encounter the bug on. +
+
+ +
Screenshots
+
+
+ Add any relevant images if possible. +
+
+
+
Alternatively
+
+
+ +
+
+ + We value your feedback! If you've encountered a bug or issue + while using our platform, please help us improve by reporting + it. Your input is invaluable in making our service better. +
+ } + /> +
+ + + {}} + 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} + > +
+
+ +
+
+ © 2024 drawDB - All right reserved. +
+ + ); +}