Initial commit - PromptTech

frontend/src/components/RichTextEditor.js

@@ -0,0 +1,131 @@
+import React from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import {
+  Bold,
+  Italic,
+  List,
+  ListOrdered,
+  Heading2,
+  Quote,
+  Undo,
+  Redo,
+} from "lucide-react";
+import { Button } from "./ui/button";
+
+const MenuBar = ({ editor }) => {
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className="border-b border-border p-2 flex flex-wrap gap-1">
+      <Button
+        type="button"
+        variant={editor.isActive("bold") ? "default" : "outline"}
+        size="sm"
+        onClick={() => editor.chain().focus().toggleBold().run()}
+      >
+        <Bold className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant={editor.isActive("italic") ? "default" : "outline"}
+        size="sm"
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+      >
+        <Italic className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant={
+          editor.isActive("heading", { level: 2 }) ? "default" : "outline"
+        }
+        size="sm"
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+      >
+        <Heading2 className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant={editor.isActive("bulletList") ? "default" : "outline"}
+        size="sm"
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+      >
+        <List className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant={editor.isActive("orderedList") ? "default" : "outline"}
+        size="sm"
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+      >
+        <ListOrdered className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant={editor.isActive("blockquote") ? "default" : "outline"}
+        size="sm"
+        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+      >
+        <Quote className="h-4 w-4" />
+      </Button>
+      <div className="w-px h-6 bg-border mx-1" />
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={() => editor.chain().focus().undo().run()}
+        disabled={!editor.can().undo()}
+      >
+        <Undo className="h-4 w-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={() => editor.chain().focus().redo().run()}
+        disabled={!editor.can().redo()}
+      >
+        <Redo className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};
+
+const RichTextEditor = ({
+  content,
+  onChange,
+  placeholder = "Enter description...",
+}) => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Placeholder.configure({
+        placeholder,
+      }),
+    ],
+    content,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+  });
+
+  return (
+    <div
+      className="border border-border rounded-md overflow-hidden resize-y min-h-[240px] max-h-[600px]"
+      style={{ overflow: "auto" }}
+    >
+      <MenuBar editor={editor} />
+      <div className="overflow-y-auto custom-scrollbar h-full">
+        <EditorContent
+          editor={editor}
+          className="prose prose-sm max-w-none p-4 min-h-[180px] focus:outline-none"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default RichTextEditor;