132 lines
3.6 KiB
TypeScript
132 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import { Editor } from '@tiptap/react'
|
|
import {
|
|
Bold,
|
|
Italic,
|
|
List,
|
|
ListOrdered,
|
|
Quote,
|
|
Heading1,
|
|
Heading2,
|
|
Heading3,
|
|
Minus,
|
|
Link,
|
|
Image,
|
|
} from 'lucide-react'
|
|
import { Toggle } from '@/components/ui/toggle'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface EditorToolbarProps {
|
|
editor: Editor | null
|
|
}
|
|
|
|
export function EditorToolbar({ editor }: EditorToolbarProps) {
|
|
if (!editor) return null
|
|
|
|
return (
|
|
<div className="border-b">
|
|
<div className="flex flex-wrap gap-1 p-1">
|
|
<Toggle
|
|
size="sm"
|
|
pressed={editor.isActive('heading', { level: 1 })}
|
|
onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
|
>
|
|
<Heading1 className="h-4 w-4" />
|
|
</Toggle>
|
|
<Toggle
|
|
size="sm"
|
|
pressed={editor.isActive('heading', { level: 2 })}
|
|
onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
|
>
|
|
<Heading2 className="h-4 w-4" />
|
|
</Toggle>
|
|
<Toggle
|
|
size="sm"
|
|
pressed={editor.isActive('heading', { level: 3 })}
|
|
onPressedChange={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
|
>
|
|
<Heading3 className="h-4 w-4" />
|
|
</Toggle>
|
|
|
|
<Separator orientation="vertical" className="mx-1 h-6" />
|
|
|
|
<Toggle
|
|
size="sm"
|
|
pressed={editor.isActive('bold')}
|
|
onPressedChange={() => editor.chain().focus().toggleBold().run()}
|
|
>
|
|
<Bold className="h-4 w-4" />
|
|
</Toggle>
|
|
<Toggle
|
|
size="sm"
|
|
pressed={editor.isActive('italic')}
|
|
onPressedChange={() => editor.chain().focus().toggleItalic().run()}
|
|
>
|
|
<Italic className="h-4 w-4" />
|
|
</Toggle>
|
|
|
|
<Separator orientation="vertical" className="mx-1 h-6" />
|
|
|
|
<Toggle
|
|
size="sm"
|
|
pressed={editor.isActive('bulletList')}
|
|
onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
|
|
>
|
|
<List className="h-4 w-4" />
|
|
</Toggle>
|
|
<Toggle
|
|
size="sm"
|
|
pressed={editor.isActive('orderedList')}
|
|
onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
|
|
>
|
|
<ListOrdered className="h-4 w-4" />
|
|
</Toggle>
|
|
|
|
<Separator orientation="vertical" className="mx-1 h-6" />
|
|
|
|
<Toggle
|
|
size="sm"
|
|
pressed={editor.isActive('blockquote')}
|
|
onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
|
|
>
|
|
<Quote className="h-4 w-4" />
|
|
</Toggle>
|
|
<Toggle
|
|
size="sm"
|
|
pressed={editor.isActive('horizontalRule')}
|
|
onPressedChange={() => editor.chain().focus().setHorizontalRule().run()}
|
|
>
|
|
<Minus className="h-4 w-4" />
|
|
</Toggle>
|
|
|
|
<Separator orientation="vertical" className="mx-1 h-6" />
|
|
|
|
<Toggle
|
|
size="sm"
|
|
pressed={editor.isActive('link')}
|
|
onPressedChange={() => {
|
|
const url = window.prompt('URL')
|
|
if (url) {
|
|
editor.chain().focus().setLink({ href: url }).run()
|
|
}
|
|
}}
|
|
>
|
|
<Link className="h-4 w-4" />
|
|
</Toggle>
|
|
<Toggle
|
|
size="sm"
|
|
onPressedChange={() => {
|
|
const url = window.prompt('Image URL')
|
|
if (url) {
|
|
editor.chain().focus().setImage({ src: url }).run()
|
|
}
|
|
}}
|
|
>
|
|
<Image className="h-4 w-4" />
|
|
</Toggle>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|