vyuhDiagram

Plain text and rich text ​

Plain text is included in Core. Rich text adds bold, italic, headings, lists and checklists through the Rich Text extension. Both share selection, editing, undo and persistence.

Create rich text ​

dart
import 'package:vyuh_diagram_extension_editor/vyuh_diagram_extension_editor.dart';
import 'package:vyuh_diagram_extension_rich_text/vyuh_diagram_extension_rich_text.dart';
import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';

final controller = DiagramController(
  configuration: DiagramConfiguration(
    extensions: [EditorExtension(), RichTextExtension()],
  ),
);
final id = controller.createRichText(
  at: const DiagramPoint(200, 120),
  text: 'Edit this Rich Text',
);
// Mount DiagramCanvas(controller: controller). Leave EditorExtension out
// for a view-only canvas.
// Dispose the controller when its owner is disposed.

Install RichTextExtension() once. Then call createRichText directly, or controller.edits.createRichText to inspect the edit outcome. Ordinary createText calls and existing shape slots stay plain.

Rich text inside a shape ​

dart
import 'package:vyuh_diagram_extension_editor/vyuh_diagram_extension_editor.dart';
import 'package:vyuh_diagram_extension_rich_text/vyuh_diagram_extension_rich_text.dart';
import 'package:vyuh_diagram_flutter/extension_api.dart';
import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';

final note = ShapeDefinition(
  type: 'app.note',
  body: ShapeColumn([
    const ShapeText(
      'title',
      text: 'Plain title',
      textType: PlainTextDefinition(maxLines: 1),
    ),
    const ShapeText(
      'body',
      text: 'Formatted body',
      textType: RichTextDefinition(grammar: RichTextGrammar(headings: false)),
    ),
  ]),
);
final notes = DiagramExtension(id: 'app.notes', shapes: [note]);
final controller = DiagramController(
  configuration: DiagramConfiguration(
    extensions: [EditorExtension(), RichTextExtension(), notes],
  ),
);

Each slot selects its own text and editing behavior; a slot without textType holds plain text. A table chooses the text of all its cells with ShapeTable(..., textType: ...), and a connector its labels with ConnectorLabelingCapability(textType: ...). Admission rejects paragraphs a slot's text does not admit, such as a list item in a plain slot or a second paragraph in a single-line slot.

A shape's declaration need not name its text at all. To give the core Comment, rectangle or card rich text, or a plain shape of your own, install RichTextExtension() and a copy made with ShapeDefinition.withText; see Rich text in shapes.

Configure text ​

Use maxLines: 1 for a single line, or 0 for unlimited paragraphs. RichTextGrammar chooses which marks, headings and lists a rich slot allows. Use withText(const RichTextDefinition()) to give a core shape rich text.

See the rich-text API for formatting, grammar and shortcuts.