1import Image from '@tiptap/extension-image';
2import { EditorContent, useEditor } from '@tiptap/react';
3import StarterKit from '@tiptap/starter-kit';
4import React from 'react';
5import RichEditorToolbar from './rich-editor-toolbar';
6
7const RichEditor = () => {
8 const editor = useEditor({
9 extensions: [StarterKit, Image],
10 content: '<p>Hello World!</p>',
11 editorProps: {
12 attributes: {
13 class: 'prose prose-sm m-5 focus:outline-none dark:prose-invert',
14 },
15 },
16 });
17
18 if (!editor) {
19 return null;
20 }
21
22 return (
23 <div className="rounded-md overflow-hidden border-gray-500 border-2 bg-white dark:bg-gray-800">
24 <RichEditorToolbar editor={editor} />
25 <div className="p-4">
26 <EditorContent editor={editor} />
27 </div>
28 </div>
29 );
30};
31
32export default RichEditor;
