Fix reactquill pasting

Somnath-Chattaraj · Oct 25, 2024 · f7474b7 · f7474b7
1 parent 09612c0
commit f7474b7
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 25 deletions.
diff --git a/frontend/src/components/CreatePosts.jsx b/frontend/src/components/CreatePosts.jsx
@@ -63,36 +63,45 @@ const CreatePost = ({ communities, onSubmit }) => {
   };
 
   const handlePaste = async (e) => {
-    e.preventDefault();
-    const items = e.clipboardData.items;
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (item.type.startsWith("image/")) {
-        const file = item.getAsFile();
-        if (file) {
-          setLoading(true);
-          try {
-            const imageUrl = await handleImageUpload(file);
-            const quill = quillRef.current.getEditor();
-            const range = quill.getSelection();
-            quill.insertEmbed(range.index, "image", imageUrl);
-          } catch (error) {
-            console.error("Error uploading image: ", error);
-          } finally {
-            setLoading(false);
-          }
+  e.preventDefault();
+  const items = e.clipboardData.items;
+  const quill = quillRef.current.getEditor();
+  let range = quill.getSelection();
+  if (!range) {
+    range = { index: quill.getLength() };
+  }
+
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+
+    if (item.type.startsWith("image/")) {
+      const file = item.getAsFile();
+      if (file) {
+        setLoading(true);
+        try {
+          const imageUrl = await handleImageUpload(file);
+          quill.insertEmbed(range.index, "image", imageUrl);
+        } catch (error) {
+          console.error("Error uploading image: ", error);
+        } finally {
+          setLoading(false);
         }
       }
+    } else if (item.type === "text/plain") {
+      const text = e.clipboardData.getData("Text");
+      quill.insertText(range.index, text);
     }
+  }
+};
+
+useEffect(() => {
+  const quill = quillRef.current.getEditor();
+  quill.root.addEventListener("paste", handlePaste);
+  return () => {
+    quill.root.removeEventListener("paste", handlePaste);
   };
+}, []);
 
-  useEffect(() => {
-    const quill = quillRef.current.getEditor();
-    quill.root.addEventListener("paste", handlePaste);
-    return () => {
-      quill.root.removeEventListener("paste", handlePaste);
-    };
-  }, []);
   const handleSubmit = () => {
     if (postTitle && postContent && selectedCommunity) {
       onSubmit({

diff --git a/frontend/src/components/chatroomui/chatroom.jsx b/frontend/src/components/chatroomui/chatroom.jsx
@@ -5,6 +5,7 @@ import axios from "axios";
 import { Navigate } from "react-router-dom";
 import { useUser } from "../../hook/useUser";
 import { WEBSOCKET_URL } from "../../config";
+import {useToast} from "@chakra-ui/react";
 
 const Chatroom = () => {
   const userId = localStorage.getItem("userId");
@@ -19,6 +20,7 @@ const Chatroom = () => {
   const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket(
     WEBSOCKET_URL
   );
+  const toast = useToast();
 
   useEffect(() => {
     const fetchChatHistory = async () => {
@@ -84,6 +86,19 @@ const Chatroom = () => {
     }
   }, [allMsg]);
 
+  useEffect(() => {
+    if (readyState === ReadyState.CLOSED) {
+      toast({
+        title: "Connection Lost",
+        description: "WebSocket connection has been closed. Please refresh the page.",
+        status: "error",
+        duration: null,
+        isClosable: true,
+      });
+      // alert("WebSocket connection has been closed. Please refresh the page.");
+    }
+  }, [readyState, toast]);
+
   if (loadingUser) {
     return <div>Loading...</div>;
   }