From 96d1fd648feba095f24d6461dc146217e70f8775 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 20 May 2025 18:10:52 +0530
Subject: [PATCH] created separated editor component for customize react-quill

---
 src/components/common/TextEditor/Editor.jsx | 91 +++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/components/common/TextEditor/Editor.jsx

diff --git a/src/components/common/TextEditor/Editor.jsx b/src/components/common/TextEditor/Editor.jsx
new file mode 100644
index 00000000..d23b22f3
--- /dev/null
+++ b/src/components/common/TextEditor/Editor.jsx
@@ -0,0 +1,91 @@
+import React, { useRef } from "react";
+import ReactQuill from "react-quill";
+import "quill/dist/quill.snow.css";
+import "./Editor.css";
+
+const Editor = ({
+  value,
+  onChange,
+  onCancel,
+  onSubmit,
+  placeholder = "Start writing...",
+}) => {
+  const modules = {
+    toolbar: {
+      container: "#custom-toolbar",
+    },
+  };
+
+  const formats = [
+    "header",
+    "bold",
+    "italic",
+    "underline",
+    "strike",
+    "list",
+    "bullet",
+    "blockquote",
+    "code-block",
+    "link",
+    "align",
+    "image"
+  ];
+
+  return (
+    <div className="editor-wrapper">
+      <ReactQuill
+        value={value}
+        onChange={onChange}
+        modules={modules}
+        formats={formats}
+        theme="snow"
+        placeholder={placeholder}
+      />
+
+      <div id="custom-toolbar" className="ql-toolbar ql-snow custom-toolbar">
+        <div className="d-flex justify-content-between align-items-center w-100">
+          {/* Left: Quill Format Buttons */}
+          <span className="d-flex">
+            <span className="ql-formats">
+              <select className="ql-header">
+                <option value="1" />
+                <option value="2" />
+                <option selected />
+              </select>
+              <button className="ql-bold" />
+              <button className="ql-italic" />
+              <button className="ql-underline" />
+              <button className="ql-strike" />
+            </span>
+
+            <span className="ql-formats">
+              <button className="ql-list" value="ordered" />
+              <button className="ql-list" value="bullet" />
+              {/* <button className="ql-image" value="file" /> */}
+            </span>
+
+            <span className="ql-formats">
+              <button className="ql-link" />
+            </span>
+          </span>
+
+          {/* Right: Submit + Cancel Buttons */}
+          <div className="d-flex gap-2">
+            <span className="btn btn-xs btn-secondary" onClick={onCancel}>
+              Cancel
+            </span>
+            <span
+              type="submit"
+              className="btn  btn-xs btn-primary"
+              onClick={onSubmit}
+            >
+              Submit
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Editor;