diff --git a/frontend/src/components/CreatePosts.jsx b/frontend/src/components/CreatePosts.jsx index 945d25d..43d589c 100644 --- 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 index 7f937ae..a3f72b5 100644 --- 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
Loading...
; }