Added some security to the quill editor with DOMpurity and fixed the error in the editor (keywords section).

Author: Programming-Sai

package-lock.json

@@ -14,6 +14,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "dompurify": "^3.1.7",
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.19",
     "html-react-parser": "^5.1.18",

package.json

@@ -14,6 +14,7 @@ import {
   faUpload,
 } from "@fortawesome/free-solid-svg-icons";
 import dynamic from "next/dynamic";
+import BASE_PATH from "../../../../base";
 const ImageUploader = dynamic(
   () => import("@/components/imageuploader/ImageUploader"),
   {
@@ -90,14 +91,15 @@ const Editor = () => {
     calculateReadingTime(blogContent)
   );
   const [date, setDate] = useState(getCurrentDate());
-  const [keywords, setKeywords] = useState("");
+  const [keywords, setKeywords] = useState([]);
 
   const handleTitleChange = (event) => {
     const inputTitle = event.target.value;
     setTitle(inputTitle);
   };
 
   const [previewData, setPreviewData] = useLocalStorage("previewData", {
+    // Initialize with existing values from localStorage
     image: "",
     title: "",
     slug: "",
@@ -106,7 +108,7 @@ const Editor = () => {
     readingTime: "",
     date: "",
     draft: true,
-    keywords: [],
+    keywords: [], // Ensure this is initialized properly
     description: "",
     comments: 0,
     views: 0,
@@ -126,7 +128,7 @@ const Editor = () => {
       keywords:
         typeof keywords === "string"
           ? keywords.split(",").map((keyword) => keyword.trim())
-          : [],
+          : keywords,
       description,
       comments: 0,
       views: 0,
@@ -160,7 +162,7 @@ const Editor = () => {
       const handleKeyDown = (e) => {
         if ((e.ctrlKey || e.metaKey) && e.key === "y") {
           e.preventDefault();
-          window.open(`/preview/${slug || "preview"}`, "_blank");
+          window.open(`${BASE_PATH}/preview/${slug || "preview"}`, "_blank");
         }
       };
       window.addEventListener("keydown", handleKeyDown);

src/app/admin/editor/page.jsx

@@ -4,6 +4,7 @@ import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
 import "react-quill/dist/quill.bubble.css";
 import styles from "./editorone.module.css";
+import DOMPurify from "dompurify";
 
 const EditorOne = ({ blogContent, setBlogContent, quillTheme }) => {
   const modules = {
@@ -44,6 +45,12 @@ const EditorOne = ({ blogContent, setBlogContent, quillTheme }) => {
     "video",
   ];
 
+  const handleChange = (content) => {
+    // Sanitize the HTML content
+    const cleanContent = DOMPurify.sanitize(content);
+    setBlogContent(cleanContent);
+  };
+
   useEffect(() => {
     if (typeof document !== "undefined") {
       const adjustBubblePosition = () => {
@@ -59,7 +66,6 @@ const EditorOne = ({ blogContent, setBlogContent, quillTheme }) => {
           tooltip.style.left = `${screenWidth - rect.width - 10}px`; // Adjust for overflow on the right
         }
         if (rect.left < 0) {
-          // tooltip.style.right = `20px`;
           tooltip.style.right = `${screenWidth - rect.width - 10}px`; // Adjust for overflow on the right
         }
 
@@ -85,7 +91,7 @@ const EditorOne = ({ blogContent, setBlogContent, quillTheme }) => {
     <div className={styles.blogContent} key={quillTheme}>
       <ReactQuill
         value={blogContent}
-        onChange={setBlogContent}
+        onChange={handleChange} // Use the new handler
         modules={modules}
         formats={formats}
         theme={quillTheme}