Editors

src/components/items/commissions/tos/TosEditor.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import { cn } from "@/lib/utils"
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { Bold, Italic, Strikethrough } from "lucide-react"
+
+export default function TosEditor() {
+  const editor = useEditor({
+    extensions: [StarterKit],
+    editorProps: {
+      attributes: {
+        class: 'prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
+      },
+    },
+    content: '<p>Hello World! 🌎️</p>',
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML())
+    },
+  })
+
+  if (!editor) return null
+
+  return (
+    <div className="space-y-4">
+      <ToggleGroup type="multiple" className="flex gap-1">
+        <ToggleGroupItem onClick={() => editor.chain().focus().toggleBold().run()} pressed={editor.isActive("bold")}>
+          <Bold className="h-4 w-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem onClick={() => editor.chain().focus().toggleItalic().run()} pressed={editor.isActive("italic")}>
+          <Italic className="h-4 w-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem onClick={() => editor.chain().focus().toggleStrike().run()} pressed={editor.isActive("strike")}>
+          <Strikethrough className="h-4 w-4" />
+        </ToggleGroupItem>
+      </ToggleGroup>
+
+      <div className={cn("border rounded-md p-4 min-h-[200px]", "bg-background text-foreground")}>
+        <EditorContent editor={editor} />
+      </div>
+    </div>
+  )
+}