A highlight is the line the reader should walk away with. The author types it in place; its alignment is in the inspector. Anything longer than a sentence belongs in a paragraph.
Settings
Select a block to see its settings.
Setting it up
createEmailFeatures() includes it. To add it to
another list of features:
import { createContentFeatures, highlightFeature } from "@voila.dev/ui/content-editor";
const features = [...createContentFeatures(), highlightFeature];Typing
- Highlight in the slash menu or the toolbar's insert menu turns the current block into a highlight and keeps its text.
- Enter ends the highlight and starts a paragraph. Enter on an empty highlight, or Backspace at its start, turns it back into a paragraph.
- Shift+Enter breaks the line inside it.
Fields
| Field | Values | Default |
|---|---|---|
align | "left", "center", "right" | "center" |
The stored node
{ "type": "highlight", "align": "center", "children": [{ "text": "10% off with LAUNCH10" }] }The web reader writes <p class="highlight" style="text-align:center"><strong>…</strong></p>.
highlightReader is the reader alone, from @voila.dev/ui/content-editor/reader.
The email block editor's highlight block maps one to one: its text becomes
the node's text and align stays align.
Labels
The item is items.highlight; the field is fields.align, its options
fields.alignLeft, fields.alignCenter and fields.alignRight.