www.cialloo.com/src/blog/README.md

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

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

import { BlogEditor } from './blog';

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

API Functions

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