🏠 Overview › 🧩 Components ›🧩 NoteEditorScreen

NoteEditorScreen

Component Detail

User Interface medium complexity mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

Full-screen text editing interface for creating and updating notes. Renders an optional title field and a free-form plaintext body input with auto-save feedback indicators. Meets WCAG 2.2 AA requirements including minimum font size, sufficient contrast ratios, and a visible focus indicator for keyboard and switch-access users.

Feature: Note Editor

note-editor-screen

Sources & reasoning

Same matrix evidence as Notes List - all organizations, Phase 2 (v1.0). The Note Editor is the companion write screen; the two features are split per the blueprint's explicit decomposition of the Notes area into separate list and editor features, each with a distinct component set.

Responsibilities

  • Render title and body text input fields with accessible labels and focus indicators
  • Display auto-save status feedback to the user without interrupting editing
  • Provide a back button that navigates to the Notes List screen
  • Apply WCAG 2.2 AA contrast and font-size constraints to all visible text
  • Delegate all user input events to NoteEditorController

Interfaces

render(note: Note | null): void
showSaveIndicator(state: 'saving' | 'saved' | 'error'): void
onTitleChange(text: string): void
onBodyChange(text: string): void
onBackPressed(): void