Rich text formatting toolbar with headings, marks, lists, callouts, and tables.
Install with the CLI, or copy the component source into your project.
Add format-toolbar (npm)
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add format-toolbar
Formatting toolbar with headings, marks, lists, quote, callout, code, rule, and table actions.
Toolbar wired to an editable sample. Select text and try each control.
Select text and use the controls. Try bold, italic, lists, and tables.
Bullet item
Another item
Rich text formatting toolbar for editor surfaces. Hosts own document state through a controller. Supports headings, marks, lists, quote, callout (with None to clear), code, rule, and table actions.
| Prop | Type | Default | Notes |
|---|---|---|---|
| controller | FormatToolbarController | null | - | Command surface for formatting actions and pressed states. Pass null while the editor is unavailable. |
| disabled | boolean | false | Disables every control. |
| locked | boolean | false | Blocks edits and reports lock attempts when a control is pressed. |
| onLockedEditAttempt | (clientX: number, clientY: number) => void | - | Called when a locked control is pressed. Use for unlock hints. |
| isValidHref | (href: string) => boolean | - | Validates link URLs before Apply. Defaults to http, https, and mailto. |
| calloutLabel | (type: FormatToolbarCalloutType) => string | - | Label for each callout option in the callout menu. |
| className | string | - | Additional styles on the toolbar root. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| isActive | (query, attrs?) => boolean | - | Pressed state for a formatting query. |
| getLinkHref | () => string | null | - | Current link href at the selection, if any. |
| subscribe | (listener) => () => void | - | Subscribe to selection and document updates so pressed states refresh. |
| toggleHeading / toggleBold / … | () => void | - | Formatting commands for headings, marks, lists, quote, callout, code, rule, and tables. |