changed a lot

components/rich-text-editor.tsx

@@ -0,0 +1,101 @@
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { Toggle } from "@/components/ui/toggle"
+import {
+  Bold,
+  Italic,
+  List,
+  ListOrdered,
+  Quote,
+  Heading2,
+  Code,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const MenuBar = ({ editor }: { editor: any }) => {
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <div className="border-b flex flex-wrap gap-1 p-1">
+      <Toggle
+        size="sm"
+        pressed={editor.isActive('bold')}
+        onPressedChange={() => editor.chain().focus().toggleBold().run()}
+      >
+        <Bold className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive('italic')}
+        onPressedChange={() => editor.chain().focus().toggleItalic().run()}
+      >
+        <Italic className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive('heading')}
+        onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+      >
+        <Heading2 className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive('bulletList')}
+        onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
+      >
+        <List className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive('orderedList')}
+        onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
+      >
+        <ListOrdered className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive('blockquote')}
+        onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
+      >
+        <Quote className="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        size="sm"
+        pressed={editor.isActive('code')}
+        onPressedChange={() => editor.chain().focus().toggleCode().run()}
+      >
+        <Code className="h-4 w-4" />
+      </Toggle>
+    </div>
+  )
+}
+
+interface RichTextEditorProps {
+  content?: string
+  onChange?: (content: string) => void
+  className?: string
+}
+
+export function RichTextEditor({ content, onChange, className }: RichTextEditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+    ],
+    content,
+    onUpdate: ({ editor }) => {
+      onChange?.(editor.getHTML())
+    },
+  })
+
+  return (
+    <div className={cn("border rounded-md", className)}>
+      <MenuBar editor={editor} />
+      <EditorContent
+        editor={editor}
+        className="prose prose-sm dark:prose-invert max-w-none p-4"
+      />
+    </div>
+  )
+}