Vyuh Document

Toolbar shapes ​

Configure the compact toolbar through DocumentEditorConfiguration.toolbar: one or two rows, docked or floating, collapsible or not. On pages the toolbar always docks above the rulers; only a pageless editor floats it.

Anatomy of the toolbar A two-row toolbar. Each well holds the actions of one toolbar group. An action button runs one editor action. The paragraph-style menu gathers the paragraph and heading actions. Groups that do not fit fold into a More menu. A collapsible toolbar ends with a toggle that hides and shows the tools. Row one holds the history, insert, block and inline groups; row two holds paragraph, list, table, image and review. Heading 1 More 1 2 3 4 5 6 row one: history · insert · block · inline row two: paragraph · list · table · image · review 1 Rows rows: singleRow · doubleRow 2 Well one per ToolbarGroup 3 Action one EditorAction, by its id 4 Menu DocumentToolbarMenuConfiguration 5 More groups that don't fit fold here 6 Collapse toggle collapsible · initiallyExpanded
Anatomy of the toolbar
dart
import 'package:vyuh_document_editor/vyuh_document_editor.dart';

DocumentEditor buildToolbar(DocumentEditorController controller) =>
    DocumentEditor(
      controller: controller,
      configuration: DocumentEditorConfiguration(
        toolbar: DocumentToolbarConfiguration(
          rows: DocumentWorkspaceToolbarRows.doubleRow,
          placement: DocumentToolbarPlacement.floating,
          collapsible: true,
          initiallyExpanded: false,
          actionIds: {
            HistoryActionId.undo,
            HistoryActionId.redo,
            MarkActionId.bold,
            MarkActionId.italic,
            MarkActionId.underline,
          },
        ),
      ),
    );

Choose visible controls ​

The toolbar shows installed actions. actionIds and groups narrow them, and menus gather some into a single trigger.

How the toolbar picks its actions The toolbar starts from the installed actions in the registry. An action shows only if it is in actionIds, in one of the chosen groups, and admitted by the schema policy; a null set keeps every action. Menus then claim the actions they list, first match wins, and the rest become direct buttons in their group's well. Installed actions actionIds null keeps all groups ToolbarGroup set Schema policy admitted content menus first match claims 1 2 3 4 An action shows only if it passes every filter. claimed the rest Buttons in their group's well Menu trigger one per menu Hiding an action does not disable it: use policy.disabledActionIds for that.
How the toolbar picks its actions

Action IDs are typed: each owner declares its own set (HistoryActionId.undo, MarkActionId.bold, TableActionId.insert, KatexActionId.insert), so a toolbar can only name an action that exists. See Typed identifiers.

Hiding is not disabling. Use configuration.policy to disable actions and configuration.shortcuts for keyboard overrides.

DocumentToolbarConfiguration.menus takes DocumentToolbarMenuConfigurations. Each picks action IDs or groups, a label and a placement group; useActiveLabel shows the selected action on the trigger. An action in a menu is not also a button, and an empty menu disappears.

The default menu, DocumentToolbarMenuConfiguration.paragraphStyle, holds the paragraph and heading actions and previews each level's typography. Pass menus: const [] for one button per action.

Toolbar surface ​

decoration draws the toolbar's own surface. Every kind keeps the same insets, so tools never move when you switch.

DecorationDrawsUse it
DocumentToolbarDecoration.divider()One rule under the toolsInside a bordered card (docked default)
DocumentToolbarDecoration.filled(radius:)A quiet tone fillDocked on a plain background
DocumentToolbarDecoration.elevated(radius:)A card with one soft shadowFloating (floating default)
DocumentToolbarDecoration.outlined(radius:)A card with a hairline outlineStandalone on a plain background
DocumentToolbarDecoration.none()NothingA host that frames the tools itself

Pass the host's corner radius as radius to match it.

dart
DocumentEditorConfiguration(
  toolbar: DocumentToolbarConfiguration(
    collapsible: true,
    // Inside a rounded card: no second outline beside the card's own border.
    decoration: const DocumentToolbarDecoration.divider(),
  ),
)

Keyboard editing ​

ActionShortcut
Bold / italic / underlineCommand or Ctrl + B / I / U
Undo / redoCommand or Ctrl + Z / Shift + Z
LinkCommand or Ctrl + K
Extend selectionShift + arrow keys
Paragraph / line breakEnter / Shift + Enter

Focus ​

Formatting actions keep typing focus. Set DocumentEditor(autofocus: true) to start ready to type, or pass your own focusNode and restore it after your dialogs. The link action needs a link request handler.

Next ​