52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
"use client";
|
|
import { useMemo } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import type React from "react";
|
|
|
|
// import "react-quill/dist/quill.snow.css";
|
|
|
|
const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
|
|
|
|
type RichTextEditorProps = {
|
|
value: string;
|
|
onChange: (html: string) => void;
|
|
placeholder?: string;
|
|
className?: string;
|
|
};
|
|
|
|
export default function RichTextEditor({
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
className,
|
|
}: RichTextEditorProps) {
|
|
const modules = useMemo(
|
|
() => ({
|
|
toolbar: [
|
|
[{ header: [1, 2, 3, false] }],
|
|
["bold", "italic", "underline", "strike"],
|
|
[{ color: [] }, { background: [] }],
|
|
[{ list: "ordered" }, { list: "bullet" }],
|
|
["blockquote", "code-block"],
|
|
["link"],
|
|
["clean"],
|
|
],
|
|
}),
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<div className={className}>
|
|
<div className="bb-quill">
|
|
<ReactQuill
|
|
theme="snow"
|
|
value={value}
|
|
onChange={onChange}
|
|
placeholder={placeholder}
|
|
modules={modules}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|