Vyuh Document

Choose extensions ​

Pass an ordered extension set when you create the controller. Extensions install capabilities; the schema narrows what they admit.

Anatomy of an element extension An element ships as two packages. The pure-Dart element package holds the element definition with its schema type and JSON, its commands, the typed element, codec contributions for DOCX, Markdown and HTML, and a layout adapter whose paint artifact PDF and print reuse. The Flutter editor package uses it and adds the DocumentExtension, typed action IDs, toolbar actions, inspector properties and presentation. The host installs the extension on DocumentEditorController, which registers the editor facets into the ElementRegistry and the definition into the DocumentElementRegistry. Codec contributions are passed to the codecs. ELEMENT PACKAGE · PURE DART vyuh_document_extension_<name> Element definition schema type · JSON · where it may appear Commands methods on DocumentCommandTarget Typed element Element<T> in element.dart Codec contributions docx.dart markdown.dart html.dart Layout adapter geometry, and the paint PDF and print reuse EDITOR PACKAGE · FLUTTER vyuh_document_extension_<name>_editor DocumentExtension definition · register(ElementRegistry) Action IDs enum MyActionId implements EditorActionId Actions EditorAction.toolbar(id: …) Inspector properties ElementPropertiesContribution Presentation block and inline views · menus uses Codecs DocxCodec(contributions:) contributes DocumentEditorController extensions: [MyExtension(), …] installed on register() definition ElementRegistry toolbar · menus · inspector DocumentElementRegistry schema · validation
Anatomy of an element extension
Starting pointCompositionAdds
Rich-text noteDocumentExtension.richTextParagraphs, marks, links, clipboard, history, keyboard navigation
Paragraphs and tablesRich-text set plus TableDocumentExtensionTables
Full documentDocumentExtension.defaultsThe bundled starter set
Advanced elementsExplicit extension packagesEquations, Mermaid, diagrams

To call an element's methods, import its package as well as installing its extension.

Add tables to a note ​

This installs rich-text editing and the table adapter. The schema admits paragraphs in table cells and the ordinary marks.

dart
import 'package:flutter/widgets.dart';
import 'package:vyuh_document_editor/vyuh_document_editor.dart';
import 'package:vyuh_document_editor/document_editor_extensions.dart'
    show TableDocumentExtension;
import 'package:vyuh_document_extension_table/vyuh_document_extension_table.dart';

final controller = DocumentEditorController(
  layoutMode: DocumentEditorLayoutMode.pageless,
  document: Document.empty(),
  extensions: [...DocumentExtension.richText, const TableDocumentExtension()],
  schema: DocumentSchemaPolicy.restricted(
    blockTypes: {ParagraphBlock.schemaTypeValue, TableBlock.schemaTypeValue},
    inlineTypes: {TextRun.schemaTypeValue},
    markTypes: TextMark.values,
  ),
);

void addTable() => controller.insertTable(rows: 3, cols: 2);

Widget buildTableNote() => SizedBox(
  width: 520,
  height: 320,
  child: DocumentEditor(
    controller: controller,
    configuration: const DocumentEditorConfiguration(
      layoutMode: DocumentEditorLayoutMode.pageless,
    ),
  ),
);

Images ​

Add ImageDocumentExtension (from document_editor_extensions.dart) for block and inline images, admit the image types in your schema, and supply DocumentEditor.assetResolver. Import package:vyuh_document_extension_image/vyuh_document_extension_image.dart for insertImage, setImageSize and requestPictureChange.

Controller lifetime ​

The extension set is fixed for a controller's lifetime; create a new controller for a different set. When you narrow the schema, migrate content or handle its rejection.

Next ​