Feat/#264 editor component

apps/core/app/test/page.tsx

@@ -1,11 +1,19 @@
 "use client";
 
-import React from "react";
-import { FileFormatField } from "../dashboard/products/create/_components/file-formate-field";
-import { FileFormatSection } from "../dashboard/products/create/_components/file-formate-section";
+import { RichTextEditor } from "@repo/ui/components/editor/editor";
 
 const Page = () => {
-  return <FileFormatSection />;
+  return (
+    <div className="p-5">
+      <RichTextEditor
+        onChange={(html, text) => console.log(html, text)}
+        defaultValue="hello"
+        value="salam"
+        label="badry"
+        helperText="ali"
+      />
+    </div>
+  );
 };
 
 export default Page;

apps/storybook/src/stories/editor.stories.tsx

@@ -0,0 +1,47 @@
+import { RichTextEditor } from "@repo/ui/components/editor/editor";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof RichTextEditor> = {
+  title: "Components/RichTextEditor",
+  component: RichTextEditor,
+  tags: ["autodocs"],
+  argTypes: {
+    value: { control: "text" },
+    defaultValue: { control: "text" },
+    onChange: { action: "onChange" },
+    className: { control: "text" },
+    label: { control: "text" },
+    helperText: { control: "text" },
+    error: { control: "text" },
+    id: { control: "text" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Rich Text Editor",
+    helperText: "You can enter rich text here.",
+    defaultValue: "<p>Initial content</p>",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Rich Text Editor",
+    helperText: "This editor has an error.",
+    defaultValue: "<p>Initial content with error</p>",
+    error: "This is an error message.",
+  },
+};
+
+export const CustomClass: Story = {
+  args: {
+    label: "Rich Text Editor",
+    helperText: "This editor has a custom class.",
+    defaultValue: "<p>Initial content with custom class</p>",
+    className: "custom-editor-class",
+  },
+};

package.json

@@ -1,8 +1,19 @@
 {
   "name": "turborepo-shadcn-ui",
   "version": "1.3.0",
-  "private": true,
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "husky": "^9.1.7",
+    "prettier": "^3.3.2",
+    "turbo": "2.0.6"
+  },
+  "engines": {
+    "node": ">=18"
+  },
   "license": "MIT",
+  "packageManager": "[email protected]",
+  "private": true,
   "scripts": {
     "build": "turbo build",
     "type-checks": "turbo build check-types",
@@ -17,17 +28,6 @@
     "deploy": "git pull origin main && git push vercel main",
     "rebase:main": "git fetch origin main && git rebase main"
   },
-  "devDependencies": {
-    "@repo/eslint-config": "*",
-    "@repo/typescript-config": "*",
-    "husky": "^9.1.7",
-    "prettier": "^3.3.2",
-    "turbo": "2.0.6"
-  },
-  "packageManager": "[email protected]",
-  "engines": {
-    "node": ">=18"
-  },
   "workspaces": [
     "apps/*",
     "packages/*"

packages/ui/package.json

@@ -24,8 +24,6 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@repo/design-system": "*",
-    "@repo/icons": "*",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
@@ -51,8 +49,23 @@
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.0",
-
+    "@repo/design-system": "*",
+    "@repo/icons": "*",
     "@tabler/icons-react": "^3.12.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tiptap/extension-code": "^2.11.7",
+    "@tiptap/extension-code-block": "^2.11.7",
+    "@tiptap/extension-color": "^2.11.7",
+    "@tiptap/extension-highlight": "^2.11.5",
+    "@tiptap/extension-image": "^2.11.5",
+    "@tiptap/extension-link": "^2.11.5",
+    "@tiptap/extension-list-item": "^2.11.7",
+    "@tiptap/extension-ordered-list": "^2.11.7",
+    "@tiptap/extension-text-align": "^2.11.5",
+    "@tiptap/extension-text-style": "^2.11.7",
+    "@tiptap/extension-underline": "^2.11.7",
+    "@tiptap/react": "^2.11.5",
+    "@tiptap/starter-kit": "^2.11.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.0.0",

packages/ui/src/components/atoms/command.tsx

@@ -1,12 +1,12 @@
 "use client"
 
 import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
+
 import { Command as CommandPrimitive } from "cmdk"
 import { Search } from "lucide-react"
 
 import { cn } from "@repo/ui/lib/utils"
-import { Dialog, DialogContent } from "@repo/ui/components/ui/dialog"
+
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

packages/ui/src/components/atoms/rich-text-style-provider.tsx

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "react";
+
+export const RichTextStylesProvider = ({ children }: PropsWithChildren) => {
+  return (
+    // INFO: "prose" class has max-width and we should remove it by max-w-none
+    <div className="prose prose-sm max-w-none prose-h2:mb-1 prose-h2:mt-1 prose-h3:mt-1 prose-h4:mt-1 prose-p:my-0 prose-p:mb-1  prose-ul:my-1 prose-ul:list-none prose-ul:pl-1 prose-hr:my-5 prose:text-froground dark:prose-invert">
+      {children}
+    </div>
+  );
+};

packages/ui/src/components/atoms/textarea.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@repo/ui/lib/utils"
+import { cn } from "@repo/ui/lib/utils";
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -11,14 +11,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
+    );
+  },
+);
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };

