60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import { useEffect, useState } from 'react';
|
|
// Import ReactQuill dynamically to avoid SSR issues
|
|
const ReactQuill = dynamic(() => import('react-quill-new'), {
|
|
ssr: false,
|
|
loading: () => <div className="border border-gray-300 h-64 flex items-center justify-center">Loading editor...</div>
|
|
});
|
|
|
|
// Import styles
|
|
import 'react-quill-new/dist/quill.snow.css';
|
|
//import 'react-quill/dist/quill.snow.css';
|
|
|
|
interface QuillEditorProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
}
|
|
|
|
// Create a client-side only component
|
|
const QuillEditor = ({ value, onChange, placeholder }: QuillEditorProps) => {
|
|
// Use state to track if component is mounted (client-side)
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
// Only render the editor on the client
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
// Default toolbar options
|
|
const modules = {
|
|
toolbar: [
|
|
[{ 'header': [1, 2, 3, false] }],
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
|
['link'],
|
|
['clean']
|
|
]
|
|
};
|
|
|
|
if (!mounted) {
|
|
return <div className="border border-gray-300 h-64 flex items-center justify-center">Loading editor...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="quill-wrapper">
|
|
<ReactQuill
|
|
value={value}
|
|
onChange={onChange}
|
|
modules={modules}
|
|
placeholder={placeholder}
|
|
theme="snow"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QuillEditor;
|