Notion-Like Editor

A full-stack, Notion-style rich text editor built with Next.js, React, Tiptap, Tailwind CSS, and Prisma. This project provides a seamless, block-based editing experience featuring tables, task lists, drag-and-drop handles, and rich text formatting, mimicking the core experience of modern document editors.

🚀 Features

• Rich Text Editing: Powered by Tiptap, offering a robust and extensible headless editor.
• Notion-Style Blocks: Support for paragraphs, headings, blockquotes, code blocks, and lists.
• Advanced Extensions:
  • Interactive Task Lists
  • Editable Tables
  • Drag handles for block reordering
  • Color styling and drop cursors
• Database Persistence: Stores documents (titles, tags, and JSON-based content) using SQLite via Prisma ORM.
• Modern UI: Styled with Tailwind CSS and Lucide React icons.

💻 Tech Stack

• Framework: Next.js (App Router)
• Editor: Tiptap
• Styling: Tailwind CSS
• Database: SQLite
• ORM: Prisma
• Icons: Lucide React

🛠️ Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm, yarn, or pnpm

Installation

1. Clone the repository:

   git clone https://github.com/Elguajo/Notion-Like-Editor.git
   cd Notion-Like-Editor

2. Install dependencies:

   npm install

3. Set up the database: The project uses SQLite for easy setup. Generate the Prisma client and push the schema to create the local database (dev.db):

   npx prisma generate
   npx prisma db push

4. Run the development server:

   npm run dev

5. Open the app: Navigate to http://localhost:3000 in your browser.

📁 Project Structure

• src/app/ - Next.js App Router pages and API routes
• src/components/ - React components, including the Tiptap editor and its extensions
• src/lib/ - Utility functions and Prisma client initialization
• prisma/ - Database schema (schema.prisma)

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📝 License

This project is licensed under the MIT License.