Components
Rich course and lesson content
Support formatted descriptions and instructions through the actual Trix editor and rendered-content styles.
On this page
Purpose and usage
Support formatted descriptions and instructions through the actual Trix editor and rendered-content styles.
Anatomy
| Part | Contract |
|---|---|
| Toolbar | Source Trix controls |
| Editable surface | Client-loaded editor |
| Stored value | HTML representation |
| Rendered panel | trix-content typography |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| Client loading | Dynamic import and mount behavior |
| Attachment control | File-tools toolbar hidden globally |
| Content trust | Input/render sanitation belongs to surrounding workflow |
State coverage
| State | Implemented behavior |
|---|---|
| Loading | Real loading placeholder |
| Editing | Rich input surface |
| Viewing | HTML displayed in content panel |
Interaction and composition
- Await editor hydration and actual content before capture.
- Do not use screenshots of a loading editor as the finished applied example.
- Keep heading, link and list formatting readable in learner views.
- Hiding attachment controls is not authorization for file endpoints.
Accessibility and readiness
Keyboard toolbar use, selection, screen-reader announcements and HTML sanitation require manual validation. A hidden toolbar group does not disable every programmatic attachment path. The capture uses real course text with no server saves.
Source references
| File | Responsibility |
|---|---|
| src/components/TrixEditor.tsx | Client rich editor |
| src/components/TrixEditorWrapper.tsx | Wrapper |
| src/components/courses-public/logged-in/CourseInformationTabs.tsx | Rendered HTML context |
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