97 lines
2.4 KiB
JavaScript
97 lines
2.4 KiB
JavaScript
import React, { useRef } from "react";
|
|
import ReactQuill from "react-quill";
|
|
import "quill/dist/quill.snow.css";
|
|
import "./Editor.css";
|
|
|
|
const Editor = ({
|
|
value,
|
|
loading,
|
|
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 m-5">
|
|
<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" defaultValue="">
|
|
<option value="1" />
|
|
<option value="2" />
|
|
<option value="" />
|
|
</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>
|
|
</div>
|
|
</div>
|
|
<ReactQuill
|
|
value={value}
|
|
onChange={onChange}
|
|
modules={modules}
|
|
formats={formats}
|
|
theme="snow"
|
|
placeholder={placeholder}
|
|
/>
|
|
{/* Right: Submit + Cancel Buttons */}
|
|
<div className="d-flex justify-content-end gap-2 p-1">
|
|
<span
|
|
className="btn btn-xs btn-secondary"
|
|
aria-disabled={loading}
|
|
onClick={onCancel}
|
|
>
|
|
Cancel
|
|
</span>
|
|
<span
|
|
type="submit"
|
|
className="btn btn-xs btn-primary"
|
|
onClick={onSubmit}
|
|
aria-disabled={loading}
|
|
>
|
|
{loading ? "Please Wait..." : "Submit"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Editor;
|