Vyuh Document

Headers, footers, and workspace chrome ​

Two different things sit around a document: the workspace chrome your app shows around the editor, and the page regions (headers and footers) that belong to the document itself.

Compose surrounding controls ​

DocumentEditor works on its own, with no chrome. To add your own controls, place it in DocumentEditorWorkspaceScaffold.

The workspace scaffold The host owns the controller, the workspace session and the zoom notifier and passes them to DocumentEditorWorkspaceScaffold. The scaffold stacks optional slots: primaryToolbar, status and compactEditingToolbar on top, then the main editor beside an optional inspector, then an optional footer. Omitted slots take no space. THE HOST OWNS Controller DocumentEditorController Session panels across loads Zoom ValueNotifier<double> Dashed slots are optional; an omitted slot takes no space. WORKSPACE SCAFFOLD DocumentEditorWorkspaceScaffold primaryToolbar your header, or the ribbon status a status line compactEditingToolbar an editing row main DocumentEditor(controller: …) inspector inspectorWidth left or right side footer your footer
The scaffold's slots
dart
import 'package:flutter/material.dart';
import 'package:vyuh_document_editor/document_editor_workspace.dart';
import 'package:vyuh_document_editor/vyuh_document_editor.dart';

Widget composeDocumentWorkspace({
  required DocumentEditorController controller,
  required DocumentEditorWorkspaceSession session,
  required ValueNotifier<double> zoom,
  Widget? header,
  Widget? footer,
}) => ValueListenableBuilder<double>(
  valueListenable: zoom,
  builder: (context, currentZoom, _) => DocumentEditorWorkspaceScaffold(
    session: session,
    zoom: zoom,
    onZoomChanged: (value) => zoom.value = value,
    compact: false,
    primaryToolbar: header,
    footer: footer,
    showInspector: false,
    inspectorWidth: 320,
    onInspectorClosed: () {},
    main: DocumentEditor(controller: controller, zoom: currentZoom),
  ),
);

// Pass no header/footer for a chrome-free embed.
// Supply application widgets to surround the same editor when needed.
// The host owns and disposes controller, session, and zoom.

The host keeps the controller, session and zoom notifier and disposes them when it closes. After loading a document, call session.commitDocumentIdentity(controller.document).

Author page headers and footers ​

Headers and footers are document content: PageHeaderFooter stories on a section's SectionFormat. They lay out, export and edit like body text.

Anatomy of a page A page has margins around its body. The header sits in the top margin and the footer in the bottom margin; both are stories of blocks. The body flows in columns, and footnotes sit at the bottom of the body. A section can give its first page and its even pages their own header and footer, and every other page uses the default header and footer. All of these live on SectionFormat. Employee handbook Page 2 Header a story of blocks Margins PageMargins Body in columns SectionColumns Footnotes bottom of the body Footer a story of blocks HEADER AND FOOTER VARIANTS First page firstPageHeader firstPageFooter when differentFirstPage Even pages evenPageHeader evenPageFooter when odd and even pages differ Every other page header footer the default stories All six are fields of SectionFormat.
Anatomy of a page
dart
import 'package:vyuh_document_editor/vyuh_document_editor.dart';

Document documentWithPageStories() => Document(
  metadata: const DocumentMetadata(title: 'Project notes'),
  sections: [
    DocumentSection(
      id: 'main',
      format: SectionFormat(
        header: PageHeaderFooter(
          blocks: [
            ParagraphBlock(
              id: 'header-text',
              children: [TextRun(text: 'Project notes')],
            ),
          ],
        ),
        footer: PageHeaderFooter(
          blocks: [
            ParagraphBlock(
              id: 'footer-text',
              children: [TextRun(text: 'Internal draft')],
            ),
          ],
        ),
      ),
      blocks: [
        ParagraphBlock(
          id: 'body-text',
          children: [TextRun(text: 'Body text')],
        ),
      ],
    ),
  ],
);

void editPageHeader(DocumentEditorController controller) {
  controller.focusPageRegion(sectionIndex: 0, region: PageRegionKind.header);
}

Focus a story with controller.focusPageRegion(sectionIndex: 0, region: PageRegionKind.header) (or .footer). Workspace widgets never appear on exported pages.

Next ​