File size: 5,712 Bytes
f62c0b5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { Bold, Italic, List, ListOrdered, Code, Undo, Redo, Sparkles } from "lucide-react";
import { useEffect } from "react";
import { cn } from "../utils/cn";
interface RichTextEditorProps {
content: string;
onChange: (html: string) => void;
placeholder?: string;
variables?: string[];
}
export default function RichTextEditor({
content,
onChange,
variables = ["first_name", "last_name", "company_name", "website", "location"],
}: RichTextEditorProps) {
const editor = useEditor({
extensions: [StarterKit],
content,
editorProps: {
attributes: {
class:
"prose prose-invert max-w-none focus:outline-none min-h-[160px] p-3 text-sm text-zinc-200 leading-relaxed",
},
},
onUpdate: ({ editor }) => {
onChange(editor.getHTML());
},
});
useEffect(() => {
if (editor && content !== editor.getHTML()) {
editor.commands.setContent(content);
}
}, [content, editor]);
if (!editor) return null;
const insertVariable = (variable: string) => {
editor.commands.insertContent(`{{${variable}}}`);
};
return (
<div className="border border-zinc-800 rounded-xl overflow-hidden bg-zinc-950/80 focus-within:border-indigo-500/80 transition-colors">
{/* Toolbar */}
<div className="flex flex-wrap items-center justify-between gap-1 p-2 border-b border-zinc-800/80 bg-zinc-900/60">
<div className="flex items-center gap-1">
<button
type="button"
onClick={() => editor.chain().focus().toggleBold().run()}
className={cn(
"p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors",
editor.isActive("bold") ? "bg-zinc-800 text-indigo-400 font-bold" : ""
)}
title="Bold"
>
<Bold className="w-4 h-4" />
</button>
<button
type="button"
onClick={() => editor.chain().focus().toggleItalic().run()}
className={cn(
"p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors",
editor.isActive("italic") ? "bg-zinc-800 text-indigo-400" : ""
)}
title="Italic"
>
<Italic className="w-4 h-4" />
</button>
<button
type="button"
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={cn(
"p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors",
editor.isActive("bulletList") ? "bg-zinc-800 text-indigo-400" : ""
)}
title="Bullet List"
>
<List className="w-4 h-4" />
</button>
<button
type="button"
onClick={() => editor.chain().focus().toggleOrderedList().run()}
className={cn(
"p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors",
editor.isActive("orderedList") ? "bg-zinc-800 text-indigo-400" : ""
)}
title="Numbered List"
>
<ListOrdered className="w-4 h-4" />
</button>
<button
type="button"
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
className={cn(
"p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 transition-colors",
editor.isActive("codeBlock") ? "bg-zinc-800 text-indigo-400" : ""
)}
title="Code Block"
>
<Code className="w-4 h-4" />
</button>
</div>
<div className="flex items-center gap-1">
<button
type="button"
onClick={() => editor.chain().focus().undo().run()}
disabled={!editor.can().undo()}
className="p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 disabled:opacity-30"
>
<Undo className="w-4 h-4" />
</button>
<button
type="button"
onClick={() => editor.chain().focus().redo().run()}
disabled={!editor.can().redo()}
className="p-1.5 rounded-md hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 disabled:opacity-30"
>
<Redo className="w-4 h-4" />
</button>
</div>
</div>
{/* Variables Bar */}
{variables.length > 0 && (
<div className="px-3 py-1.5 bg-zinc-900/40 border-b border-zinc-800/60 flex items-center gap-2 overflow-x-auto text-xs">
<span className="text-zinc-500 flex items-center gap-1 shrink-0">
<Sparkles className="w-3 h-3 text-indigo-400" /> Insert tag:
</span>
<div className="flex items-center gap-1.5">
{variables.map((v) => (
<button
key={v}
type="button"
onClick={() => insertVariable(v)}
className="px-2 py-0.5 bg-zinc-800/80 hover:bg-indigo-500/20 hover:text-indigo-300 text-zinc-400 rounded text-[11px] font-mono transition-colors border border-zinc-700/60 shrink-0"
>
{{{v}}}
</button>
))}
</div>
</div>
)}
{/* Editor Surface */}
<EditorContent editor={editor} />
</div>
);
}
|