"use client"; import { Quiz } from "@/components/lab-quiz/quiz"; import Markdown from "@/components/markdown/markdown"; import { useUploadImages } from "@/components/pages/writer-tools/hooks"; import { Textarea } from "@/components/ui/textarea"; import type { QuizPart } from "@/lib/api/labs.v2"; import { cn } from "@/lib/utils"; import { type SetStateAction, startTransition, useEffect, useRef, useState, } from "react"; import yaml from "yaml"; export function QuizWriter() { const [quizYaml, setQuizYaml] = useState(exampleQuiz); const [quiz, setQuiz] = useState(); const quizYamlRef = useRef(quizYaml); useEffect(() => { quizYamlRef.current = quizYaml; }); const handleQuizYamlChange = (action: SetStateAction) => { function handleNew(yamlString: string) { setQuizYaml(yamlString); startTransition(() => { try { setQuiz({ type: "quiz", title: "", public: true, content: yaml.parse(yamlString), }); } catch {} }); } if (typeof action === "string") { handleNew(action); } else { handleNew(action(quizYamlRef.current)); } }; useEffect(() => { handleQuizYamlChange(quizYaml); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const { handlePaste, handleDrop, handleDragOver, handleDragStart, handleDragStop, draggingOver, } = useUploadImages(handleQuizYamlChange); return (