A modern, fully functional Notion-style rich text editor built with Next.js, React, TypeScript, and Tailwind CSS. This project implements a sophisticated block-based editing experience similar to Notion with a clean, responsive interface and robust functionality.

https://notes-sigma-nine.vercel.app/

https://drive.google.com/file/d/1xamfxrZ2iF2eEMeVkbuNyBkop6IkNVQz/view?usp=share_link

• Block-based editing system with support for multiple content types
• Rich text formatting (bold, italic, underline, strikethrough, code, links)
• Slash command menu (press / to trigger) for inserting new blocks
• Markdown shortcuts for quick formatting
• Drag and drop to reorder blocks (with visual feedback)
• Keyboard navigation and shortcuts for efficient editing

• Text (paragraph with rich text formatting)
• Headings (H1, H2, H3)
• Lists
  • To-do lists with checkboxes
  • Bulleted lists
  • Numbered lists
• Code blocks with syntax highlighting
• Images with upload support
• Tables with basic cell editing

• Auto-save to localStorage
• Document history with undo/redo functionality
• Multiple document support with document switching

• Responsive design for desktop and mobile
• Light and dark theme support with system preference detection
• Command palette for global actions
• Tools dock for text formatting and block operations
• Collapsible sidebar for document navigation
• Toast notifications for user feedback

• Block indentation for creating nested structures
• Content persistence using localStorage
• Block transformations (convert between block types)
• Custom block renderers for extensibility

• Next.js 14 with App Router for page routing and server components
• React 18 for UI components and state management
• TypeScript for type safety and better developer experience

• React Context API for global state management (EditorContext)
• Custom hooks for reusable logic and state

• Tailwind CSS for styling and responsive design
• shadcn/ui for high-quality, accessible UI components
• Framer Motion for smooth animations and transitions
• Radix UI for accessible primitive components
• Lucide React for consistent iconography
• Magic UI for cool animations

• Custom block renderer system for different block types
• Command system for editor operations
• Selection and focus management
• Keyboard event handling for shortcuts
• hello-pangea/dnd for drag and drop functionality

• app/: Next.js App Router pages
• components/: React components
  • editor/: Editor-specific components
    • blocks/: Different block components
  • ui/: shadcn/ui components
  • magicui/: magic/ui components
• context/: React Context for state management
• hooks/: Custom React hooks
• lib/: Utility functions
• types/: TypeScript type definitions

1. Clone the repository
2. Install dependencies:

npm install

# or

yarn install

# or

pnpm install

3. Run the development server:

npm run dev

# or

yarn dev

# or

pnpm dev

4. Open http://localhost:3000 with your browser to see the result.

• Enter: Create a new block
• Shift + Enter: Add a line break within the current block
• Backspace (at the beginning of an empty block): Delete the current block
• Tab: Indent the current block
• Shift + Tab: Unindent the current block
• /: Open the command menu