[feat]: fixed the fetch url button and add rich text editor

.env

@@ -0,0 +1,7 @@
+REACT_APP_API_KEY="AIzaSyD9tMXwqU7ijIKnQu0vsX1UoR9FM_w7r2E"
+REACT_APP_AUTH_DOMAIN="blog-5814a.firebaseapp.com"
+REACT_APP_PROJECT_ID="blog-5814a"
+REACT_APP_STORAGE_BUCKET="blog-5814a.appspot.com"
+REACT_APP_MESSAGE_SENDER_ID="787500061298"
+REACT_APP_APP_ID="1:787500061298:web:242f526d6800f0bbbf68eb"
+GENERATE_SOURCEMAP=false

package.json

@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^13.5.0",
     "boxicons": "^2.1.4",
     "firebase": "^9.15.0",
+    "jodit-react": "^1.3.39",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",

src/pages/Blogpost.js

@@ -10,6 +10,7 @@ const Blogpost = () => {
   const [postLists, setPostList] = useState([]);
   const [post, setPost] = useState();
   const navigate = useNavigate();
+
   useEffect(() => {
     console.log(postId.blogname);
     const getPosts = async () => {
@@ -30,9 +31,11 @@ const Blogpost = () => {
     navigator.clipboard.writeText(`https://blogweet.vercel.app${s}`);
     toast(`Your link has been pasted to your Clipboard. Enjoy!`);
   };
-  // const postInfo = postLists.filter((x) => x.id === postId.blogname)[0];
-  // console.log(Array.of(postInfo)[0]);
-  // const post = Array.of(postInfo)[0];
+
+  const renderPostContent = () => {
+    return { __html: post.postText };
+  };
+
   return (
     <div className="blogpage">
       {post && (
@@ -76,10 +79,10 @@ const Blogpost = () => {
             </div>
           </div>
           <hr />
-          <div className="blogContent">
-            <img src={post.image} alt={post.title} />
-            <p>{post.postText}</p>
-          </div>
+          <div
+            className="blogContent"
+            dangerouslySetInnerHTML={renderPostContent()}
+          ></div>
         </>
       )}
       <ToastContainer

src/pages/CreatePost.css

@@ -0,0 +1,30 @@
+/* CreatePost.css */
+
+.jodit-editor-container {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 8px;
+  }
+
+  .jodit-editor-container .jodit-wysiwyg {
+    font-family: Arial, sans-serif;
+    font-size: 12px;
+    color: #333;
+  }
+
+  .jodit-editor-container .jodit-wysiwyg p {
+    margin: 0;
+  }
+
+  .jodit-editor-container .jodit-wysiwyg ul,
+  .jodit-editor-container .jodit-wysiwyg ol {
+    padding-left: 20px;
+  }
+
+  .jodit-editor-container .jodit-wysiwyg ul li,
+  .jodit-editor-container .jodit-wysiwyg ol li {
+    margin-bottom: 5px;
+  }
+
+  /* Add any additional styles as per your preference */
+

src/pages/CreatePost.js

@@ -1,41 +1,87 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef,useMemo } from "react";
 import { addPostToDb } from "../utils/firebase";
 import { useNavigate } from "react-router-dom";
-import Modal from "./Modal"; // Import the Modal component
+import Modal from "./Modal";
+import "jodit";
+import "jodit/build/jodit.min.css";
+import JoditEditor from "jodit-react";
+import "./CreatePost.css"; // Import your custom CSS file
 
 function CreatePost({ isAuth }) {
   const [title, setTitle] = useState("");
   const [postText, setPostText] = useState("");
-  const [image, setImage] = useState("");
-  const [modalMessage, setModalMessage] = useState(""); // State for the modal message
-  const [showModal, setShowModal] = useState(false); // State to control the modal visibility
+  const [imageUrl, setImageUrl] = useState("");
+  const [uploadedImage, setUploadedImage] = useState("");
+  const [modalMessage, setModalMessage] = useState("");
+  const [showModal, setShowModal] = useState(false);
+  const editorRef = useRef(null);
   let navigate = useNavigate();
 
+  const config = useMemo(
+    () => ({
+        readonly: false, 
+    }),
+    []
+);
+
   const createPost = async () => {
-    if (!title || !postText || !image) {
-      setModalMessage("Please fill all the fields"); // Set the modal message
-      setShowModal(true); // Show the modal
+    if (!title || !postText || (!imageUrl && !uploadedImage)) {
+      setModalMessage("Please fill all the fields");
+      setShowModal(true);
       return;
     }
-    console.log(title, postText, image);
+    console.log(title, postText, imageUrl || uploadedImage);
     if (getWordCount(postText) < 20) {
-      setModalMessage("The post must contain at least 20 words."); // Set the modal message
-      setShowModal(true); // Show the modal
+      setModalMessage("The post must contain at least 20 words.");
+      setShowModal(true);
       return;
     }
-    await addPostToDb(title, postText, image);
+    await addPostToDb(title, postText, imageUrl || uploadedImage);
     navigate("/");
   };
 
   useEffect(() => {
     if (!isAuth) {
       navigate("/login");
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const hanldleImageUpload = (e) => {
-    setImage(e.target.value);
+  const handleImageUpload = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setUploadedImage(reader.result);
+        setImageUrl("");
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleImageUrlChange = (e) => {
+    setUploadedImage("");
+    setImageUrl(e.target.value);
+  };
+
+  const fetchImageUrl = async () => {
+    try {
+      const response = await fetch(imageUrl);
+      if (response.ok) {
+        const blob = await response.blob();
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          setUploadedImage(reader.result);
+        };
+        reader.readAsDataURL(blob);
+      } else {
+        setModalMessage("Failed to fetch the image from the provided URL");
+        setShowModal(true);
+      }
+    } catch (error) {
+      console.error("Error fetching image URL:", error);
+      setModalMessage("Failed to fetch the image from the provided URL");
+      setShowModal(true);
+    }
   };
 
   const getWordCount = (text) => {
@@ -46,35 +92,51 @@ function CreatePost({ isAuth }) {
     setShowModal(false);
   };
 
+  const handleEditorChange = (value) => {
+    setPostText(value);
+  };
+
   return (
     <div className="createPostPage">
       <div className="cpContainer">
         <h1>Create A Post</h1>
-        <div className="inputGp">
-          <label> Title:</label>
+        <div className="inputGp mt">
+          <label>Title:</label>
           <input
             placeholder="Title..."
             value={title}
             onChange={(e) => setTitle(e.target.value)}
           />
         </div>
         <div className="inputGp">
-          <label> Post:</label>
-          <textarea
-            placeholder="Post..."
-            value={postText}
-            onChange={(e) => setPostText(e.target.value)}
-          />
+          <label>Post:</label>
+          <div className="jodit-editor-container">
+            <JoditEditor
+              ref={editorRef}
+              value={postText}
+              onChange={handleEditorChange}
+              config={config}
+            />
+          </div>
         </div>
         <div className="inputImg">
-          <label> Image Link</label>
+          <label>Image Upload:</label>
           <div className="cont">
-            <input placeholder="https://" onChange={hanldleImageUpload} />
-            <img src={image} alt="Uploaded preview" />
+            <input type="file" accept="image/*" onChange={handleImageUpload} />
+            {uploadedImage && <img src={uploadedImage} alt="Uploaded preview" />}
           </div>
         </div>
+        <div className="inputGp">
+          <label>Image URL:</label>
+          <input
+            placeholder="Image URL..."
+            value={imageUrl}
+            onChange={handleImageUrlChange}
+          />
+          {imageUrl && <button onClick={fetchImageUrl}>Fetch Image</button>}
+        </div>
 
-        <button onClick={createPost}> Submit Post </button>
+        <button onClick={createPost}>Submit Post</button>
       </div>
 
       {showModal && <Modal message={modalMessage} closeModal={closeModal} />}

src/pages/Home.js

@@ -170,6 +170,7 @@ function Home({ isAuth }) {
                 </div>
                 <div className="postTextContainer">
                   <div style={{ height: "70px", overflow: "hidden" }}>
+                <div dangerouslySetInnerHTML={{ __html: post.postText }} />
                     {post.postText.substr(
                       0,
                       Math.min(post.postText.length, 200)