Editor V2 — Mục lục
Tài liệu chi tiết về kiến trúc Editor V2: visual page builder kế thừa convention DOM của Pagefly, port từ craft.js (React) sang Vue 3 Options API + Pinia.
1 — Architecture
Kiến trúc tổng thể, data model, 4 stores (node/dnd/ui/history), registry pattern, mixin layering, cách tránh import cycle.
2 — Rendering
Cách Editor V2 render cây node ra DOM, reactive update khi store đổi, và mối liên hệ giữa Pinia/Vue/registry.
3 — Drag & Drop
Pipeline drag-create (sidebar → canvas) và drag-move (existing node). Positioner deep dive. Indicator overlay.
4 — Overlays
UI nổi (floating) phục vụ tương tác với node đã chọn: ElementToolbar, EdgeOverlays.
5 — Extending
Recipe thêm element mới + wire trait panel + cases nâng cao (Grid, Product, ProductSlider) + roadmap.
6 — Troubleshooting
Lỗi thường gặp, cách debug, checklist khi sửa code.
7 — Traits & Schema
Deep dive vào: data model 3 namespace, cascade desktop-first, trait registry (Vue-free definitions.js + composition registry.js), style renderers co-located với definitions, buildElementSchema (mirror per-bp), meta.defaults với factory wrap, helpers JSON Schema, store-level guard. Đây là superset thay phần "data model" trong 01-architecture.md (đã outdate) và phần "trait panel" trong 05-extending.md.
8 — Glossary
Tham chiếu nhanh: variable abbreviations, function purposes, file mapping. Mỗi entry có ý nghĩa + nơi xuất hiện + ví dụ.
9 — AI Page Generation
Plan tích hợp tính năng AI generate page vào editor_v2. Tài liệu này KHÔNG phải implementation — là blueprint để khi triển khai cứ theo phase mà làm, không phải design lại từ đầu.
0 — History (Undo / Redo) & Patch System
Deep dive vào undo/redo của editorv2: PatchRecorder thu thập mutation thành (forward, inverse) patches, history store giữ timeline, commit trong node store là chokepoint duy nhất ghi state. Coalesce + throttle để hot path (kéo edge-overlay) không phình timeline.