Components
Rich lesson text
Trix editing inside the new course and lesson layouts.
On this page
Purpose and composition
TrixEditor wraps the editor’s hidden input and custom element. Lesson text and course instructions reuse it.
Anatomy
- Formatting toolbar
- Editable document
- Hidden input value
Configuration and variants
| Input or variant | Contract |
|---|---|
| value | Initial HTML; the current wrapper does not resynchronize later value changes automatically. |
| onChange | Receives HTML on trix-change. |
| id | Associates the hidden input with the editor instance. |
States and feedback
The editor loads on the client. Source global CSS hides the file-tools group; verify CSS import order when embedding Trix. Lesson downloads have their own tab.
Interaction and responsive behavior
Changing the selected record requires deliberate editor initialization/remounting. Keep formatting controls within the source Trix surface.
Accessibility and known limits
The parent must establish a label and a trusted HTML boundary. Dark mode includes source toolbar adjustments; verify toolbar focus and text contrast in both themes.
Source references
| File | Responsibility |
|---|---|
| src/components/TrixEditor.tsx | Editor initialization |
| src/components/TrixEditorWrapper.tsx | Client wrapper |
| src/app/globals.css | Trix theme treatments |
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.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0