42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { useEditor } from '@tiptap/react';
|
|
import StarterKit from '@tiptap/starter-kit';
|
|
import { RichTextEditor as MantineRichTextEditor } from '@mantine/tiptap';
|
|
|
|
interface RichTextEditorProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
}
|
|
|
|
export function RichTextEditor({
|
|
value,
|
|
onChange,
|
|
}: RichTextEditorProps) {
|
|
const editor = useEditor({
|
|
extensions: [StarterKit],
|
|
content: value,
|
|
immediatelyRender: false,
|
|
onUpdate: ({ editor }) => {
|
|
onChange(editor.getHTML());
|
|
},
|
|
});
|
|
|
|
return (
|
|
<MantineRichTextEditor editor={editor}>
|
|
<MantineRichTextEditor.Toolbar>
|
|
<MantineRichTextEditor.ControlsGroup>
|
|
<MantineRichTextEditor.Bold />
|
|
<MantineRichTextEditor.Italic />
|
|
</MantineRichTextEditor.ControlsGroup>
|
|
<MantineRichTextEditor.ControlsGroup>
|
|
<MantineRichTextEditor.Blockquote />
|
|
<MantineRichTextEditor.Hr />
|
|
<MantineRichTextEditor.BulletList />
|
|
<MantineRichTextEditor.OrderedList />
|
|
</MantineRichTextEditor.ControlsGroup>
|
|
</MantineRichTextEditor.Toolbar>
|
|
|
|
<MantineRichTextEditor.Content h="45vh" />
|
|
</MantineRichTextEditor>
|
|
);
|
|
}
|