Workspace and inspector

You will build a full document workbench: the editor with a Properties inspector beside it, zoom, rulers and formatting marks.

Packages

None new: the workspace lives in vyuh_document_editor (package:vyuh_document_editor/document_editor_workspace.dart).

The code

import 'package:flutter/material.dart';
import 'package:vyuh_document_editor/document_editor_workspace.dart';
import 'package:vyuh_document_editor/vyuh_document_editor.dart';

/// The editor with a Properties inspector beside it.
class DocumentWorkbench extends StatefulWidget {
  const DocumentWorkbench({super.key, required this.controller});

  final DocumentEditorController controller;

  @override
  State<DocumentWorkbench> createState() => _DocumentWorkbenchState();
}

class _DocumentWorkbenchState extends State<DocumentWorkbench> {
  final session = DocumentEditorWorkspaceSession();
  final zoom = ValueNotifier<double>(1);
  final properties = DocumentPropertiesWorkspaceController(
    registry: standardDocumentPropertiesRegistry(),
  );
  var showRulers = true;
  var rulerUnit = DocumentRulerUnit.centimeters;
  var showMarks = false;

  @override
  void dispose() {
    properties.dispose();
    zoom.dispose();
    session.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => ValueListenableBuilder<double>(
    valueListenable: zoom,
    builder: (context, currentZoom, _) => DocumentEditorWorkspaceScaffold(
      session: session,
      zoom: zoom,
      onZoomChanged: (value) => zoom.value = value,
      compact: false,
      showInspector: true,
      inspectorWidth: 320,
      onInspectorClosed: () {},
      inspector: DocumentPropertiesWorkspace(
        controller: widget.controller,
        workspace: properties,
        configuration: const DocumentInspectorConfiguration.standard(),
        onSectionFormatChanged: widget.controller.setSectionFormat,
        showRulers: showRulers,
        onShowRulersChanged: (value) => setState(() => showRulers = value),
        rulerUnit: rulerUnit,
        onRulerUnitChanged: (value) => setState(() => rulerUnit = value),
        showFormattingMarks: showMarks,
        onShowFormattingMarksChanged: (value) =>
            setState(() => showMarks = value),
      ),
      main: DocumentEditor(controller: widget.controller, zoom: currentZoom),
    ),
  );
}

You see the document with a 320-point Properties panel. Select a paragraph, table or image: the panel shows its properties, and every change goes through the same controller and undo history.

The scaffold's slots

From selection to command

Building blocks

Component	Role
DocumentEditorWorkspaceScaffold	Places the editor, optional header (primaryToolbar), status, inspector and footer. Omitted parts take no space.
DocumentEditorWorkspaceSession	Coordinates panels across document loads; call commitDocumentIdentity(document) after opening a document.
DocumentPropertiesWorkspace	The Properties inspector for the current selection.
DocumentPropertiesWorkspaceController	The inspector's navigation over a DocumentPropertiesRegistry (standardDocumentPropertiesRegistry()).
DocumentInspectorConfiguration	Hide fields or make them read-only by address. See Property inspector.
DocumentEditorWorkspaceRibbon	The full ribbon.
DocumentExportMenu	Export controls wired to your own effects.
DocumentEditorTheme	The editor theme; pass DocumentEditorTheme.light().materialTheme (and .dark()) to MaterialApp from package:material_ui.

The playground's full surface is built from these parts: open it.

You are done

You now have every layer: a typed controller, element packages, the editor runtime, pages, review, formats, graphics and the workspace. Next:

• API reference: every public type by package.
• Build an extension or declare an element.