107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
|
import { useEditor, EditorContent } from '@tiptap/react'
|
||
|
|
import StarterKit from '@tiptap/starter-kit'
|
||
|
|
|
||
|
|
import {
|
||
|
|
BoldIcon as Bold,
|
||
|
|
ItalicIcon as Italic,
|
||
|
|
UndoIcon as Undo,
|
||
|
|
RedoIcon as Redo,
|
||
|
|
ListIcon as List,
|
||
|
|
ListOrderIcon as ListOrdered,
|
||
|
|
LinkIcon as Link,
|
||
|
|
ImageIcon as Image,
|
||
|
|
CodeIcon as Code,
|
||
|
|
QuoteIcon as Quote,
|
||
|
|
StrikethroughIcon as Strikethrough,
|
||
|
|
UnderlineIcon as Underline,
|
||
|
|
} from '~/components/icons/editor'
|
||
|
|
|
||
|
|
const DefaultTextEditor = () => {
|
||
|
|
const editor = useEditor({
|
||
|
|
extensions: [StarterKit],
|
||
|
|
content:
|
||
|
|
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis lobortis nisl cursus bibendum sit nulla accumsan sodales ornare. At urna viverra non suspendisse neque, lorem. Pretium condimentum pellentesque gravida id etiam sit sed arcu euismod. Rhoncus proin orci duis scelerisque molestie cursus tincidunt aliquam.</p>',
|
||
|
|
})
|
||
|
|
|
||
|
|
if (!editor) {
|
||
|
|
return <p>Loading editor...</p>
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="0 rounded border bg-white">
|
||
|
|
<div className="mb-4 rounded bg-gray-100 p-2">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<button onClick={() => editor.chain().focus().undo().run()}>
|
||
|
|
<Undo />
|
||
|
|
</button>
|
||
|
|
<button onClick={() => editor.chain().focus().redo().run()}>
|
||
|
|
<Redo />
|
||
|
|
</button>
|
||
|
|
<button onClick={() => editor.chain().focus().toggleBold().run()}>
|
||
|
|
<Bold />
|
||
|
|
</button>
|
||
|
|
<button onClick={() => editor.chain().focus().toggleItalic().run()}>
|
||
|
|
<Italic />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
// onClick={() => editor.chain().focus().toggleUnderline().run()}
|
||
|
|
>
|
||
|
|
<Underline />
|
||
|
|
</button>
|
||
|
|
<button onClick={() => editor.chain().focus().toggleStrike().run()}>
|
||
|
|
<Strikethrough />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||
|
|
>
|
||
|
|
<List />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||
|
|
>
|
||
|
|
<ListOrdered />
|
||
|
|
</button>
|
||
|
|
<button onClick={() => editor.chain().focus().toggleCode().run()}>
|
||
|
|
<Code />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
||
|
|
>
|
||
|
|
<Quote />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() =>
|
||
|
|
editor
|
||
|
|
.chain()
|
||
|
|
.focus()
|
||
|
|
// .setLink({ href: prompt('Enter URL') })
|
||
|
|
.run()
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Link />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() =>
|
||
|
|
editor
|
||
|
|
.chain()
|
||
|
|
.focus()
|
||
|
|
// .setImage({ src: prompt('Enter image URL') })
|
||
|
|
.run()
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Image />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="p-5">
|
||
|
|
<EditorContent
|
||
|
|
editor={editor}
|
||
|
|
className="h-[50vh]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default DefaultTextEditor
|