54 lines
1.1 KiB
JavaScript
54 lines
1.1 KiB
JavaScript
// src/components/CommentEditor.jsx
|
|
import React, { useState } from "react";
|
|
import ReactQuill from "react-quill";
|
|
import "react-quill/dist/quill.snow.css"; // Core styling
|
|
import "./CommentEditor.css"; // Custom styles
|
|
|
|
const modules = {
|
|
toolbar: [
|
|
[{ header: [1, 2, false] }],
|
|
["bold", "italic", "underline"],
|
|
[{ list: "ordered" }, { list: "bullet" }],
|
|
["link"],
|
|
["clean"],
|
|
],
|
|
};
|
|
|
|
const formats = [
|
|
"header",
|
|
"bold",
|
|
"italic",
|
|
"underline",
|
|
"list",
|
|
"bullet",
|
|
"link",
|
|
];
|
|
|
|
const CommentEditor = () => {
|
|
const [value, setValue] = useState("");
|
|
|
|
const handleSubmit = () => {
|
|
// Submit or handle content
|
|
};
|
|
|
|
return (
|
|
<div className="comment-editor">
|
|
<ReactQuill
|
|
theme="snow"
|
|
value={value}
|
|
onChange={setValue}
|
|
modules={modules}
|
|
formats={formats}
|
|
placeholder="Add a comment..."
|
|
/>
|
|
<div className="editor-footer">
|
|
<button className="btn btn-sm btn-primary" onClick={handleSubmit}>
|
|
Add Comment
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CommentEditor;
|