Active lesson editor

One focused editing surface with content-specific tabs and visible save state.

On this page

Purpose and composition

LessonItem edits one selected lesson inside the redesigned builder. The parent owns the curriculum, identity, and persistence queue.

Anatomy

Active lesson heading
Video, Lesson text, Action Items, Links, and Downloads tabs
Tab-specific fields and actions
Inline recovery message
Delete lesson control

Configuration and variants

Configuration and variants
Input or variant	Contract
Lesson data	ID, revision, title, embed, duration, HTML, actions, links, and downloads.
onChange	Reports local edits; the parent queues revision-aware writes.
File lifecycle	onFileOperationStart / End coordinate upload work with the parent.
Uploads	The UI limits a lesson to five files and 2MB per file; server validation remains authoritative.

States and feedback

Every content tab is captured. A simulated stale-write response produces the native blocked-edit message while keeping the local work visible.

Interaction and responsive behavior

The editor changes with the active lesson. Action/link/file controls stay inside the relevant tab. Deleting uses confirmation and parent persistence.

Accessibility and known limits

Tab-like buttons expose aria-pressed, not a full ARIA tablist. Error text must remain visible and actionable; do not replace a failed write with a success badge.

Source references

Source references
File	Responsibility
src/components/LessonItem.tsx	Active editing surface
src/app/make-class/[classId]/video-lessons/page.tsx	Selection and persistence

Interface examples

Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.