generated from muhtadeetaron/nextjs-template
88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
// components/RichTextEditor.tsx
|
|
import { useEditor, EditorContent, Editor } from "@tiptap/react";
|
|
import StarterKit from "@tiptap/starter-kit";
|
|
import Heading from "@tiptap/extension-heading";
|
|
import Color from "@tiptap/extension-color";
|
|
import TextStyle from "@tiptap/extension-text-style";
|
|
import {
|
|
Bold,
|
|
Italic,
|
|
Strikethrough,
|
|
Heading1,
|
|
Heading2,
|
|
Heading3,
|
|
} from "lucide-react";
|
|
|
|
import { Toggle } from "@/components/ui/toggle";
|
|
|
|
const MenuBar: React.FC<{ editor: Editor | null }> = ({ editor }) => {
|
|
if (!editor) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="toolbar pb-3 flex gap-2">
|
|
<Toggle onClick={() => editor.chain().focus().toggleBold().run()}>
|
|
<Bold className="h-4 w-4" />
|
|
</Toggle>
|
|
<Toggle
|
|
onClick={() => editor.chain().focus().toggleItalic().run()}
|
|
className={editor.isActive("italic") ? "is-active" : ""}
|
|
>
|
|
<Italic className="h-4 w-4" />
|
|
</Toggle>
|
|
<Toggle
|
|
onClick={() => editor.chain().focus().toggleStrike().run()}
|
|
className={editor.isActive("strike") ? "is-active" : ""}
|
|
>
|
|
<Strikethrough className="h-4 w-4" />
|
|
</Toggle>
|
|
{/* Heading Toggles */}
|
|
<Toggle
|
|
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
|
className={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
|
|
>
|
|
<Heading1 className="h-4 w-4" />
|
|
</Toggle>
|
|
<Toggle
|
|
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
|
className={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
|
|
>
|
|
<Heading2 className="h-4 w-4" />
|
|
</Toggle>
|
|
<Toggle
|
|
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
|
className={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
|
|
>
|
|
<Heading3 className="h-4 w-4" />
|
|
</Toggle>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const RichTextEditor: React.FC = () => {
|
|
const editor = useEditor({
|
|
extensions: [
|
|
StarterKit,
|
|
Heading.configure({
|
|
levels: [1, 2, 3],
|
|
}),
|
|
Color,
|
|
TextStyle,
|
|
],
|
|
content: "<p>Write your email here...</p>",
|
|
});
|
|
|
|
return (
|
|
<div className="">
|
|
<MenuBar editor={editor} />
|
|
<EditorContent
|
|
className="flex-1 overflow-y-auto overflow-x-auto h-[70vh]"
|
|
editor={editor}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RichTextEditor;
|