Format Toolbar

Rich text formatting toolbar with headings, marks, lists, callouts, and table row and column actions.

Also known as: rich text toolbar, formatting toolbar, editor toolbar, wysiwyg toolbar, text formatting bar

Installation

Install with the CLI, or copy the component source into your project.

Add format-toolbar (npm)

npx --yes -p @default-file/ui df-ui add format-toolbar

Overview

Formatting toolbar with headings, marks, lists, quote, callout, code, rule, and a table menu that picks a size on insert and edits rows and columns after.

Toolbar chrome with a sample controller. Wire a host controller in product code. Callouts: note, tip, important, warning, caution.

Live editor

Toolbar wired to an editable sample. Select text and try each control.

Format toolbar

Select text and use the controls. Try bold, italic, lists, and tables.

  • Review the toolbar

  • Complete a task item

  • Bullet item

  • Another item

Column AColumn B
cell onecell two

Properties

Rich text formatting toolbar for editor surfaces. Host owns document state through a controller.

FormatToolbar

PropTypeDefaultNotes
controllerFormatToolbarController | null-Command surface for formatting actions and pressed states. Pass null while the editor is unavailable.
disabledbooleanfalseDisables every control.
lockedbooleanfalseBlocks 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.
classNamestring-Additional styles on the toolbar root.

Types and constants

FORMAT_TOOLBAR_CALLOUT_TYPES is the callout list (note, tip, important, warning, caution). FormatToolbarCalloutType is that union. FormatToolbarQuery covers isActive queries (bold, italic, strike, inlineCode, link, heading, paragraph, bulletList, orderedList, taskList, blockquote, callout, codeBlock, table). FormatToolbarAttrs holds optional heading level and callout type for those queries.

FormatToolbarController

Host-owned command surface. Wire each method to the current selection and document. Block transforms no-op inside tables; marks and links apply in table cells.

PropTypeDefaultNotes
isActive(query: FormatToolbarQuery, attrs?: FormatToolbarAttrs) => boolean-Pressed state for a formatting query.
getLinkHref() => string | null-Current link href at the selection, if any.
toggleHeading(level: 1 | 2 | 3) => void-Toggle heading level 1, 2, or 3 at the selection.
toggleBold() => void-Toggle bold at the selection.
toggleItalic() => void-Toggle italic at the selection.
toggleStrike() => void-Toggle strikethrough at the selection.
toggleInlineCode() => void-Toggle inline code at the selection.
setLink(href: string) => void-Apply a link href to the selection.
unsetLink() => void-Remove the link at the selection.
toggleBulletList() => void-Toggle a bullet list at the selection.
toggleOrderedList() => void-Toggle an ordered list at the selection.
toggleTaskList() => void-Toggle a task list at the selection.
toggleBlockquote() => void-Toggle a block quote at the selection.
setCallout(type: FormatToolbarCalloutType) => void-Apply a callout type at the selection.
unsetCallout() => void-Clear the callout at the selection.
toggleCodeBlock() => void-Toggle a code block at the selection.
insertHorizontalRule() => void-Insert a horizontal rule after the current block.
insertTable(rows?: number, columns?: number) => void-Insert a table after the current block. Rows include the header row. Omit both values to use the host default. Replaces an empty paragraph in place.
addTableRow() => void-Add a row after the current table row.
addTableColumn() => void-Add a column after the current table column.
deleteTableRow() => void-Delete the current table row. Deletes the table when it is the last row.
deleteTableColumn() => void-Delete the current table column. Deletes the table when it is the last column.
deleteTable() => void-Delete the current table.
subscribe(listener: () => void) => () => void-Subscribe to selection and document updates so pressed states refresh.