📝 DocuEdit Pro

A powerful, feature-rich document editor built with modern web technologies. Create, edit, and format documents with professional-grade tools, featuring a beautiful interface and seamless export capabilities.

✨ Features

🎨 Rich Text Editing

• Headings & Paragraphs: Support for H1-H4 headings with proper hierarchy
• Text Formatting: Bold, italic, underline, superscript, and subscript
• Font Customization: Multiple font families (System, Serif, Monospace) and sizes (12px-48px)
• Line Spacing: Adjustable line height options (1, 1.15, 1.5, 2)
• Lists: Bullet and ordered lists with proper nesting and indentation
• Colors: Text color and background highlighting with color picker
• Indentation: Custom indent system for paragraphs and headings

🎯 Advanced Features

• Keyboard Shortcuts: Ctrl/Cmd + B/I/U for quick formatting
• Export Capabilities:
  • PDF export using html2pdf.js
  • Word document export (.doc format)
• Theme Support: Beautiful dark/light mode with system preference detection
• Responsive Design: Mobile-friendly interface
• Accessibility: ARIA labels and keyboard navigation support

🛠️ Technical Features

• Modern Stack: Next.js 15, React 18, TypeScript
• Rich Editor: TipTap with custom extensions
• UI Components: Radix UI primitives with shadcn/ui
• Styling: Tailwind CSS with OKLCH color system
• Performance: Optimized with dynamic imports and proper SSR handling

🚀 Quick Start

Prerequisites

• Node.js 18+
• bun

Installation

1. Clone the repository

   git clone https://github.com/yourusername/document-editor-with-tip-mukutap.git
   cd document-editor-with-tip-mukutap

2. Install dependencies

   bun install

3. Run the development server

   bun run dev

4. Open your browser Navigate to http://localhost:3000

📁 Project Structure

├── app/
│   ├── (editor)/
│   │   ├── editor-client.tsx    # Client-side editor wrapper
│   │   └── page.tsx              # Main editor page
│   ├── layout.tsx               # Root layout with navbar/footer
│   └── globals.css              # Global styles with design tokens
├── components/
│   ├── editor/
│   │   ├── rich-editor.tsx       # Main TipTap editor component
│   │   ├── toolbar.tsx           # Comprehensive toolbar
│   │   └── tiptap-extensions.ts  # Custom extensions
│   ├── navbar.tsx               # Custom navigation bar
│   ├── footer.tsx               # Footer component
│   ├── theme-provider.tsx        # Theme context provider
│   ├── theme-toggle.tsx          # Dark/light mode toggle
│   └── ui/                       # shadcn/ui components
├── lib/
│   └── utils.ts                  # Utility functions
└── public/                       # Static assets

🎨 Customization

Theme Customization

The project uses a custom design system with OKLCH color space for better color consistency. You can customize colors in app/globals.css:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  /* ... more color tokens */
}

Adding New Extensions

Create custom TipTap extensions in components/editor/tiptap-extensions.ts:

import { Extension } from "@tiptap/core"

export const CustomExtension = Extension.create({
  name: "customExtension",
  // Your extension logic here
})

Styling Components

The project uses Tailwind CSS with custom design tokens. Components are styled using the cn() utility function for conditional classes.

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with zero configuration

Other Platforms

The project can be deployed to any platform that supports Next.js:

• Netlify
• AWS Amplify
• Railway
• DigitalOcean App Platform

📦 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🧪 Testing

# Run tests (when implemented)
npm run test

# Run tests in watch mode
npm run test:watch

📚 API Reference

Editor Component

import { RichEditor } from '@/components/editor/rich-editor'

// Basic usage
<RichEditor />

Custom Extensions

import { IndentExtension, LineHeightExtension } from '@/components/editor/tiptap-extensions'

// Use in editor configuration
const editor = useEditor({
  extensions: [
    StarterKit,
    IndentExtension,
    LineHeightExtension,
  ],
})

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details on how to contribute to this project.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• TipTap - The headless editor framework
• Next.js - The React framework
• Radix UI - Accessible UI primitives
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Beautifully designed components

📞 Support

• 📧 Email: support@docueditpro.com
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

---

Made with ❤️ using Next.js & TipTap

© 2025 DocuEdit Pro. All rights reserved.