Rich Text Editor
Write formatted prose with headings, emphasis and a selection toolbar.
use blinc_layout::prelude::*;
pub fn rich_text_editor_demo(
document: blinc_layout::widgets::rich_text_editor::RichTextState,
viewport: (f32, f32),
) -> Div {
div()
.class("demo-wide")
.child(blinc_layout::widgets::rich_text_editor::rich_text_editor(
&document,
blinc_layout::widgets::rich_text_editor::RichTextTheme::default(),
(viewport.0 - 80.0).clamp(1.0, 380.0),
))
}
@layer components {
.blinc-rich-text {
color: var(--text-primary);
}
.blinc-rich-text-marker {
color: var(--text-tertiary);
}
.blinc-rich-text-quote-bar {
background: var(--border-secondary);
}
.blinc-rich-text-divider {
background: var(--border);
}
.blinc-rich-text-code {
color: var(--warning);
}
.blinc-rich-text-selection {
background: var(--selection);
}
.blinc-rte-toolbar {
background: var(--surface-elevated);
color: var(--text-primary);
border-color: var(--border);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.blinc-rte-separator {
background: var(--border);
}
.blinc-rte-button:hover,
.blinc-rte-pill:hover {
background: var(--border);
}
.blinc-rte-pill {
background: var(--surface-overlay);
}
.blinc-rte-swatch {
border-color: var(--border-secondary);
}
.blinc-rte-swatch--default {
background: var(--text-primary);
}
.blinc-rte-link-input {
background: var(--surface);
border-color: var(--border-secondary);
}
.blinc-rte-link-placeholder {
color: var(--text-tertiary);
}
}
Usage and properties
Write formatted prose with headings, emphasis and a selection toolbar. This built-in widget is provided by blinc_layout; the polished action controls in the example use blinc_cn.
Use the installation guide to create a Blinc application. This widget is available from blinc_layout; the demo uses the same Hybrid theme as the component library. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.
| Property | Type | Update model | This example |
|---|---|---|---|
document | RichTextState | Shared document | values.document |
theme / width | RichTextTheme / f32 | Construction | default / container width |
Keyboard and interaction
Click to focus, type and select text. Use arrows, Enter, Backspace and the editor’s formatting shortcuts; see the guide below.
Customizing it
Add application CSS after the default component layer. These selectors are the restyling surface for this component:
.blinc-rich-text
Theme and component variables: --primary, --text-primary, --text-secondary, --surface, --border, --radius-default, --duration-fast, --ease-state.
Built-in themes
The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.
pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
match name {
"restrained" => blinc_theme::RestrainedTheme::bundle(),
"expressive" => blinc_theme::ExpressiveTheme::bundle(),
_ => blinc_theme::HybridTheme::bundle(),
}
.with_css(blinc_cn::cn_styles::CN_STYLES)
}Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.
Documentation
From the canonical component guide.
The built-in editor stores a structured document and supports selection, formatting and keyboard editing. Create its shared document once outside the UI builder so resizes and theme changes preserve edits.
use blinc::layout::prelude::*;
use blinc::layout::widgets::rich_text_editor::{
RichDocument, RichTextTheme, rich_text_editor, rich_text_state,
};
use blinc::core::Color;
let document = rich_text_state(RichDocument::from_markdown(
"## Your ideas\n\nWrite **something meaningful**.", Color::TRANSPARENT,
));
let editor = rich_text_editor(&document, RichTextTheme::default(), 380.0);
Transparent document colours inherit the editor's CSS text colour. Explicit span colours are document formatting and remain explicit when the theme changes.
The editor supports pointer selection, arrow navigation, typing, Enter, Backspace and platform editing shortcuts. Focus the editor before using formatting shortcuts. The shared document holds the content; derive application feedback from document changes rather than rebuilding the editor for every keystroke.
Restyle .blinc-rich-text using application CSS after the widget layer:
.blinc-rich-text {
color: var(--text-primary);
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
Platforms and version
The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.
Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 320 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.