98 lines
2.7 KiB
TypeScript
98 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { Bold, Italic, List, ListOrdered, Redo, Undo, Underline as UnderlineIcon } from "lucide-react"
|
|
import type { Editor } from "@tiptap/react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function RichTextToolbar({ editor, disabled }: { editor: Editor | null; disabled?: boolean }) {
|
|
if (!editor) return null
|
|
return (
|
|
<div className="flex shrink-0 flex-wrap items-center gap-0.5 border-b border-border px-2 py-1.5">
|
|
<ToolbarButton
|
|
disabled={disabled}
|
|
active={editor.isActive("bold")}
|
|
onClick={() => editor.chain().focus().toggleMark("bold").run()}
|
|
label="Gras"
|
|
>
|
|
<Bold className="h-4 w-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
disabled={disabled}
|
|
active={editor.isActive("italic")}
|
|
onClick={() => editor.chain().focus().toggleMark("italic").run()}
|
|
label="Italique"
|
|
>
|
|
<Italic className="h-4 w-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
disabled={disabled}
|
|
active={editor.isActive("underline")}
|
|
onClick={() => editor.chain().focus().toggleUnderline().run()}
|
|
label="Souligné"
|
|
>
|
|
<UnderlineIcon className="h-4 w-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
disabled={disabled}
|
|
active={editor.isActive("bulletList")}
|
|
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
|
label="Liste"
|
|
>
|
|
<List className="h-4 w-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
disabled={disabled}
|
|
active={editor.isActive("orderedList")}
|
|
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
|
label="Liste numérotée"
|
|
>
|
|
<ListOrdered className="h-4 w-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
disabled={disabled || !editor.can().chain().focus().undo().run()}
|
|
onClick={() => editor.chain().focus().undo().run()}
|
|
label="Annuler"
|
|
>
|
|
<Undo className="h-4 w-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
disabled={disabled || !editor.can().chain().focus().redo().run()}
|
|
onClick={() => editor.chain().focus().redo().run()}
|
|
label="Rétablir"
|
|
>
|
|
<Redo className="h-4 w-4" />
|
|
</ToolbarButton>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ToolbarButton({
|
|
children,
|
|
onClick,
|
|
active,
|
|
disabled,
|
|
label,
|
|
}: {
|
|
children: React.ReactNode
|
|
onClick: () => void
|
|
active?: boolean
|
|
disabled?: boolean
|
|
label: string
|
|
}) {
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn("h-8 w-8", active && "bg-accent")}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
aria-label={label}
|
|
title={label}
|
|
>
|
|
{children}
|
|
</Button>
|
|
)
|
|
}
|