Import and export

You will add Markdown in and out, HTML import, Word import and export with fidelity reports, and PDF export of the exact pages on screen.

Packages

pubspec.yaml

dependencies:
  vyuh_document_md_codec:
    hosted: https://pub.vyuh.tech
    version: ^0.19.3
  vyuh_document_codec_html:
    hosted: https://pub.vyuh.tech
    version: ^0.19.3
  vyuh_document_codec_docx:
    hosted: https://pub.vyuh.tech
    version: ^0.19.3
  vyuh_document_codec_pdf:
    hosted: https://pub.vyuh.tech
    version: ^0.19.3

flutter pub add

flutter pub add vyuh_document_md_codec --hosted-url https://pub.vyuh.tech
flutter pub add vyuh_document_codec_html --hosted-url https://pub.vyuh.tech
flutter pub add vyuh_document_codec_docx --hosted-url https://pub.vyuh.tech
flutter pub add vyuh_document_codec_pdf --hosted-url https://pub.vyuh.tech

Pick only the formats you need. All four are pure Dart.

Every format goes through one Document

Markdown and HTML

import 'package:vyuh_document_codec_html/vyuh_document_codec_html.dart';
import 'package:vyuh_document_editor/vyuh_document_editor.dart';
import 'package:vyuh_document_md_codec/vyuh_document_md_codec.dart';

/// Markdown in and out, with element syntax from the installed extensions.
final markdownExtensions = MarkdownExtensionRegistry.fromExtensions(
  DocumentExtension.defaults,
);

Document importMarkdown(String source) {
  final result = const MarkdownCodec().decode(
    source,
    extensions: markdownExtensions,
  );
  return result.document;
}

String exportMarkdown(DocumentEditorController controller) =>
    const MarkdownCodec()
        .encode(controller.document, extensions: markdownExtensions)
        .source;

/// HTML import (paste or file); HTML is an import-only adapter.
Document importHtml(String html) => const HtmlCodec()
    .decode(
      html,
      extensions: HtmlExtensionRegistry.fromExtensions(
        DocumentExtension.defaults,
      ),
    )
    .document;

MarkdownExtensionRegistry.fromExtensions reads element syntax (task lists, tables, code fences) from the installed extensions. Open the result with controller.replaceDocument(document) or a new controller.

DOCX

import 'package:vyuh_document_codec_docx/vyuh_document_codec_docx.dart';
import 'package:vyuh_document_editor/vyuh_document_editor.dart';

/// Opens a .docx file and keeps its fidelity report for the user.
Future<DocumentEditorController> openDocx(List<int> bytes) async {
  const codec = DocxCodec();
  final result = await codec.decodeWithReport(bytes);
  for (final issue in result.issues) {
    // Show what was approximated or omitted before the user starts editing.
    print('${issue.impact.name}: ${issue.message} (${issue.partPath})');
  }
  return DocumentEditorController(document: result.document);
}

/// Saves the current document as .docx and reports what was left out.
Future<List<int>> saveDocx(DocumentEditorController controller) async {
  final result = await const DocxCodec().encodeWithReport(controller.document);
  // supportReport lists elements whose DOCX contribution is not loaded.
  print(result.supportReport);
  return result.bytes;
}

decodeWithReport returns the document and a list of DocxFidelityIssues (what was approximated); show them before the user edits. encodeWithReport returns the bytes and a support report. Element packages' Word mappings join through DocxCodec(contributions: DocxCodecContributionRegistry.fixed([...])).

PDF

import 'dart:typed_data';

import 'package:vyuh_document_codec_pdf/vyuh_document_codec_pdf.dart';
import 'package:vyuh_document_editor/document_editor_integration.dart'
    show waitForCurrentExportLayout;
import 'package:vyuh_document_editor/vyuh_document_editor.dart';

/// Paints the pages the editor laid out into a PDF. PDF export never
/// paginates again: it waits for the mounted editor's layout of the current
/// revision and paints exactly that.
///
/// Pass the same [canvas] to `DocumentEditor(canvasController: canvas)`.
Future<Uint8List> exportPdf({
  required DocumentEditorController controller,
  required PaginatedCanvasController canvas,
  required Future<Uint8List?> Function(String assetId) imageBytes,
  required PdfFontBytesResolver fontBytes,
}) async {
  final state = controller.state;
  final layout = await waitForCurrentExportLayout(
    controller: controller,
    canvas: canvas,
  );
  final complete = await layout.materializeCompleteDocument();
  final registry = createCorePdfElementRegistry(
    controller.documentElementRegistry,
    extensions: [
      for (final extension in controller.extensions) extension.definition,
    ],
    elements: pdfElementsOf(controller.extensions),
  );
  return ResolvedPdfPainter(registry: registry).paintValidated(
    ResolvedPdfExportValidationEnvelope(state: state, generation: complete),
    resolveBytes: imageBytes,
    resolveFontBytes: fontBytes,
  );
}

PDF export paints the editor's own pages. Create one PaginatedCanvasController, pass it to DocumentEditor(canvasController:), and give it to the export. ResolvedDocumentPrintService prints the same pages.

Fonts

The PDF uses the exact font faces the editor laid out with. Supply bytes for each family, weight and style through resolveFontBytes. See Fonts and images.

See compatibility for what each format carries.

Next

Step 7: diagrams and math.