685 lines
16 KiB
TypeScript
685 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import type { Editor } from "@tiptap/react";
|
|
import {
|
|
AlignCenter,
|
|
AlignJustifyIcon,
|
|
AlignLeft,
|
|
AlignRight,
|
|
Bold,
|
|
Heading1,
|
|
Heading2,
|
|
Heading3,
|
|
ImageIcon,
|
|
Italic,
|
|
LinkIcon,
|
|
List,
|
|
ListOrdered,
|
|
Minus,
|
|
Pilcrow,
|
|
Quote,
|
|
Strikethrough,
|
|
Underline,
|
|
X,
|
|
} from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Level } from "@tiptap/extension-heading";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { useState } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
|
|
import { SizeOption } from "./extensions/marks";
|
|
|
|
interface EditorMenuProps {
|
|
editor: Editor | null;
|
|
}
|
|
|
|
const sizeOptions: SizeOption[] = ["xs", "sm", "base", "lg", "xl"];
|
|
const tailwindColors = [
|
|
{ value: "default", label: "Default" }, // Changed from '' to "default"
|
|
{ value: "gray-500", label: "Gray" },
|
|
{ value: "red-500", label: "Red" },
|
|
{ value: "yellow-500", label: "Yellow" },
|
|
{ value: "green-500", label: "Green" },
|
|
{ value: "blue-500", label: "Blue" },
|
|
{ value: "indigo-500", label: "Indigo" },
|
|
{ value: "purple-500", label: "Purple" },
|
|
{ value: "pink-500", label: "Pink" },
|
|
];
|
|
|
|
export function EditorMenu({ editor }: EditorMenuProps) {
|
|
if (!editor) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<TooltipProvider delayDuration={0}>
|
|
<div className="flex flex-wrap gap-2 rounded-t-lg border bg-background p-1">
|
|
<div className="flex flex-wrap gap-2">
|
|
{/* Existing formatting toggles */}
|
|
<ToggleGroup
|
|
type="multiple"
|
|
size="sm"
|
|
className="flex flex-wrap gap-1"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="bold"
|
|
aria-label="Toggle bold"
|
|
aria-selected={editor.isActive("bold")}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.toggleBold()
|
|
.run()
|
|
}
|
|
>
|
|
<Bold className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Bold</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="italic"
|
|
aria-label="Toggle italic"
|
|
aria-selected={editor.isActive("italic")}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.toggleItalic()
|
|
.run()
|
|
}
|
|
>
|
|
<Italic className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Italic</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="underline"
|
|
aria-label="Toggle underline"
|
|
aria-selected={editor.isActive("underline")}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.toggleUnderline()
|
|
.run()
|
|
}
|
|
>
|
|
<Underline className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Underline</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="strike"
|
|
aria-label="Toggle strikethrough"
|
|
aria-selected={editor.isActive("strike")}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.toggleStrike()
|
|
.run()
|
|
}
|
|
>
|
|
<Strikethrough className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Strikethrough</TooltipContent>
|
|
</Tooltip>
|
|
</ToggleGroup>
|
|
|
|
<Separator orientation="vertical" className="h-8" />
|
|
|
|
{/* Font Size Selector */}
|
|
<Select
|
|
value={
|
|
editor.isActive("fontSize")
|
|
? editor.getAttributes("fontSize").size ||
|
|
"base"
|
|
: "base"
|
|
}
|
|
onValueChange={(value: SizeOption) => {
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.setFontSize({ size: value })
|
|
.run();
|
|
}}
|
|
>
|
|
<SelectTrigger className="h-8 w-[100px]">
|
|
<SelectValue placeholder="Size" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
{sizeOptions.map((size) => (
|
|
<SelectItem key={size} value={size}>
|
|
{size.toUpperCase()}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{/* Text Color Selector */}
|
|
{/*<Select
|
|
value={
|
|
editor.isActive("textColor")
|
|
? editor.getAttributes("textColor").color ||
|
|
"default"
|
|
: "default"
|
|
}
|
|
onValueChange={(value) => {
|
|
if (value === "default") {
|
|
editor.chain().focus().unsetTextColor().run();
|
|
} else {
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.setTextColor({ color: value })
|
|
.run();
|
|
}
|
|
}}
|
|
>
|
|
<SelectTrigger className="h-8 w-[100px]">
|
|
<SelectValue placeholder="Color" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
{tailwindColors.map(({ value, label }) => (
|
|
<SelectItem key={value} value={value}>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`h-3 w-3 rounded-full ${value === "default" ? "bg-gray-200" : `bg-${value}`}`}
|
|
/>
|
|
{label}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select> */}
|
|
|
|
<Separator orientation="vertical" className="h-8" />
|
|
|
|
{/* Heading Selector */}
|
|
<Select
|
|
value={getActiveHeading(editor)}
|
|
onValueChange={(value) => {
|
|
if (value === "paragraph") {
|
|
editor.chain().focus().setParagraph().run();
|
|
} else {
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.toggleHeading({
|
|
level: Number.parseInt(value) as Level,
|
|
})
|
|
.run();
|
|
}
|
|
}}
|
|
>
|
|
<SelectTrigger className="h-8 w-[130px]">
|
|
<SelectValue placeholder="Paragraph" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="paragraph">
|
|
<div className="flex items-center gap-2">
|
|
<Pilcrow className="h-4 w-4" />
|
|
<span>Paragraph</span>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="1">
|
|
<div className="flex items-center gap-2">
|
|
<Heading1 className="h-4 w-4" />
|
|
<span>Heading 1</span>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="2">
|
|
<div className="flex items-center gap-2">
|
|
<Heading2 className="h-4 w-4" />
|
|
<span>Heading 2</span>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="3">
|
|
<div className="flex items-center gap-2">
|
|
<Heading3 className="h-4 w-4" />
|
|
<span>Heading 3</span>
|
|
</div>
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Separator orientation="vertical" className="h-8" />
|
|
|
|
{/* Alignment Controls */}
|
|
<ToggleGroup
|
|
type="single"
|
|
size="sm"
|
|
className="flex flex-wrap gap-1"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="left"
|
|
aria-label="Align left"
|
|
aria-selected={editor.isActive({
|
|
textAlign: "left",
|
|
})}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.setTextAlign("left")
|
|
.run()
|
|
}
|
|
>
|
|
<AlignLeft className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Align left</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="center"
|
|
aria-label="Align center"
|
|
aria-selected={editor.isActive({
|
|
textAlign: "center",
|
|
})}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.setTextAlign("center")
|
|
.run()
|
|
}
|
|
>
|
|
<AlignCenter className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Align center</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="right"
|
|
aria-label="Align right"
|
|
aria-selected={editor.isActive({
|
|
textAlign: "right",
|
|
})}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.setTextAlign("right")
|
|
.run()
|
|
}
|
|
>
|
|
<AlignRight className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Align right</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="justify"
|
|
aria-label="Justify"
|
|
aria-selected={editor.isActive({
|
|
textAlign: "justify",
|
|
})}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.setTextAlign("justify")
|
|
.run()
|
|
}
|
|
>
|
|
<AlignJustifyIcon className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Align justify</TooltipContent>
|
|
</Tooltip>
|
|
</ToggleGroup>
|
|
|
|
<Separator orientation="vertical" className="h-8" />
|
|
|
|
{/* List and Blockquote Controls */}
|
|
<ToggleGroup
|
|
type="multiple"
|
|
size="sm"
|
|
className="flex flex-wrap gap-1"
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="bulletList"
|
|
aria-label="Toggle bullet list"
|
|
aria-selected={editor.isActive(
|
|
"bulletList",
|
|
)}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.toggleBulletList()
|
|
.run()
|
|
}
|
|
>
|
|
<List className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Bullet list</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="orderedList"
|
|
aria-label="Toggle ordered list"
|
|
aria-selected={editor.isActive(
|
|
"orderedList",
|
|
)}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.toggleOrderedList()
|
|
.run()
|
|
}
|
|
>
|
|
<ListOrdered className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Ordered list</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ToggleGroupItem
|
|
value="blockquote"
|
|
aria-label="Toggle blockquote"
|
|
aria-selected={editor.isActive(
|
|
"blockquote",
|
|
)}
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.toggleBlockquote()
|
|
.run()
|
|
}
|
|
>
|
|
<Quote className="h-4 w-4" />
|
|
</ToggleGroupItem>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Blockquote</TooltipContent>
|
|
</Tooltip>
|
|
</ToggleGroup>
|
|
|
|
<Separator orientation="vertical" className="h-8" />
|
|
|
|
{/* Additional Controls */}
|
|
<div className="flex gap-1">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.setHorizontalRule()
|
|
.run()
|
|
}
|
|
>
|
|
<Minus className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Horizontal rule</TooltipContent>
|
|
</Tooltip>
|
|
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() =>
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.clearNodes()
|
|
.unsetAllMarks()
|
|
.run()
|
|
}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Clear formatting</TooltipContent>
|
|
</Tooltip>
|
|
<Separator orientation="vertical" className="h-8" />
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<LinkPopover editor={editor} />
|
|
</TooltipTrigger>
|
|
<TooltipContent>Add link</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ImageDialog editor={editor} />
|
|
</TooltipTrigger>
|
|
<TooltipContent>Add image</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TooltipProvider>
|
|
);
|
|
}
|
|
|
|
// Rest of the components remain unchanged
|
|
function getActiveHeading(editor: Editor) {
|
|
if (editor.isActive("heading", { level: 1 })) return "1";
|
|
if (editor.isActive("heading", { level: 2 })) return "2";
|
|
if (editor.isActive("heading", { level: 3 })) return "3";
|
|
return "paragraph";
|
|
}
|
|
|
|
const LinkPopover: React.FC<{ editor: Editor }> = ({ editor }) => {
|
|
const [linkUrl, setLinkUrl] = useState("");
|
|
const [linkNewTab, setLinkNewTab] = useState(false);
|
|
const [isLinkOpen, setIsLinkOpen] = useState(false);
|
|
|
|
const setLink = () => {
|
|
if (linkUrl) {
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.setLink({
|
|
href: linkUrl,
|
|
target: linkNewTab ? "_blank" : null,
|
|
})
|
|
.run();
|
|
} else {
|
|
editor.chain().focus().unsetLink().run();
|
|
}
|
|
setIsLinkOpen(false);
|
|
setLinkUrl("");
|
|
setLinkNewTab(false);
|
|
};
|
|
return (
|
|
<Popover open={isLinkOpen} onOpenChange={setIsLinkOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className={editor.isActive("link") ? "bg-accent" : ""}
|
|
>
|
|
<LinkIcon className="h-4 w-4" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-80">
|
|
<div className="grid gap-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="link">Link URL</Label>
|
|
<Input
|
|
id="link"
|
|
value={linkUrl}
|
|
onChange={(e) => setLinkUrl(e.target.value)}
|
|
placeholder="https://example.com"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<Switch
|
|
id="new-tab"
|
|
checked={linkNewTab}
|
|
onCheckedChange={setLinkNewTab}
|
|
/>
|
|
<Label htmlFor="new-tab">Open in new tab</Label>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button onClick={setLink} className="flex-1">
|
|
Save
|
|
</Button>
|
|
{editor.isActive("link") && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
editor.chain().focus().unsetLink().run();
|
|
setIsLinkOpen(false);
|
|
}}
|
|
>
|
|
Remove
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
const ImageDialog: React.FC<{ editor: Editor }> = ({ editor }) => {
|
|
const [isImageOpen, setIsImageOpen] = useState(false);
|
|
const [imageUrl, setImageUrl] = useState("");
|
|
const [imageAlt, setImageAlt] = useState("");
|
|
|
|
const addImage = () => {
|
|
if (imageUrl) {
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.setImage({
|
|
src: imageUrl,
|
|
alt: imageAlt,
|
|
})
|
|
.run();
|
|
}
|
|
setIsImageOpen(false);
|
|
setImageUrl("");
|
|
setImageAlt("");
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isImageOpen} onOpenChange={setIsImageOpen}>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setIsImageOpen(true)}
|
|
>
|
|
<ImageIcon className="h-4 w-4" />
|
|
</Button>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Add image</DialogTitle>
|
|
<DialogDescription>
|
|
Insert an image by providing its URL and alt text.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="image-url">Image URL</Label>
|
|
<Input
|
|
id="image-url"
|
|
value={imageUrl}
|
|
onChange={(e) => setImageUrl(e.target.value)}
|
|
placeholder="https://example.com/image.jpg"
|
|
/>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="image-alt">Alt text</Label>
|
|
<Input
|
|
id="image-alt"
|
|
value={imageAlt}
|
|
onChange={(e) => setImageAlt(e.target.value)}
|
|
placeholder="Description of the image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setIsImageOpen(false)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={addImage}>Add image</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|