Patterns
Edit video and learning content
Manage a lesson’s media and description without collapsing its action/resource context into a generic text field.
On this page
Workflow
| Step | Responsibility |
|---|---|
| 1 | Open the actual lesson editing panel. |
| 2 | Choose provider or edit the supported embed code. |
| 3 | Preserve title, duration and actual description. |
| 4 | Manage actions, links and downloads in their respective sections. |
| 5 | Validate the embed and URL fields before the parent save. |
Decisions and composition
- The video-lessons page has an iframe-domain allowlist.
- Links and downloads have separate labels and semantics.
- Content order and stable lesson ID belong to the parent.
Errors, recovery and limits
- Provider search/loading/failure are separate states from saving a course.
- No artificial action items or downloads are added to the real course fixture.
- Trix hydration must finish before capturing the editor.
- Do not execute uploads or external integrations to fill an example.
Source references
| File | Responsibility |
|---|---|
| src/components/LessonItem.tsx | Editing panel |
| src/components/TrixEditor.tsx | Rich content |
| src/components/SortableLesson.tsx | Order |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1