import { useEffect, useState, useCallback, useRef } from "react"; import logo_light from "../assets/logo_light_160.png"; import logo_dark from "../assets/logo_dark_160.png"; import { Banner, Button, Input, Upload, Toast, Spin } from "@douyinfe/semi-ui"; import { IconSun, IconMoon, IconGithubLogo, IconPaperclip, } from "@douyinfe/semi-icons"; import RichEditor from "../components/LexicalEditor/RichEditor"; import { LexicalComposer } from "@lexical/react/LexicalComposer"; import { editorConfig } from "../data/editorConfig"; import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"; import { $generateHtmlFromNodes } from "@lexical/html"; import { CLEAR_EDITOR_COMMAND } from "lexical"; import axios from "axios"; import { Link } from "react-router-dom"; function Form({ theme }) { const [editor] = useLexicalComposerContext(); const [data, setData] = useState({ title: "", attachments: [], }); const [loading, setLoading] = useState(false); const uploadRef = useRef(); const resetForm = () => { setData({ title: "", attachments: [], }); setLoading(false); if (uploadRef.current) { uploadRef.current.clear(); } }; 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(() => { setLoading(true); editor.update(() => { const sendMail = async () => { await axios .post(`${import.meta.env.VITE_BACKEND_URL}/send_email`, { subject: `[BUG REPORT]: ${data.title}`, message: $generateHtmlFromNodes(editor), attachments: data.attachments, }) .then(() => { Toast.success("Bug reported!"); editor.dispatchCommand(CLEAR_EDITOR_COMMAND, null); resetForm(); }) .catch(() => { Toast.error("Oops! Something went wrong."); setLoading(false); }); }; sendMail(); }); }, [editor, data]); return (