📝 Rich Text Editor Application

A full-stack rich text editor application built with React.js and Node.js, featuring real-time editing, document persistence, and export capabilities.

✨ Features

Rich Text Editing

Basic Formatting: Bold, italic, underline, strikethrough
Text Alignment: Left, center, right, justify
Lists: Ordered and unordered lists
Media: Hyperlinks and inline images
History: Undo/Redo functionality with 50-step history
Placeholder: Helpful placeholder text

Document Management

Save/Load: Persist documents to MongoDB database
Export: Download as HTML or Markdown files
Responsive UI: Clean, modern interface that works on all devices

Technical Stack

Frontend: React.js 18 + TipTap Editor
Backend: Node.js + Express.js
Database: MongoDB with Mongoose ODM
Styling: Custom CSS with responsive design

🚀 Quick Start

Prerequisites

Node.js (v16 or higher)
MongoDB (local installation or MongoDB Atlas) - Optional for demo mode
npm or yarn

Installation

Clone or navigate to the project directory:

cd /home/hasnat-shohag/viva-frontend/rich-text-editor

Install Backend Dependencies:
```
cd backend
npm install
```
Install Frontend Dependencies:
```
cd ../frontend
npm install
```

⚙️ Configuration

Quick Demo (No MongoDB Required)

For a quick demo with in-memory storage:

Start Demo Backend:
```
cd backend
npm run demo
```
The backend will start on http://localhost:5002 with in-memory storage.
Start Frontend:
```
cd frontend
npm start
```
The frontend will start on http://localhost:3001

Production Setup with MongoDB

Backend Configuration:

Create environment file (optional):
```
cd backend
cp .env.example .env
```

Configure environment variables in backend/.env:

PORT=5002
MONGO_URI=mongodb://localhost:27017/richtexteditor

Database Setup

Option 1: Demo Mode (No Installation Required)

Uses in-memory storage
Data is lost when server restarts
Perfect for testing and development

Option 2: Local MongoDB

Install MongoDB locally:

# Ubuntu/Debian
sudo apt update
sudo apt install -y mongodb-org
sudo systemctl start mongod
sudo systemctl enable mongod

# macOS (using Homebrew)
brew tap mongodb/brew
brew install mongodb-community
brew services start mongodb-community

# Windows
# Download and install from https://www.mongodb.com/try/download/community

Option 3: MongoDB Atlas (Cloud)

Create account at MongoDB Atlas
Create a cluster and get connection string
Update MONGO_URI in .env file

🎯 Running the Application

Demo Mode (Recommended for First Try)

# Terminal 1: Start Demo Backend
cd backend
npm run demo

# Terminal 2: Start Frontend
cd frontend
npm start

Production Mode with MongoDB

# Terminal 1: Start Backend
cd backend
npm run dev

# Terminal 2: Start Frontend
cd frontend
npm start

Backend Endpoints

Demo Backend: http://localhost:5002
Production Backend: http://localhost:5001 (or configured PORT)
Frontend: http://localhost:3001

Production Build

cd frontend
npm run build

📋 API Documentation

Base URL

http://localhost:5000

Endpoints

GET /

Health check endpoint

{
	"message": "Rich Text Editor API is running!"
}

POST /save

Save document content

{
	"title": "Document Title",
	"content": {
		/* TipTap JSON content */
	},
	"html": "<p>HTML content</p>",
	"markdown": "# Markdown content"
}

Response:

{
	"id": "document_id",
	"message": "Content saved successfully"
}

GET /load/:id

Load document by ID

{
	"_id": "document_id",
	"title": "Document Title",
	"content": {
		/* TipTap JSON content */
	},
	"html": "<p>HTML content</p>",
	"markdown": "# Markdown content",
	"createdAt": "2024-01-01T00:00:00.000Z",
	"updatedAt": "2024-01-01T00:00:00.000Z"
}

GET /documents

List all documents (latest 50)

[
	{
		"_id": "document_id",
		"title": "Document Title",
		"createdAt": "2024-01-01T00:00:00.000Z",
		"updatedAt": "2024-01-01T00:00:00.000Z"
	}
]

DELETE /delete/:id

Delete document by ID

{
	"message": "Document deleted successfully"
}

🎨 Usage Guide

Creating Documents

Open the application at http://localhost:3000
Enter a title for your document
Start typing in the editor
Use toolbar buttons for formatting

Formatting Options

Bold: Click B button or use Ctrl+B
Italic: Click I button or use Ctrl+I
Underline: Click U button or use Ctrl+U
Strikethrough: Click S button
Alignment: Use alignment buttons (⇤ ≡ ⇥ ⊞)
Lists: Create bullet or numbered lists
Links: Click link button and enter URL
Images: Click image button and enter image URL

Saving & Loading

Save: Click "💾 Save" button
Load: Enter document ID and click "📂 Load"
Export: Use "📄 Export HTML" or "📝 Export Markdown"

📁 Project Structure

rich-text-editor/
├── backend/
│   ├── models/
│   │   └── EditorContent.js     # MongoDB schema
│   ├── .env                     # Environment variables
│   ├── index.js                 # Express server
│   └── package.json
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── App.js               # Main React component
│   │   ├── App.css              # Styling
│   │   ├── index.js             # React entry point
│   │   └── index.css
│   └── package.json
└── README.md

🛠️ Development

Adding New Features

Backend:

Add new routes in backend/index.js
Create new models in backend/models/
Update API documentation

Frontend:

Add new components in frontend/src/
Extend TipTap editor with additional extensions
Update styling in CSS files

Available Scripts

Backend:

npm start - Start production server
npm run dev - Start development server with nodemon

Frontend:

npm start - Start development server
npm run build - Create production build
npm test - Run tests

🚨 Troubleshooting

Common Issues

MongoDB Connection Error:

Ensure MongoDB is running
Check connection string in .env
Verify network connectivity for Atlas

Port Already in Use:

Change PORT in backend .env file
Update API_URL in frontend if needed

CORS Issues:

Backend includes CORS middleware
Check if frontend proxy is configured correctly

TipTap Extensions Not Working:

Ensure all TipTap packages are installed
Check console for JavaScript errors

Debug Mode

Enable detailed logging by setting environment variable:

DEBUG=* npm run dev

🔧 Deployment

Backend Deployment (Heroku)

cd backend
# Create Procfile
echo "web: node index.js" > Procfile
# Deploy to Heroku
heroku create your-app-name
heroku config:set MONGO_URI=your_mongodb_uri
git push heroku main

Frontend Deployment (Netlify/Vercel)

cd frontend
npm run build
# Deploy build folder to your hosting service

📚 Dependencies

Backend Dependencies

express - Web framework
mongoose - MongoDB ODM
cors - Cross-origin resource sharing
body-parser - Request body parsing
dotenv - Environment variables

Frontend Dependencies

react - UI framework
@tiptap/* - Rich text editor
axios - HTTP client
turndown - HTML to Markdown converter

🤝 Contributing

Fork the repository
Create feature branch (git checkout -b feature/AmazingFeature)
Commit changes (git commit -m 'Add AmazingFeature')
Push to branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License.

🙋‍♂️ Support

For support, please create an issue in the repository or contact the development team.

Happy Writing! 📝

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
backend		backend
frontend		frontend
.gitignore		.gitignore
README.md		README.md
status.sh		status.sh

hasnat-shohag/basic_rich_text_editor

Folders and files

Latest commit

History

Repository files navigation