feat: add toolbar styles and functionality for blog editor

feat: implement EditorTheme for consistent styling across editor components feat: define types for blog-related operations including image uploads and post creation feat: create DropdownColorPicker component for color selection in blog editor feat: implement ImageResizer component for resizing images in the blog editor feat: add export and import functionality for blog posts in JSON format feat: update main application routes to include CreatePost page feat: enhance Blog page with a button to navigate to CreatePost feat: implement CreatePost page with title, cover image upload, and content editor
2025-10-25 21:03:58 +08:00
parent 4829c53355
commit e299694f22
26 changed files with 4095 additions and 1 deletions
--- a/src/blog/README.md
+++ b/src/blog/README.md
@@ -0,0 +1,148 @@
+# 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