Memo Management System

Relevant source files

• web/src/components/MemoDetailSidebar/MemoOutline.tsx
• web/src/components/MemoEditor/Editor/controller.ts
• web/src/components/MemoEditor/Editor/extensions.ts
• web/src/components/MemoEditor/Editor/formatting.ts
• web/src/components/MemoEditor/Editor/headingDecorations.ts
• web/src/components/MemoEditor/Editor/index.tsx
• web/src/components/MemoEditor/Editor/listIndent.ts
• web/src/components/MemoEditor/README.md
• web/src/components/MemoEditor/Toolbar/EditorToolbar.tsx
• web/src/components/MemoEditor/Toolbar/FormattingToolbar.tsx
• web/src/components/MemoEditor/Toolbar/InsertMenu.tsx
• web/src/components/MemoEditor/Toolbar/VisibilitySelector.tsx
• web/src/components/MemoEditor/components/EditorContent.tsx
• web/src/components/MemoEditor/components/EditorMetadata.tsx
• web/src/components/MemoEditor/components/index.ts
• web/src/components/MemoEditor/formatting/commands.ts
• web/src/components/MemoEditor/hooks/index.ts
• web/src/components/MemoEditor/hooks/useAutoSave.ts
• web/src/components/MemoEditor/hooks/useEditorActiveState.ts
• web/src/components/MemoEditor/hooks/useFocusMode.ts
• web/src/components/MemoEditor/hooks/useMemoInit.ts
• web/src/components/MemoEditor/hooks/useMemoSave.ts
• web/src/components/MemoEditor/index.tsx
• web/src/components/MemoEditor/services/cacheService.ts
• web/src/components/MemoEditor/state/actions.ts
• web/src/components/MemoEditor/state/context.tsx
• web/src/components/MemoEditor/state/reducer.ts
• web/src/components/MemoEditor/state/types.ts
• web/src/components/MemoEditor/types/components.ts
• web/src/components/MemoEditor/types/editorController.ts
• web/src/components/MobileHeader.tsx
• web/src/components/PagedMemoList/PagedMemoList.tsx
• web/src/pages/Archived.tsx
• web/src/pages/Explore.tsx
• web/src/pages/Home.tsx
• web/src/pages/Inboxes.tsx
• web/src/pages/MemoDetail.tsx
• web/src/pages/Setting.tsx
• web/src/pages/UserProfile.tsx
• web/tests/editor-controller.test.ts
• web/tests/editor-keys.test.ts
• web/tests/editor.test.tsx
• web/tests/formatting-toolbar.test.tsx
• web/tests/memo-content-security.test.tsx
• web/tests/memo-editor-cache.test.ts

Purpose and Scope

This document covers the frontend memo management system, including the MemoEditor for creating and editing memos, the rendering pipeline for displaying memo content, the detail page with comment functionality, and the complete lifecycle of memo operations. For information about the backend memo service and API endpoints, see Memo Service For memo filtering and search functionality, see Filtering and Search For state management and data fetching patterns, see State Management

---

MemoEditor Component

The MemoEditor is the primary interface for creating and editing memos. It supports rich text input, auto-save to localStorage, focus mode for distraction-free writing, audio recording with AI transcription, and attachment handling.

Component Architecture

MemoEditor Component Architecture

Sources: web/src/components/MemoEditor/index.tsx21-54 web/src/components/MemoEditor/hooks/index.ts1-7 web/src/components/MemoEditor/services/index.ts1-5

Editor State Management

The editor uses a context-based state management pattern with the EditorProvider wrapping the implementation component web/src/components/MemoEditor/index.tsx21-25 State includes content, metadata, loading states, and UI flags like focus mode. typing changes are isolated from the shell to prevent unnecessary re-renders of the toolbar by using useEditorSelector for specific state slices web/src/components/MemoEditor/index.tsx43-47

State Property	Type	Purpose
content	string	Current memo text content
ui.isFocusMode	boolean	Focus mode active flag web/src/components/MemoEditor/index.tsx46
timestamps	object	createTime and updateTime web/src/components/MemoEditor/index.tsx93-96
metadata.relations	MemoRelation[]	Linked memos web/src/components/MemoEditor/Toolbar/InsertMenu.tsx48

Sources: web/src/components/MemoEditor/index.tsx42-54 web/src/components/MemoEditor/state/types.ts1-50 web/src/components/MemoEditor/state/context.tsx1-20

Auto-Save and Draft Persistence

The editor automatically saves content to localStorage using the useAutoSave hook and cacheService. The cache key is constructed from the user's name and a unique cacheKey prop web/src/components/MemoEditor/index.tsx66

