139Rich text
Writing chrome: a quiet icon toolbar over the writing area. Active marks are aria-pressed with the standard brand-tint treatment; the area reads with body type, because lesson prose should look like lesson prose while being written.
Use it for
- Lesson bodies, course descriptions — anywhere an author writes prose
Not for
- Single-line values or plain textareas
- Code editing — CodeBlock renders code, your editor edits it
Toolbar + area
Lightning Experience organizes everything you do into apps — a named collection of tabs.
markup
<div class="ns-rte" style="inline-size:100%">
<div class="ns-rte__bar" role="toolbar" aria-label="Formatting">
<button type="button" class="ns-rte__btn" aria-label="Bold" aria-pressed="false"><i class="ph ph-text-b" aria-hidden="true"></i></button>
<button type="button" class="ns-rte__btn" aria-label="Italic" aria-pressed="false"><i class="ph ph-text-italic" aria-hidden="true"></i></button>
<span class="ns-rte__gap" aria-hidden="true"></span>
<button type="button" class="ns-rte__btn" aria-label="Heading 2" aria-pressed="true"><i class="ph ph-text-h-two" aria-hidden="true"></i></button>
<button type="button" class="ns-rte__btn" aria-label="Bulleted list" aria-pressed="false"><i class="ph ph-list-bullets" aria-hidden="true"></i></button>
<span class="ns-rte__gap" aria-hidden="true"></span>
<button type="button" class="ns-rte__btn" aria-label="Code block" aria-pressed="false"><i class="ph ph-code" aria-hidden="true"></i></button>
<button type="button" class="ns-rte__btn" aria-label="Link" aria-pressed="false"><i class="ph ph-link" aria-hidden="true"></i></button>
</div>
<div class="ns-rte__area" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Lesson body" style="min-block-size:8rem">
<p>Lightning Experience organizes everything you do into apps — a named collection of tabs.</p>
</div>
</div>Accessibility contract
- role=toolbar groups the buttons; every button has a label
- Active formatting is aria-pressed — seen and announced state agree