📝 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

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

🎯 Advanced Features

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

🛠️ Technical Features

• undefinedModern Stack: Next.js 15, React 18, TypeScript
• undefinedRich Editor: TipTap with custom extensions
• undefinedUI Components: Radix UI primitives with shadcn/ui
• undefinedStyling: Tailwind CSS with OKLCH color system
• undefinedPerformance: Optimized with dynamic imports and proper SSR handling

🚀 Quick Start

Prerequisites

• Node.js 18+
• bun

Installation

1. undefinedClone the repositoryundefined

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

2. undefinedInstall dependenciesundefined

   bun install
   

3. undefinedRun the development serverundefined

   bun run dev
   

4. undefinedOpen your browserundefined
   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

---