Vyuh Document

Add a new element ​

Build an extension when your product needs content or actions the included extensions do not provide. An element ships as two packages: a pure-Dart element package and a Flutter _editor package.

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
What goes in each package, and how it installs

Import document_editor_extensions.dart, create your DocumentExtension once, and pass it to the controller's extensions.

Decide what users can do ​

QuestionExample
What does it contain?Text, child blocks, an image, a custom graphic
How is it selected?Text inside it, the whole object, or both
Which properties change?Color, padding, font size, a frame
Where can it appear?In the flow, inside another element, floating
What happens across pages?Continue, or keep together
Which formats save it?JSON, plus the codecs you contribute

Expose only the properties and actions the element supports.

Element package ​

  • Definition: the content type, its JSON and where the schema allows it. Attributes must be JSON values; IDs must be unique.
  • Commands: extension methods on DocumentCommandTarget, like the included command APIs. Group related changes in a transaction so they undo together.
  • Codecs and layout: DOCX, Markdown and HTML contributions, and a layout adapter whose paint PDF and print reuse.

Editor package ​

  • Action IDs: one enum implementing EditorActionId (see Typed identifiers). Keep each key stable once released; saved settings store it.
  • Actions for the toolbar and insert menus.
  • Properties for the inspector.
  • Presentation: block and inline views, menus.

Check the whole experience ​

Try selection, typing, property changes, clipboard and Undo/Redo. For long content, check page continuation. Open and save a document in every format you contribute.

The extension integration reference has registration details and complete examples.

Next ​