Rich Text Editor (React + TypeScript + Vite)

This project is a Rich Text Editor built using React, TypeScript, Vite, and TipTap. It includes features like toolbars, popovers, tooltips, and image insertion with a modern UI.

🚀 Getting Started

1. Clone the repository

 git clone <your-repo-url>
 cd <your-project-folder>

2. Install dependencies

 npm install

3. Run the development server

 npm run dev

Then open http://localhost:5173 in your browser.

---

📦 Build for Production

 npm run build

Output will be in the dist/ folder.

Preview production build locally:

 npm run preview

---

🌐 Deployment

You can host this project for free using services like:

• Vercel
• Netlify
• GitHub Pages

Recommended: Vercel for easiest setup with Vite.

---

🛠 Tech Stack

• React + TypeScript
• Vite for fast development
• TipTap for the rich text editor
• Tailwind CSS for styling
• shadcn/ui for UI components
• Lucide Icons for icons

---

📋 ESLint Configuration

If you are developing a production application, we recommend enabling type-aware lint rules.

export default tseslint.config([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      ...tseslint.configs.recommendedTypeChecked,
      ...tseslint.configs.strictTypeChecked,
      ...tseslint.configs.stylisticTypeChecked,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
]);

Optional React-specific lint rules:

// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default tseslint.config([
  globalIgnores(["dist"]),
  {
    files: ["**/*.{ts,tsx}"],
    extends: [
      reactX.configs["recommended-typescript"],
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
]);

---

📷 Features Implemented

• Toolbar with icons
• Tooltips for actions
• Image insertion via popover
• Clean UI with Tailwind + shadcn/ui

Future features: Code blocks with syntax highlighting, tables, and media embeds.

---

🤝 Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss.

---

📜 License

MIT License.