52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
"use client";
|
|
import dynamic from "next/dynamic";
|
|
import type React from "react";
|
|
|
|
import "react-quill/dist/quill.snow.css";
|
|
|
|
// Import Quill modules after React Quill is loaded
|
|
if (typeof window !== 'undefined') {
|
|
const Quill = require('quill');
|
|
const QuillImageResize = require('quill-image-resize-module').default;
|
|
Quill.register("modules/imageResize", QuillImageResize);
|
|
}
|
|
|
|
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
|
|
|
|
type RichTextEditorProps = {
|
|
value: string;
|
|
onChange: (html: string) => void;
|
|
placeholder?: string;
|
|
className?: string;
|
|
};
|
|
|
|
export default function RichTextEditor({
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
className,
|
|
}: RichTextEditorProps) {
|
|
return (
|
|
<div className={className}>
|
|
<div className="bb-quill">
|
|
<ReactQuill
|
|
theme="snow"
|
|
value={value}
|
|
onChange={onChange}
|
|
placeholder={placeholder}
|
|
modules={{
|
|
toolbar: [
|
|
[{ header: [1, 2, 3, false] }],
|
|
["bold", "italic", "underline", "strike"],
|
|
[{ color: [] }, { background: [] }],
|
|
[{ list: "ordered" }, { list: "bullet" }],
|
|
["blockquote", "code-block"],
|
|
["link"],
|
|
["clean"],
|
|
],
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |