auto select and edit
This commit is contained in:
hamid zarghami
@@ -0,0 +1,303 @@
|
||||
# 🎯 DanakMail Template Builder MVP - Implementation Plan
|
||||
|
||||
## 📋 Executive Summary
|
||||
|
||||
This MVP combines the best features of Waypoint's template builder with your current Persian email template system to create a powerful, RTL-compatible email template builder.
|
||||
|
||||
## 🎨 Key Features to Implement
|
||||
|
||||
### Phase 1: Core Block System (Week 1-2)
|
||||
- ✅ **Text Block**: Rich text editing with Persian support
|
||||
- ✅ **Button Block**: Customizable CTAs with styling
|
||||
- ✅ **Image Block**: Upload/URL with responsive options
|
||||
- ✅ **Container Block**: Layout wrapper with styling
|
||||
- ✅ **Spacer Block**: Vertical spacing control
|
||||
|
||||
### Phase 2: Drag & Drop Interface (Week 3-4)
|
||||
- 🔄 **Block Library**: Sidebar with draggable blocks
|
||||
- 🔄 **Canvas Area**: Drop zone for template building
|
||||
- 🔄 **Block Management**: Add, remove, reorder blocks
|
||||
- 🔄 **Properties Panel**: Context-sensitive editing
|
||||
|
||||
### Phase 3: Template Variables (Week 5-6)
|
||||
- 📝 **Variable System**: Dynamic content placeholders
|
||||
- 📝 **Test Data**: Preview with sample data
|
||||
- 📝 **Conditional Logic**: Show/hide based on data
|
||||
- 📝 **Loop Support**: Repeat blocks with arrays
|
||||
|
||||
### Phase 4: Export & Preview (Week 7-8)
|
||||
- 📤 **HTML Export**: Email-compatible HTML
|
||||
- 📤 **Live Preview**: Real-time template preview
|
||||
- 📤 **Mobile Preview**: Responsive design testing
|
||||
- 📤 **Email Client Testing**: Gmail, Outlook compatibility
|
||||
|
||||
## 🏗️ Architecture Overview
|
||||
|
||||
```
|
||||
src/
|
||||
├── pages/
|
||||
│ └── email-builder/
|
||||
│ ├── EmailBuilder.tsx # Main builder interface
|
||||
│ ├── components/
|
||||
│ │ ├── blocks/ # Block components
|
||||
│ │ │ ├── TextBlock.tsx
|
||||
│ │ │ ├── ButtonBlock.tsx
|
||||
│ │ │ ├── ImageBlock.tsx
|
||||
│ │ │ ├── ContainerBlock.tsx
|
||||
│ │ │ └── SpacerBlock.tsx
|
||||
│ │ ├── panels/ # Side panels
|
||||
│ │ │ ├── BlockLibrary.tsx
|
||||
│ │ │ ├── PropertiesPanel.tsx
|
||||
│ │ │ └── VariablesPanel.tsx
|
||||
│ │ ├── canvas/ # Canvas area
|
||||
│ │ │ ├── Canvas.tsx
|
||||
│ │ │ ├── DropZone.tsx
|
||||
│ │ │ └── BlockRenderer.tsx
|
||||
│ │ └── preview/ # Preview system
|
||||
│ │ ├── LivePreview.tsx
|
||||
│ │ ├── MobilePreview.tsx
|
||||
│ │ └── EmailPreview.tsx
|
||||
│ ├── hooks/
|
||||
│ │ ├── useEmailBuilder.ts
|
||||
│ │ ├── useDragDrop.ts
|
||||
│ │ └── useTemplateExport.ts
|
||||
│ ├── store/
|
||||
│ │ ├── builderStore.ts
|
||||
│ │ └── templatesStore.ts
|
||||
│ ├── types/
|
||||
│ │ ├── blocks.ts
|
||||
│ │ ├── template.ts
|
||||
│ │ └── export.ts
|
||||
│ └── utils/
|
||||
│ ├── blockRenderers.ts
|
||||
│ ├── htmlExporter.ts
|
||||
│ └── templateValidator.ts
|
||||
```
|
||||
|
||||
## 🔧 Technical Implementation
|
||||
|
||||
### 1. Block Interface Definition
|
||||
|
||||
```typescript
|
||||
// src/pages/email-builder/types/blocks.ts
|
||||
interface BaseBlock {
|
||||
id: string
|
||||
type: BlockType
|
||||
data: BlockData
|
||||
style: BlockStyle
|
||||
responsive?: ResponsiveSettings
|
||||
}
|
||||
|
||||
interface TextBlock extends BaseBlock {
|
||||
type: 'text'
|
||||
data: {
|
||||
content: string
|
||||
variables?: string[]
|
||||
}
|
||||
style: {
|
||||
fontSize: number
|
||||
fontWeight: string
|
||||
color: string
|
||||
textAlign: 'left' | 'center' | 'right'
|
||||
lineHeight: number
|
||||
}
|
||||
}
|
||||
|
||||
interface ButtonBlock extends BaseBlock {
|
||||
type: 'button'
|
||||
data: {
|
||||
text: string
|
||||
url: string
|
||||
variables?: string[]
|
||||
}
|
||||
style: {
|
||||
backgroundColor: string
|
||||
textColor: string
|
||||
borderRadius: number
|
||||
padding: Spacing
|
||||
fontSize: number
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Drag & Drop Implementation
|
||||
|
||||
```typescript
|
||||
// src/pages/email-builder/hooks/useDragDrop.ts
|
||||
import { useDragDropManager } from '@dnd-kit/core'
|
||||
|
||||
export const useDragDrop = () => {
|
||||
const { addBlock, moveBlock, removeBlock } = useEmailBuilderStore()
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event
|
||||
|
||||
if (active.data.current?.type === 'library-block') {
|
||||
// Add new block from library
|
||||
addBlock(active.data.current.blockType, over?.id)
|
||||
} else if (active.data.current?.type === 'canvas-block') {
|
||||
// Reorder existing blocks
|
||||
moveBlock(active.id, over?.id)
|
||||
}
|
||||
}
|
||||
|
||||
return { handleDragEnd }
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Template Variable System
|
||||
|
||||
```typescript
|
||||
// src/pages/email-builder/utils/templateProcessor.ts
|
||||
export const processTemplate = (template: Template, variables: Record<string, any>) => {
|
||||
return template.blocks.map(block => {
|
||||
switch (block.type) {
|
||||
case 'text':
|
||||
return {
|
||||
...block,
|
||||
data: {
|
||||
...block.data,
|
||||
content: replaceVariables(block.data.content, variables)
|
||||
}
|
||||
}
|
||||
case 'button':
|
||||
return {
|
||||
...block,
|
||||
data: {
|
||||
...block.data,
|
||||
text: replaceVariables(block.data.text, variables),
|
||||
url: replaceVariables(block.data.url, variables)
|
||||
}
|
||||
}
|
||||
default:
|
||||
return block
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const replaceVariables = (content: string, variables: Record<string, any>) => {
|
||||
return content.replace(/\{\{(\w+)\}\}/g, (match, key) => {
|
||||
return variables[key] || match
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 4. HTML Export System
|
||||
|
||||
```typescript
|
||||
// src/pages/email-builder/utils/htmlExporter.ts
|
||||
export const exportToHTML = (template: Template, options: ExportOptions) => {
|
||||
const styles = generateEmailStyles(template, options)
|
||||
const bodyHTML = renderBlocks(template.blocks, options)
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html dir="${options.rtlSupport ? 'rtl' : 'ltr'}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${template.name}</title>
|
||||
${styles}
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table width="600" cellpadding="0" cellspacing="0" border="0">
|
||||
${bodyHTML}
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 Comparison Matrix
|
||||
|
||||
| Feature | Current System | Waypoint | MVP Target |
|
||||
|---------|---------------|----------|------------|
|
||||
| RTL Support | ✅ Full | ❌ None | ✅ Full |
|
||||
| Drag & Drop | ❌ None | ✅ Full | ✅ Full |
|
||||
| Block System | ⚠️ Limited | ✅ Rich | ✅ Rich |
|
||||
| Variables | ❌ None | ✅ LiquidJS | ✅ Simple |
|
||||
| Email Client Support | ⚠️ Basic | ✅ Full | ✅ Full |
|
||||
| Persian UI | ✅ Full | ❌ None | ✅ Full |
|
||||
| Template Library | ✅ Basic | ✅ Rich | ✅ Rich |
|
||||
| Live Preview | ⚠️ Basic | ✅ Advanced | ✅ Advanced |
|
||||
|
||||
## 🚀 Development Timeline
|
||||
|
||||
### Week 1-2: Foundation
|
||||
- [ ] Setup new email builder structure
|
||||
- [ ] Implement basic block types
|
||||
- [ ] Create block components
|
||||
- [ ] Setup Zustand store
|
||||
|
||||
### Week 3-4: Drag & Drop
|
||||
- [ ] Install @dnd-kit/core
|
||||
- [ ] Implement block library sidebar
|
||||
- [ ] Create canvas drop zone
|
||||
- [ ] Add block management
|
||||
|
||||
### Week 5-6: Advanced Features
|
||||
- [ ] Template variables system
|
||||
- [ ] Properties panel
|
||||
- [ ] Test data scenarios
|
||||
- [ ] Conditional rendering
|
||||
|
||||
### Week 7-8: Export & Polish
|
||||
- [ ] HTML export optimization
|
||||
- [ ] Email client testing
|
||||
- [ ] Mobile responsive preview
|
||||
- [ ] Performance optimization
|
||||
|
||||
## 💻 Getting Started
|
||||
|
||||
1. **Install Dependencies**:
|
||||
```bash
|
||||
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
|
||||
npm install react-beautiful-dnd @types/react-beautiful-dnd
|
||||
```
|
||||
|
||||
2. **Update Store Structure**:
|
||||
```typescript
|
||||
// Extend existing personality store
|
||||
interface EmailBuilderStore extends PersonalityStore {
|
||||
blocks: Block[]
|
||||
template: Template
|
||||
variables: TemplateVariable[]
|
||||
addBlock: (type: BlockType, position?: number) => void
|
||||
updateBlock: (id: string, updates: Partial<Block>) => void
|
||||
removeBlock: (id: string) => void
|
||||
}
|
||||
```
|
||||
|
||||
3. **Migration Path**:
|
||||
- Keep existing personality system
|
||||
- Add new email builder alongside
|
||||
- Gradually migrate users to new system
|
||||
- Maintain backward compatibility
|
||||
|
||||
## 🎯 Success Metrics
|
||||
|
||||
- **User Adoption**: 80% of users try new builder within first month
|
||||
- **Template Creation Time**: 50% reduction compared to current system
|
||||
- **Email Compatibility**: 99% rendering across major clients
|
||||
- **Mobile Responsiveness**: Perfect rendering on all devices
|
||||
- **Persian RTL Support**: Flawless right-to-left layout
|
||||
|
||||
## 🔮 Future Enhancements (Post-MVP)
|
||||
|
||||
1. **AI-Powered Templates**: Generate templates from text descriptions
|
||||
2. **Collaboration**: Real-time editing with team members
|
||||
3. **Analytics**: Template performance tracking
|
||||
4. **A/B Testing**: Compare template variants
|
||||
5. **Animation Support**: CSS animations for email elements
|
||||
6. **Component Library**: Reusable design system components
|
||||
|
||||
---
|
||||
|
||||
*This MVP plan provides a clear roadmap to build a world-class email template builder that combines Waypoint's advanced features with your system's Persian/RTL strengths.*
|
||||
Reference in New Issue
Block a user