Editor.Toolbar
The top action bar - undo, redo, add image / text / shape, draw, preview, print, download. Composable; drop in only what you need.
Editor.Toolbar is the default top action bar. Mount it with no children and you get the bundled layout; mount it with explicit children and you get a custom toolbar with the same context wiring.
Usage
<Editor.Root>
<Editor.Toolbar />
</Editor.Root>Composition
Pass children to override the default layout. Each button is also exported individually so you can compose your own:
<Editor.Toolbar>
<Editor.UndoButton />
<Editor.RedoButton />
<Editor.AddImageButton />
<Editor.AddTextButton />
<Editor.DrawButton />
<Editor.FileSizeBadge />
<Editor.PreviewButton />
<Editor.DownloadButton />
</Editor.Toolbar>In readOnly mode, the mutating buttons (Undo, Redo, Add*, Draw) hide themselves automatically; the read-only buttons (Preview, Print, Download) stay live.
Examples
Minimal toolbar - just download
<Editor.Toolbar>
<Editor.DownloadButton />
</Editor.Toolbar>Custom toolbar with your own buttons
Use the headless hook and dispatch actions directly from your own button.
import { useEditor } from '@docmosaic/react';
function SaveButton() {
const { state } = useEditor(); // `state` is the current Document
return <button onClick={() => save(state)}>Save</button>;
}
<Editor.Toolbar>
<Editor.UndoButton />
<Editor.RedoButton />
<SaveButton />
</Editor.Toolbar>;API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Optional children. When provided, the toolbar renders the inverse default layout and shows whatever children the caller passes. When omitted, falls back to the bundled default layout
|
Related
- DownloadButton - the PDF/PNG export trigger
- GenerationProgress - progress overlay
- FileSizeBadge - live estimate pill