vyuhDiagram

Range and whole-story formatting ​

Loading interactive example…Open in new tab ↗
Opening the live canvas…

Bold picnic toggles bold on the first occurrence of “picnic”, preserving the word's underline and color. Italic story toggles italic across both the paragraph and checklist. Clear picnic targets the same word and clears marks and explicit appearance only in that first range. These buttons demonstrate explicit API offsets; if you edit the text, the range still refers to offsets 0–6, not a word search.

Double-click the text to select a different range and try keyboard formatting. The action buttons do not represent or capture the current caret selection. Save, edit, then Restore verifies that mixed formatting is document content. Undo and redo operate on each admitted change; Reset restores the original fixture.

Public commands ​

dart
final before = session.document.textById('invitation')!.textStory;
final after = DiagramTextCommands.toggleMarkInRange(
  story: before,
  start: 0,
  end: 6,
  mark: TextMark.bold,
);
session.text.replace(
  elementId: 'invitation',
  before: before,
  after: after,
).requireAllowed();

The pure command constructs a story; session.text.replace validates and publishes it with history. A stale before story fails without overwriting newer text. Locked or noneditable targets return a denied decision; requireAllowed throws DiagramChangeDenied. Use setMarkAcrossStory for whole-story marks and clearFormattingInRange to clear a range. No second text model is created.

Source: apps/demo/lib/examples/text/formatting.dart. See text and paragraphs for caret, range, region and grammar rules. This example does not qualify browser IME or screen-reader behavior.