Vyuh Document

Editor widget ​

DocumentEditor from package:vyuh_document_editor/document_editor.dart takes three independent settings: the controller (content), the surface (where it shows) and the chrome (which controls).

The three settings of DocumentEditor DocumentEditor takes three independent settings. The controller carries the content: a DocumentController over a DocumentConfiguration of elements and marks. The surface decides where it shows: line, field, pageless or pages. The chrome decides which controls show: none, a floating bubble, a toolbar row or the full toolbar. CONTENT DocumentConfiguration which elements and marks DocumentController document · selection · undo SURFACE · WHERE IT SHOWS .line()one line .field()grows, then scrolls .pageless()one column .pages()pages (default) CHROME · WHICH CONTROLS .nonenone (default) .floatingformat bubble .toolbar(…)a row of parts .fullevery command controller: surface: chrome: DocumentEditor
The three settings of DocumentEditor
dart
DocumentEditor(
  controller: controller,                                   // content
  surface: const DocumentSurface.field(minLines: 3, maxLines: 8),
  chrome: EditorChrome.floating,
  focusNode: focusNode,                                     // optional
  autofocus: true,
);

Try them live: line, field, notes, pages.

Anatomy of the full editor ​

With every part of the chrome switched on, the editor becomes a workspace.

Anatomy of the editor workspace A wireframe of the full editor workspace. The document row holds the title, the application menus, search and the mode menu. The tools row below holds wells of tools and a More menu. Rulers frame the page canvas, a sidebar shows outline, comments and properties, and a footer runs along the bottom. Q3 report File Edit Insert Format Review View Search Editing Normal More Outline Comments Properties Page 1 of 4 100% 1 2 3 4 5 6 7 8 1 Document row title · menus · search DocumentWorkspaceToolbar 2 Tools row follows the selection DocumentToolbarWell 3 Rulers margins · indents · tabs DocumentRulerFrame 4 Page canvas the pages, as printed DocumentEditor 5 Footer your status widget footer: 6 Mode menu editing · suggesting · … DocumentInteractionMode 7 More menu tool groups that don't fit DocumentToolbarFold 8 Sidebar comments · properties DocumentSidebarTab
The full editor workspace

Surfaces ​

DocumentSurfaceShows
.line(onSubmit:)One line; Enter calls onSubmit
.field(minLines: 1, maxLines:)Grows with its content, then scrolls
.pageless(maxWidth:)A continuous column
.pages()Physical pages, as printed (default)

Switching between pageless and pages keeps the selection, the reading position and the undo history.

Chrome ​

EditorChromeShows
EditorChrome.noneThe document alone (default)
EditorChrome.floatingA format bubble over a text selection
EditorChrome.toolbar(Toolbar([...]))A toolbar row of typed parts
EditorChrome(toolbar:, bubble:)A row and a bubble
EditorChrome.fullThe whole command toolbar, with rulers over pages

Toolbar parts ​

PartShown when the configuration has
BoldButton, ItalicButton, UnderlineButton, StrikeButton, SuperscriptButton, SubscriptButtonThat mark
LinkButtonAny mark
HeadingButton(level:)Heading
ListButton(ordered:)ListItem
TableButtonTable
UndoButton, RedoButtonAlways

Toolbar.formatting and Toolbar.standard are presets. A part runs the same command as its shortcut and the command palette. Toolbars, menus, shortcuts and paste offer only the configuration's elements.

LinkButton and Command/Ctrl + K open the link dialog for the selection. Hover a link, or move the caret into it, to open, copy, edit or remove it.

Host bindings ​

For image resolvers, fonts, your own link dialog, review modes, PDF export or the Properties inspector, use DocumentEditorController with DocumentEditor from vyuh_document_editor.dart. The tutorial shows the switch.

Next ​