• Persistence: Content is synced to localStorage to prevent data loss. useAutoSave subscribes to the store internally web/src/components/MemoEditor/index.tsx79-80
• Initialization: On mount, useMemoInit checks for cached content if no existing memo is provided, restoring the draft state web/src/components/MemoEditor/index.tsx68-76
• Cleanup: On successful memo save or manual cancellation, the cache is cleared via discardDraft web/src/components/MemoEditor/index.tsx80

Sources: web/src/components/MemoEditor/index.tsx79-81 web/src/components/MemoEditor/hooks/useAutoSave.ts1-20 web/src/components/MemoEditor/services/cacheService.ts1-20

Audio Recording and Transcription

The editor integrates a recording system that supports direct attachment or AI-powered transcription.

• Transcription: If an AI provider is configured and an API key is set, the transcriptionService can convert audio to text web/src/components/MemoEditor/index.tsx57-62 web/src/components/MemoEditor/index.tsx127
• Workflow: Recorded audio can be inserted at the current cursor position via editorRef.current.insertMarkdown(text) web/src/components/MemoEditor/index.tsx113-114
• State Integration: The editor blocks saves while the recorder is busy by mirroring audioRecorder.isBusy into the store web/src/components/MemoEditor/index.tsx170-172

Sources: web/src/components/MemoEditor/index.tsx117-165 web/src/components/MemoEditor/hooks/useAudioRecorder.ts1-30

Focus Mode

Focus mode provides a distraction-free writing experience by expanding the editor to fill the viewport and locking body scroll.

• Implementation: The useFocusMode hook manages the layout transition and returns a placeholderHeight to maintain layout stability web/src/components/MemoEditor/index.tsx82
• UI: The editor expands and applies specific styles defined in FOCUS_MODE_STYLES when isFocusMode is true web/src/components/MemoEditor/index.tsx46 web/src/components/MemoEditor/Editor/index.tsx90-93

Sources: web/src/components/MemoEditor/index.tsx82 web/src/components/MemoEditor/hooks/useFocusMode.ts1-15

---

MemoDetail Page

The MemoDetail page displays a single memo with its full context, including parent references and comments.

Page Architecture

MemoDetail Page Architecture

Sources: web/src/pages/MemoDetail.tsx35-62 web/src/pages/MemoDetail.tsx105-142

Comment System

Comments are memos that have a parent field set to the name of another memo.

• Fetching: The useInfiniteMemoComments hook retrieves all memos associated with a parent using infinite scroll web/src/pages/MemoDetail.tsx60-62
• Navigation: If a memo is a comment, a link to the parentMemo is displayed at the top of the page using ArrowUpLeftFromCircleIcon web/src/pages/MemoDetail.tsx108-120
• Sharing: In "Share Mode" (via a token), attachment links are rewritten using withShareAttachmentLinks to allow unauthenticated access web/src/pages/MemoDetail.tsx90-92

Sources: web/src/pages/MemoDetail.tsx30-44 web/src/pages/MemoDetail.tsx133-141

---

Memo Lifecycle Management

Memos are managed via React Query mutations which handle optimistic updates and cache invalidation.

Paged Memo Lists

The PagedMemoList component is used across Home, Explore, UserProfile, and Archived to display memo feeds with infinite scrolling and auto-fetching.

• Auto-Fetch: If the content doesn't fill the viewport, useAutoFetchWhenNotScrollable automatically triggers the next page load web/src/components/PagedMemoList/PagedMemoList.tsx50-112
• Hoisting: Freshly created memos are optimistically hoisted to the top of the list using hoistMemoToFront via the useNewMemo context web/src/components/PagedMemoList/PagedMemoList.tsx167-171
• Layout: Supports both standard flow layout and a multi-column grid (ColumnGrid) depending on maxColumns setting and viewport width web/src/components/PagedMemoList/PagedMemoList.tsx119-140

Sources: web/src/components/PagedMemoList/PagedMemoList.tsx146-172 web/src/pages/Home.tsx34-49 web/src/pages/Explore.tsx31-38

Editor Integration and Save Lifecycle

The useMemoSave hook encapsulates the logic for creating and updating memos.

• Save Workflow: The handleSave function (invoked via EditorToolbar) performs validation, constructs the request payload, and calls the gRPC service web/src/components/MemoEditor/index.tsx185-188
• Draft Management: Upon successful save, the discardDraft function is called to clear the localStorage cache web/src/components/MemoEditor/index.tsx80
• Metadata Handling: The editor supports attaching relations (linked memos) and locations during the creation process via the InsertMenu web/src/components/MemoEditor/Toolbar/InsertMenu.tsx43-53

Sources: web/src/components/MemoEditor/index.tsx185-200 web/src/components/MemoEditor/hooks/useMemoSave.ts1-40 web/src/components/MemoEditor/Toolbar/InsertMenu.tsx126-132