@agala-labs/ui
Markdown Editor
Edits and safely previews a focused subset of Markdown.
Examples
Default
Build interfaces with semantic tokens and accessible Vue components.
<AgalaMarkdownEditor v-model="description" preview="split" />Import
import { AgalaMarkdownEditor, AgalaMarkdownPreview } from '@agala-labs/ui'API
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | — | Markdown source. |
preview | 'tab' | 'split' | 'none' | 'tab' | Preview presentation. |
toolbar | boolean | true | Shows formatting actions. |
rows | number | — | Editor height in rows. |
maxlength / showCount | number / boolean | — | Length limit and counter. |
disabled | boolean | false | Disables editing. |
error / errorMessage | boolean / string | — | Validation state and copy. |
source | string | — | MarkdownPreview source. |
Events
update:modelValue(value: string)
Slots
No public slots
Accessibility
Toolbar controls have labels; preview exposes a configurable accessible label.