packages/ui/src/components/molecules/editor/editor-toolbar-button.tsx

@@ -0,0 +1,26 @@
+export const EditorToolbarButton = ({
+  onClick,
+  isActive,
+  icon: Icon,
+  label,
+  disabled,
+}: {
+  onClick: () => void;
+  isActive: boolean;
+  icon: any;
+  label: string;
+  disabled?: boolean;
+}) => (
+  <button
+    disabled={disabled}
+    onClick={onClick}
+    className={`flex items-center gap-1 rounded-md px-1 py-1 text-sm transition-colors ${
+      isActive
+        ? "bg-c1-500 text-white"
+        : " text-foreground hover:bg-gray-800"
+    } ${disabled ? "pointer-events-none cursor-not-allowed" : ""}`}
+    title={label}
+  >
+    <Icon size={16} />
+  </button>
+);

packages/ui/src/components/molecules/editor/editor-toolbar-image.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable no-restricted-imports */
+import { useMutation } from '@tanstack/react-query';
+import axios from 'axios';
+import { useRef } from 'react';
+import { EditorToolbarButton } from './editor-toolbar-button';
+import { ImageIcon } from 'lucide-react';
+import { ToolbarProps } from './editor-toolbar';
+import { toast } from 'sonner';
+
+const useUploadImage = (editor: any) => {
+  return useMutation({
+    mutationFn: async (file: File) => {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const response = await axios.post('/api/upload', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' }
+      });
+
+      return response.data; // Returns { imageUrl }
+    },
+    onSuccess: (data) => {
+      if (data.imageUrl) {
+        editor?.chain().focus().setImage({ src: data.imageUrl }).run();
+      }
+    },
+    onError: (error) => {
+      toast.error(error.message ?? "Can't upload image");
+    }
+  });
+};
+
+export const EditorToolbarImage = ({
+  editor,
+  showHtml
+}: Pick<ToolbarProps, 'editor' | 'showHtml'>) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { mutate: uploadImage } = useUploadImage(editor);
+
+  return (
+    <div>
+      <EditorToolbarButton
+        disabled={showHtml}
+        onClick={() => fileInputRef.current?.click()}
+        isActive={false}
+        icon={ImageIcon}
+        label="Image"
+      />
+      <input
+        type="file"
+        accept="image/*"
+        ref={fileInputRef}
+        className="hidden"
+        onChange={(e) => {
+          if (e.target.files?.[0]) uploadImage(e.target.files[0]);
+        }}
+      />
+    </div>
+  );
+};

packages/ui/src/components/molecules/editor/editor-toolbar-view-html.tsx

@@ -0,0 +1,27 @@
+import { Eye } from 'lucide-react';
+import { ToolbarProps } from './editor-toolbar';
+import { EditorToolbarButton } from './editor-toolbar-button';
+
+export const EditorToolbarViewHtml = ({
+  editor,
+  showHtml,
+  setShowHtml,
+  setHtmlContent
+}: ToolbarProps) => {
+  const toggleHtmlView = () => {
+    if (!editor) return;
+    setShowHtml((prev) => !prev);
+    if (!showHtml) {
+      setHtmlContent(editor.getHTML()); // Get latest HTML before switching
+    }
+  };
+
+  return (
+    <EditorToolbarButton
+      onClick={toggleHtmlView}
+      isActive={showHtml}
+      icon={Eye} // Lucide React Icon
+      label={showHtml ? 'Show Editor' : 'Show HTML'}
+    />
+  );
+};

packages/ui/src/components/molecules/editor/editor-toolbar-view-set-link.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { Link2 } from "lucide-react";
+import { EditorToolbarButton } from "./editor-toolbar-button";
+import { ToolbarProps } from "./editor-toolbar";
+import { Popover, PopoverTrigger, PopoverContent } from "./../../atoms/popover";
+import { Input } from "./../input";
+import { Button } from "./../../atoms/button";
+
+export const EditorToolbarSetLink = ({
+  editor,
+  showHtml,
+}: Pick<ToolbarProps, "editor" | "showHtml">) => {
+  const [url, setUrl] = useState("");
+  const [open, setOpen] = useState(false);
+
+  const onSubmit = () => {
+    if (!editor || !url) return;
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+    setOpen(false);
+    setUrl("");
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger>
+        <EditorToolbarButton
+          onClick={() => setOpen(true)}
+          disabled={showHtml}
+          isActive={false}
+          icon={Link2}
+          label="Set Link"
+        />
+      </PopoverTrigger>
+      <PopoverContent className="poooopppper w-64 p-2">
+        <Input
+          type="url"
+          placeholder="Enter URL"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+        />
+        <Button className="mt-2 w-full" onClick={onSubmit}>
+          Set Link
+        </Button>
+      </PopoverContent>
+    </Popover>
+  );
+};