Spaces:
Runtime error
Runtime error
File size: 1,855 Bytes
56b6519 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import './css/quill.snow.css';
import './css/quill-styles.css';
import { Field, Label } from '@headlessui/react';
import ReactQuill from 'react-quill-new';
type RichTextEditorProps = {
label: string;
value: string;
placeholder: string;
onChange: (content: string) => void;
};
const RichText: React.FC<RichTextEditorProps> = ({
label,
value,
placeholder,
onChange,
}) => {
const modules = {
toolbar: [
[{ header: [1, 2, 3, false] }, { font: [] }],
[{ size: [] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[
{ list: 'ordered' },
{ list: 'bullet' },
{ indent: '-1' },
{ indent: '+1' },
],
['link', 'image', 'code-block'],
['clean'],
],
clipboard: {
matchVisual: false,
},
};
return (
<div className="p-4 w-full rounded-md border-0 text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
<Field>
<Label className="block font-medium leading-6 text-gray-300">
{label}
</Label>
<ReactQuill
className="w-full overflow-auto bg-white mt-2 p-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
formats={[
'header',
'font',
'size',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'list',
'indent',
'link',
'image',
'code-block',
]}
modules={modules}
onChange={(value: string) => onChange(value)}
placeholder={placeholder}
theme="snow"
value={value}
/>
</Field>
</div>
);
};
export default RichText;
|