344 lines
9.8 KiB
TypeScript
344 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useCallback } from "react";
|
|
import { useEditor, EditorContent } from "@tiptap/react";
|
|
import StarterKit from "@tiptap/starter-kit";
|
|
import Underline from "@tiptap/extension-underline";
|
|
import Link from "@tiptap/extension-link";
|
|
import TextAlign from "@tiptap/extension-text-align";
|
|
import { TextStyle } from "@tiptap/extension-text-style";
|
|
import Color from "@tiptap/extension-color";
|
|
import { ResizableImage } from "@/components/email/resizable-image";
|
|
import Placeholder from "@tiptap/extension-placeholder";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
Bold,
|
|
Italic,
|
|
Underline as UnderlineIcon,
|
|
Strikethrough,
|
|
List,
|
|
ListOrdered,
|
|
AlignLeft,
|
|
AlignCenter,
|
|
AlignRight,
|
|
Link as LinkIcon,
|
|
Undo,
|
|
Redo,
|
|
Quote,
|
|
Code,
|
|
RemoveFormatting,
|
|
Heading1,
|
|
Heading2,
|
|
} from "lucide-react";
|
|
|
|
export interface InlineImageUpload {
|
|
src: string;
|
|
cid?: string;
|
|
}
|
|
|
|
interface RichTextEditorProps {
|
|
content: string;
|
|
onChange: (html: string) => void;
|
|
onImageUpload?: (file: File) => Promise<InlineImageUpload | null>;
|
|
placeholder?: string;
|
|
className?: string;
|
|
hasError?: boolean;
|
|
}
|
|
|
|
function ToolbarButton({
|
|
active,
|
|
onClick,
|
|
children,
|
|
title,
|
|
disabled,
|
|
}: {
|
|
active?: boolean;
|
|
onClick: () => void;
|
|
children: React.ReactNode;
|
|
title: string;
|
|
disabled?: boolean;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
title={title}
|
|
className={cn(
|
|
"p-1.5 rounded hover:bg-accent transition-colors",
|
|
active && "bg-accent text-accent-foreground",
|
|
disabled && "opacity-40 cursor-not-allowed"
|
|
)}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function ToolbarSeparator() {
|
|
return <div className="w-px h-5 bg-border mx-0.5" />;
|
|
}
|
|
|
|
export function RichTextEditor({
|
|
content,
|
|
onChange,
|
|
onImageUpload,
|
|
placeholder,
|
|
className,
|
|
hasError,
|
|
}: RichTextEditorProps) {
|
|
const onImageUploadRef = React.useRef(onImageUpload);
|
|
onImageUploadRef.current = onImageUpload;
|
|
|
|
const editor = useEditor({
|
|
extensions: [
|
|
StarterKit.configure({
|
|
heading: { levels: [1, 2] },
|
|
}),
|
|
Underline,
|
|
Link.configure({
|
|
openOnClick: false,
|
|
HTMLAttributes: { rel: "noopener noreferrer nofollow" },
|
|
}),
|
|
TextAlign.configure({
|
|
types: ["heading", "paragraph"],
|
|
}),
|
|
TextStyle,
|
|
Color,
|
|
ResizableImage,
|
|
Placeholder.configure({
|
|
placeholder,
|
|
}),
|
|
],
|
|
content,
|
|
editorProps: {
|
|
attributes: {
|
|
class: "tiptap min-h-[100px] px-4 py-3 text-sm text-foreground",
|
|
},
|
|
handleDrop: (view, event) => {
|
|
const upload = onImageUploadRef.current;
|
|
if (!upload || !event.dataTransfer?.files?.length) return false;
|
|
const imageFiles = Array.from(event.dataTransfer.files).filter(f =>
|
|
f.type.startsWith("image/")
|
|
);
|
|
if (imageFiles.length === 0) return false;
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
for (const file of imageFiles) {
|
|
upload(file).then((result) => {
|
|
if (result) {
|
|
const { state } = view;
|
|
const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
|
|
const node = state.schema.nodes.image.create({ src: result.src, alt: file.name, cid: result.cid });
|
|
const tr = state.tr.insert(pos?.pos ?? state.selection.anchor, node);
|
|
view.dispatch(tr);
|
|
}
|
|
});
|
|
}
|
|
return true;
|
|
},
|
|
handlePaste: (view, event) => {
|
|
const upload = onImageUploadRef.current;
|
|
if (!upload || !event.clipboardData?.files?.length) return false;
|
|
const imageFiles = Array.from(event.clipboardData.files).filter(f =>
|
|
f.type.startsWith("image/")
|
|
);
|
|
if (imageFiles.length === 0) return false;
|
|
event.preventDefault();
|
|
for (const file of imageFiles) {
|
|
upload(file).then((result) => {
|
|
if (result) {
|
|
const { state } = view;
|
|
const node = state.schema.nodes.image.create({ src: result.src, alt: file.name, cid: result.cid });
|
|
const tr = state.tr.replaceSelectionWith(node);
|
|
view.dispatch(tr);
|
|
}
|
|
});
|
|
}
|
|
return true;
|
|
},
|
|
},
|
|
onUpdate: ({ editor }) => {
|
|
onChange(editor.getHTML());
|
|
},
|
|
immediatelyRender: false,
|
|
});
|
|
|
|
// Sync external content changes (e.g. template application)
|
|
useEffect(() => {
|
|
if (editor && content !== editor.getHTML()) {
|
|
editor.commands.setContent(content, { emitUpdate: false });
|
|
}
|
|
}, [content, editor]);
|
|
|
|
const addLink = useCallback(() => {
|
|
if (!editor) return;
|
|
const previousUrl = editor.getAttributes("link").href;
|
|
const url = window.prompt("URL", previousUrl);
|
|
if (url === null) return;
|
|
if (url === "") {
|
|
editor.chain().focus().extendMarkRange("link").unsetLink().run();
|
|
return;
|
|
}
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.extendMarkRange("link")
|
|
.setLink({ href: url })
|
|
.run();
|
|
}, [editor]);
|
|
|
|
if (!editor) {
|
|
return (
|
|
<div className={cn("min-h-[100px]", className)} />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn("flex flex-col", hasError && "ring-2 ring-red-500 dark:ring-red-400 rounded", className)}>
|
|
{/* Toolbar */}
|
|
<div className="flex flex-wrap items-center gap-0.5 px-3 py-1.5 border-b border-border/50 bg-muted/30">
|
|
<ToolbarButton
|
|
active={editor.isActive("bold")}
|
|
onClick={() => editor.chain().focus().toggleBold().run()}
|
|
title="Bold"
|
|
>
|
|
<Bold className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
active={editor.isActive("italic")}
|
|
onClick={() => editor.chain().focus().toggleItalic().run()}
|
|
title="Italic"
|
|
>
|
|
<Italic className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
active={editor.isActive("underline")}
|
|
onClick={() => editor.chain().focus().toggleUnderline().run()}
|
|
title="Underline"
|
|
>
|
|
<UnderlineIcon className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
active={editor.isActive("strike")}
|
|
onClick={() => editor.chain().focus().toggleStrike().run()}
|
|
title="Strikethrough"
|
|
>
|
|
<Strikethrough className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarSeparator />
|
|
|
|
<ToolbarButton
|
|
active={editor.isActive("heading", { level: 1 })}
|
|
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
|
title="Heading 1"
|
|
>
|
|
<Heading1 className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
active={editor.isActive("heading", { level: 2 })}
|
|
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
|
title="Heading 2"
|
|
>
|
|
<Heading2 className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarSeparator />
|
|
|
|
<ToolbarButton
|
|
active={editor.isActive("bulletList")}
|
|
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
|
title="Bullet List"
|
|
>
|
|
<List className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
active={editor.isActive("orderedList")}
|
|
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
|
title="Ordered List"
|
|
>
|
|
<ListOrdered className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
active={editor.isActive("blockquote")}
|
|
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
|
title="Quote"
|
|
>
|
|
<Quote className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
active={editor.isActive("codeBlock")}
|
|
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
|
title="Code Block"
|
|
>
|
|
<Code className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarSeparator />
|
|
|
|
<ToolbarButton
|
|
active={editor.isActive({ textAlign: "left" })}
|
|
onClick={() => editor.chain().focus().setTextAlign("left").run()}
|
|
title="Align Left"
|
|
>
|
|
<AlignLeft className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
active={editor.isActive({ textAlign: "center" })}
|
|
onClick={() => editor.chain().focus().setTextAlign("center").run()}
|
|
title="Align Center"
|
|
>
|
|
<AlignCenter className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
active={editor.isActive({ textAlign: "right" })}
|
|
onClick={() => editor.chain().focus().setTextAlign("right").run()}
|
|
title="Align Right"
|
|
>
|
|
<AlignRight className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarSeparator />
|
|
|
|
<ToolbarButton
|
|
active={editor.isActive("link")}
|
|
onClick={addLink}
|
|
title="Link"
|
|
>
|
|
<LinkIcon className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarSeparator />
|
|
|
|
<ToolbarButton
|
|
onClick={() => editor.chain().focus().clearNodes().unsetAllMarks().run()}
|
|
title="Clear Formatting"
|
|
>
|
|
<RemoveFormatting className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
|
|
<ToolbarSeparator />
|
|
|
|
<ToolbarButton
|
|
onClick={() => editor.chain().focus().undo().run()}
|
|
disabled={!editor.can().undo()}
|
|
title="Undo"
|
|
>
|
|
<Undo className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
onClick={() => editor.chain().focus().redo().run()}
|
|
disabled={!editor.can().redo()}
|
|
title="Redo"
|
|
>
|
|
<Redo className="w-4 h-4" />
|
|
</ToolbarButton>
|
|
</div>
|
|
|
|
{/* Editor */}
|
|
<EditorContent editor={editor} />
|
|
</div>
|
|
);
|
|
}
|