From cecbf6a6d9a2ec17caf47da7c26f3155511c7171 Mon Sep 17 00:00:00 2001
From: SimpPoseidon
 <120441879+TanishqMehrunkarIIPSDAVV@users.noreply.github.com>
Date: Sat, 21 Sep 2024 19:04:18 +0530
Subject: [PATCH 1/2] propagation update

---
 src/QuestionPaperDashboard/QuestionPaperDashboard.jsx    | 9 ++++++---
 .../ReadyQuestionPaperDashboard.jsx                      | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/QuestionPaperDashboard/QuestionPaperDashboard.jsx b/src/QuestionPaperDashboard/QuestionPaperDashboard.jsx
index 668f17d..456e8a1 100644
--- a/src/QuestionPaperDashboard/QuestionPaperDashboard.jsx
+++ b/src/QuestionPaperDashboard/QuestionPaperDashboard.jsx
@@ -213,7 +213,10 @@ const QuestionPaperDashboard = () => {
                   >
                     {hoveredItem === question._id && (
                       <div className="hovered-buttons">
-                        <button onClick={() => editQuestion(question)}>
+                        <button onClick={(e) => 
+                          {
+                            e.stopPropagation();
+                            editQuestion(question)}}>
                           <div className="flex-class">
                             <CiEdit />
                             <div>Edit</div>
@@ -221,7 +224,7 @@ const QuestionPaperDashboard = () => {
                         </button>
                         <button
                           id="duplicate"
-                          onClick={() => duplicateQuestion(question)}
+                          onClick={(e) => {e.stopPropagation();duplicateQuestion(question)}}
                         >
                           <div className="flex-class">
                             <HiDocumentDuplicate />
@@ -230,7 +233,7 @@ const QuestionPaperDashboard = () => {
                         </button>
                         <button
                           id="delete"
-                          onClick={() => deleteQuestion(question)}
+                          onClick={(e) => {e.stopPropagation();deleteQuestion(question)}}
                         >
                           <div className="flex-class">
                             <MdDelete />
diff --git a/src/ReadyQuestionPaperDashboard/ReadyQuestionPaperDashboard.jsx b/src/ReadyQuestionPaperDashboard/ReadyQuestionPaperDashboard.jsx
index 7780664..019782b 100644
--- a/src/ReadyQuestionPaperDashboard/ReadyQuestionPaperDashboard.jsx
+++ b/src/ReadyQuestionPaperDashboard/ReadyQuestionPaperDashboard.jsx
@@ -99,7 +99,7 @@ const ReadyQuestionPaperDashboard = () => {
                 >
                   {hoveredItem === question._id && (
                     <div className="hovered-buttons">
-                      <button onClick={() => editReadyQuestion(question)}>
+                      <button onClick={(e) => {e.stopPropagation();editReadyQuestion(question)}}>
                         <div className="flex-class">
                           <CiEdit />
                           <div>Edit</div>

From f87bc8253e03603d87c445dc62e908328b378e90 Mon Sep 17 00:00:00 2001
From: SimpPoseidon
 <120441879+TanishqMehrunkarIIPSDAVV@users.noreply.github.com>
Date: Sat, 21 Sep 2024 19:17:26 +0530
Subject: [PATCH 2/2] image copy paste

---
 src/edit_ready_question/EditReadyQuestion.jsx | 234 +++++++++++-------
 1 file changed, 139 insertions(+), 95 deletions(-)

diff --git a/src/edit_ready_question/EditReadyQuestion.jsx b/src/edit_ready_question/EditReadyQuestion.jsx
index 40a060a..046cf9e 100644
--- a/src/edit_ready_question/EditReadyQuestion.jsx
+++ b/src/edit_ready_question/EditReadyQuestion.jsx
@@ -1,4 +1,4 @@
-import React, { useState,useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import '../question/question.css';
 import { FaTimes } from 'react-icons/fa';
 import { useDropzone } from 'react-dropzone';
@@ -8,7 +8,6 @@ import axios from 'axios';
 import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import AlertModal from '../AlertModal/AlertModal'; // Import the AlertModal component
 
-
 const EditReadyQuestion = () => {
   document.title = "Ready Question";
   const { paperId } = useParams();
@@ -21,14 +20,58 @@ const EditReadyQuestion = () => {
   const [marks, setMarks] = useState(location.state.marks);
   const [image, setImage] = useState(location.state.image);
   const [loading, setLoading] = useState(false);
-  const [loadingSpinner,setLoadingSpinner] = useState(true);
+  const [loadingSpinner, setLoadingSpinner] = useState(true);
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [modalMessage, setModalMessage] = useState('');
   const [isError, setIsError] = useState(false);
   const navigate = useNavigate();
 
-  useEffect(()=>{setTimeout(()=>{setLoadingSpinner(false)},1000);},[]);
-  console.log(location.state);
+  useEffect(() => {
+    setTimeout(() => {
+      setLoadingSpinner(false);
+    }, 1000);
+  }, []);
+
+  // Handle pasting images in question description
+  const handlePaste = async (event) => {
+    const clipboardData = event.clipboardData;
+    const items = clipboardData.items;
+
+    for (const item of items) {
+      if (item.type.includes("image")) {
+        event.preventDefault(); // Prevent default paste behavior
+        const file = item.getAsFile();
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("upload_preset", "question");
+
+        setQuestionDescription((prev) => prev + "\nUploading image...");
+
+        try {
+          const uploadResponse = await axios.post(
+            "http://localhost:5000/paper/upload",
+            formData,
+            {
+              headers: { "Content-Type": "multipart/form-data" },
+            }
+          );
+
+          const imageUrl = uploadResponse.data.url;
+
+          // Replace "Uploading image..." with the actual image markdown link
+          setQuestionDescription((prev) =>
+            prev.replace("Uploading image...", `![image](${imageUrl})`)
+          );
+        } catch (error) {
+          console.error("Image upload failed:", error.message);
+          setQuestionDescription((prev) =>
+            prev.replace("Uploading image...", "Image upload failed.")
+          );
+        }
+      }
+    }
+  };
+
   const handleEditQuestion = async () => {
     if (!questionheading || !questionDescription || !compilerReq || !marks) {
       setModalMessage('Please fill in all the required fields.');
@@ -109,104 +152,105 @@ const EditReadyQuestion = () => {
     onDrop,
     maxSize: 10485760, // 10MB limit
   });
-console.log(image);
+
   return (
     <>
       <Navbar />
       <div className='add_question_container_main'>
-        {loadingSpinner ? (<></>) : (<>
-          <div className="add_question_container">
-          <h2 className="add_question_heading">Edit Ready Question</h2>
-
-          <div>
-            <label className="add_question_label">Question Heading:</label>
-            <input
-              type="text"
-              value={questionheading}
-              onChange={(e) => setQuestionHeading(e.target.value)}
-              placeholder="Enter your question heading"
-              required
-              className="add_question_input"
-            />
-          </div>
-
-          <div>
-            <label className="add_question_label">Question Description:</label>
-            <textarea
-              value={questionDescription}
-              onChange={(e) => setQuestionDescription(e.target.value)}
-              placeholder="Enter question description"
-              required
-              rows="3"
-              className="add_question_textarea"
-            />
-          </div>
-
-          <div className="add_question_row">
-            <div className="add_question_column">
-              <label className="add_question_label">Compiler Requirement:</label>
-              <select
-                value={compilerReq}
-                onChange={(e) => setCompilerReq(e.target.value)}
-                required
-                className="add_question_select"
-              >
-                <option value="" disabled>Select Compiler</option>
-                <option value="cpp">C++</option>
-                <option value="java">Java</option>
-                <option value="python">Python</option>
-                <option value="sql">SQL</option>
-              </select>
-            </div>
-            <div className="add_question_column">
-              <label className="add_question_label">Marks:</label>
-              <input
-                type="number"
-                value={marks}
-                onChange={() => setMarks(marks)}
-                placeholder="Enter marks"
-                required
-                className="add_question_input"
-                disabled
-              />
-            </div>
-          </div>
-
-          <div>
-            <label className="add_question_label">Upload Image (optional):</label>
-            <div {...getRootProps({ className: 'add_question_dropbox' })}>
-              <input {...getInputProps()} />
-              {image ? (
-                <div className="add_question_image_preview">
-                  <img src={image ? typeof image === 'string' 
-                              ? image: URL.createObjectURL(image): 
-                            URL.createObjectURL(image)} alt="Question" className="add_question_preview_image" />
-                  <FaTimes className="add_question_remove_image_icon" onClick={(e)=>{e.stopPropagation();handleRemoveImage()}} />
-                </div> 
-              ) : (
-                <p>
-                  <div className='add_question_cloudicon'>
-                    <IoCloudUploadOutline />
-                  </div>
-                  Drag and drop an image here, or click to select one
-                </p>
-              )}
-            </div>
-          </div>
+        {loadingSpinner ? (<></>) : (
+          <>
+            <div className="add_question_container">
+              <h2 className="add_question_heading">Edit Ready Question</h2>
 
-          <button onClick={handleEditQuestion} className="add_question_button" disabled={loading}>
-            {loading ? 'Editing...' : 'Edit Question'}
-          </button>
-        </div>
-        </>)}
+              <div>
+                <label className="add_question_label">Question Heading:</label>
+                <input
+                  type="text"
+                  value={questionheading}
+                  onChange={(e) => setQuestionHeading(e.target.value)}
+                  placeholder="Enter your question heading"
+                  required
+                  className="add_question_input"
+                />
+              </div>
+
+              <div>
+                <label className="add_question_label">Question Description:</label>
+                <textarea
+                  value={questionDescription}
+                  onChange={(e) => setQuestionDescription(e.target.value)}
+                  onPaste={handlePaste} // Capture paste event
+                  placeholder="Enter question description"
+                  required
+                  rows="3"
+                  className="add_question_textarea"
+                />
+              </div>
+
+              <div className="add_question_row">
+                <div className="add_question_column">
+                  <label className="add_question_label">Compiler Requirement:</label>
+                  <select
+                    value={compilerReq}
+                    onChange={(e) => setCompilerReq(e.target.value)}
+                    required
+                    className="add_question_select"
+                  >
+                    <option value="" disabled>Select Compiler</option>
+                    <option value="cpp">C++</option>
+                    <option value="java">Java</option>
+                    <option value="python">Python</option>
+                    <option value="sql">SQL</option>
+                  </select>
+                </div>
+                <div className="add_question_column">
+                  <label className="add_question_label">Marks:</label>
+                  <input
+                    type="number"
+                    value={marks}
+                    onChange={() => setMarks(marks)}
+                    placeholder="Enter marks"
+                    required
+                    className="add_question_input"
+                    disabled
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="add_question_label">Upload Image (optional):</label>
+                <div {...getRootProps({ className: 'add_question_dropbox' })}>
+                  <input {...getInputProps()} />
+                  {image ? (
+                    <div className="add_question_image_preview">
+                      <img src={typeof image === 'string' ? image : URL.createObjectURL(image)} alt="Question" className="add_question_preview_image" />
+                      <FaTimes className="add_question_remove_image_icon" onClick={(e) => { e.stopPropagation(); handleRemoveImage() }} />
+                    </div>
+                  ) : (
+                    <p>
+                      <div className='add_question_cloudicon'>
+                        <IoCloudUploadOutline />
+                      </div>
+                      Drag and drop an image here, or click to select one
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              <button onClick={handleEditQuestion} className="add_question_button" disabled={loading}>
+                {loading ? 'Editing...' : 'Edit Question'}
+              </button>
+            </div>
+          </>
+        )}
       </div>
 
       {/* Alert Modal */}
-      <AlertModal 
-        isOpen={modalIsOpen} 
-        onClose={() => setModalIsOpen(false)} 
-        message={modalMessage} 
-        iserror={isError} 
+      <AlertModal
+        isOpen={modalIsOpen}
+        onClose={() => setModalIsOpen(false)}
+        message={modalMessage}
+        iserror={isError}
       />
     </>
   );