Markdown-backed rich text surface with optional static and floating format toolbars.
Also known as: markdown editor, rich text, contenteditable
Install with the CLI, or copy the component source into your project.
Add editor (npm)
1npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add editor
Markdown-backed rich text surface with optional static and floating format toolbars.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | - | Controlled Markdown document (required). |
| onChange | (markdown: string) => void | - | Called with serialized Markdown after edits settle. |
| placeholder | string | - | Empty-state hint. Defaults to the kit string catalogue. |
| readOnly | boolean | false | Blocks edits and hides interactive toolbar controls. |
| minHeight | string | - | CSS length applied to --df-editor-min-height for this instance. |
| toolbar | "static" | "floating" | "both" | "none" | "both" | static pins a format bar above the surface. floating shows a selection toolbar. both enables both. none hides kit chrome. |
| autoFocus | boolean | false | Focus the editable surface on mount. |
| aria-label | string | - | Accessible name for the editable surface. Defaults to the kit string catalogue. Override when the host already names the field with a visible Label. |
| className | string | - | Additional styles on the root. |
Editable name: The contenteditable surface uses aria-label (catalogue default, or your override). Format toolbars use catalogue labels for icon-only controls. Prefer a visible Label with htmlFor only when you wrap a separate form control; this surface is not a native input.