mirror of https://github.com/usememos/memos.git
1b11e8c841
BREAKING CHANGE: MemoEditor internal architecture completely refactored ## Summary Refactored MemoEditor from hooks-based state management to a three-layer architecture (Presentation → State → Services) using useReducer pattern. ## Changes ### Architecture - **State Layer** (5 new files): types, actions, reducer, context, barrel export - **Service Layer** (6 new files): error, validation, upload, cache, memo services + barrel - **Component Layer** (3 new files): EditorToolbar, EditorContent, EditorMetadata - **Simplified Hooks** (3 new files): useMemoInit, useAutoSave, useKeyboard ### Code Reduction - Main component: ~380 lines → ~140 lines (-63%) - Hooks removed: 5 old hooks (useMemoEditorState, useMemoSave, etc.) - Total lines removed: 508 lines of old code - Utility hooks preserved: 8 hooks still in use (useLocation, useDragAndDrop, etc.) ### Improvements - ✅ Predictable state transitions with useReducer - ✅ Testable business logic in pure service functions - ✅ Cleaner component code (presentation only) - ✅ Better separation of concerns - ✅ Type-safe actions with discriminated unions - ✅ Centralized error handling ## Statistics - Files changed: 26 - Commits created: 25 (squashed into 1) - New files: 17 - Removed files: 5 - TypeScript errors: 0 - Lint errors: 0 ## Testing Manual testing required for: - Editor functionality (create, edit, save) - Drag and drop - Focus mode - Keyboard shortcuts (Cmd/Ctrl + Enter) - Auto-save to localStorage |
||
|---|---|---|
| .. | ||
| Editor | ||
| Toolbar | ||
| components | ||
| hooks | ||
| services | ||
| state | ||
| types | ||
| README.md | ||
| constants.ts | ||
| index.tsx | ||
README.md
MemoEditor Architecture
Overview
MemoEditor uses a three-layer architecture for better separation of concerns and testability.
Architecture
┌─────────────────────────────────────────┐
│ Presentation Layer (Components) │
│ - EditorToolbar, EditorContent, etc. │
└─────────────────┬───────────────────────┘
│
┌─────────────────▼───────────────────────┐
│ State Layer (Reducer + Context) │
│ - state/, useEditorContext() │
└─────────────────┬───────────────────────┘
│
┌─────────────────▼───────────────────────┐
│ Service Layer (Business Logic) │
│ - services/ (pure functions) │
└─────────────────────────────────────────┘
Directory Structure
MemoEditor/
├── state/ # State management (reducer, actions, context)
├── services/ # Business logic (pure functions)
├── components/ # UI components
├── hooks/ # React hooks (utilities)
├── Editor/ # Core editor component
├── Toolbar/ # Toolbar components
├── constants.ts
└── types/
Key Concepts
State Management
Uses useReducer + Context for predictable state transitions. All state changes go through action creators.
Services
Pure TypeScript functions containing business logic. No React hooks, easy to test.
Components
Thin presentation components that dispatch actions and render UI.
Usage
import MemoEditor from "@/components/MemoEditor";
<MemoEditor
memoName="memos/123"
onConfirm={(name) => console.log('Saved:', name)}
onCancel={() => console.log('Cancelled')}
/>
Testing
Services are pure functions - easy to unit test without React.
const state = mockEditorState();
const result = await memoService.save(state, { memoName: 'memos/123' });