# Blog Module

This module contains all the blog-related functionality for creating and managing blog posts.

## Features

### ✍️ Rich Text Editor
- Custom Lexical-based editor with full formatting support
- Markdown shortcuts
- Image upload with progress tracking
- Hashtags and mentions
- Tables, lists, code blocks, and more

### 📷 Image Upload
- Direct upload to S3 using presigned URLs
- Real-time upload progress indicator
- Error handling with user notifications
- Automatic image key storage for reference

### 📝 Post Creation
- Title and cover image
- Rich text content editing
- Draft and publish workflow
- Validation before submission

## Structure

```
src/blog/
├── BlogEditor.tsx          # Main editor component
├── api.ts                  # API functions for blog operations
├── types.ts                # TypeScript type definitions
├── index.ts                # Module exports
├── nodes/                  # Custom Lexical nodes
│   ├── ImageNode.tsx       # Image node with upload support
│   ├── ImageComponent.tsx  # Image component with progress UI
│   ├── ImageResizer.tsx    # Image resizing functionality
│   └── MentionNode.ts      # Mention node
├── plugins/                # Lexical editor plugins
│   ├── ImagesPlugin.tsx    # Image insertion plugin
│   ├── DragDropPastePlugin.tsx  # Image upload on drag/drop
│   ├── ToolbarPlugin.tsx   # Editor toolbar
│   ├── MarkdownShortcutPlugin.tsx  # Markdown shortcuts
│   ├── HashtagPlugin.tsx   # Hashtag support
│   └── MentionsPlugin.tsx  # Mentions support
├── styles/                 # Editor styles
│   ├── editor.css
│   └── toolbar.css
├── themes/                 # Editor themes
│   └── EditorTheme.ts
├── ui/                     # UI components
│   ├── DropdownColorPicker.tsx
│   └── DropdownColorPicker.css
└── utils/                  # Utility functions
    └── exportImport.ts
```

## Usage

### Creating a New Post

```tsx
import { CreatePost } from './pages/CreatePost';

// The CreatePost component provides a complete UI for:
// 1. Entering post title
// 2. Uploading cover image
// 3. Writing content with rich text editor
// 4. Publishing the post
```

### Using the Blog Editor

```tsx
import { BlogEditor } from './blog';

function MyComponent() {
  return <BlogEditor />;
}
```

### API Functions

```typescript
import { uploadImage, createBlogPost } from './blog/api';

// Upload an image
const { fileKey, url } = await uploadImage(file, (progress) => {
  console.log(`Upload progress: ${progress}%`);
});

// Create a blog post
const { postId } = await createBlogPost(title, content, coverImageKey);
```

## Image Upload Flow

1. **User Action**: User drops/pastes image or uploads cover image
2. **Preview**: Image preview shown immediately with local data URL
3. **Get Upload URL**: Request presigned URL from backend API
4. **Upload to S3**: Upload file directly to S3 with progress tracking
5. **Get Download URL**: Request presigned download URL
6. **Update Node**: Update image node with final URL and fileKey
7. **Notifications**: Show success/error messages to user

## API Endpoints

### File Upload
```
POST /api/blog/file/upload
Body: { fileName: string }
Response: { url: string, fileKey: string, expireAt: number }
```

### File Download
```
POST /api/blog/file/download
Body: { fileKey: string }
Response: { url: string, expireAt: number }
```

### Create Post
```
POST /api/blog/post/create
Body: { title: string, content: string, coverImageKey: string }
Response: { postId: string }
```

## Features to Implement

- [ ] List all blog posts
- [ ] View single blog post
- [ ] Edit blog post
- [ ] Delete blog post
- [ ] Add tags/categories
- [ ] Comments system
- [ ] Like/reaction system
- [ ] Search functionality
- [ ] Pagination
- [ ] Draft management
- [ ] Scheduled publishing

## Notes

- All images are stored with their S3 file keys in the editor state
- Upload progress is tracked in real-time and displayed to users
- Error handling includes both API errors and upload failures
- The editor state can be exported/imported for draft saving